Header Component - AgroLogi/FreshShop GitHub Wiki

The Header is one of the most vital components in the FreshShop app, serving as the main navigation hub for users. It provides access to various parts of the site, including product categories, the search bar, shopping cart, and user account management. Its clean design ensures an intuitive and easy-to-use interface.

1. Logo and Navigation

At the top-left corner of the header, the FreshShop logo is displayed prominently, serving as a clickable link that redirects users to the homepage. This ensures that users can easily return to the main page from any part of the website. Alongside the logo, additional navigation options for categories and search are provided for easy product discovery.

2. Category Dropdown

The category dropdown allows users to browse products by category in a highly organized way. Powered by a dropdown menu component, the category list is dynamically populated by fetching category data from the backend. This ensures that any updates made to categories in the backend are reflected in real time on the frontend. Users can select any category, and the app will navigate them to the relevant product listings page.

3. Search Bar

A search bar is available for medium to large screen sizes, giving users the option to search for products directly. This feature makes product discovery faster and more efficient, as users can simply type in the product name or keyword and view search results instantly. The search bar is designed to be sleek and non-intrusive, blending seamlessly into the header layout.

4. Cart Integration

The cart is a key part of the FreshShop experience, and the cart icon in the header allows users to access their cart with ease. Next to the cart icon, the number of items in the user’s cart is displayed in real time. When clicked, the cart opens as a sheet that slides in from the side, showing a detailed list of the products in the cart, their quantities, and the subtotal. The cart is populated by fetching data from the backend, specifically tied to the logged-in user's ID. Users can also remove items from the cart through the cart sheet, with changes immediately reflected both in the cart and the subtotal.

5. User Authentication

The user authentication section in the header handles login, logout, and access to user account features. For non-authenticated users, a "Login" button is displayed, which redirects them to the sign-in page. Once logged in, users can access their account and other options like My Orders. The header displays a user icon, and clicking on this icon opens a dropdown menu with additional account management options. When a user logs out, the session data is cleared, and the user is redirected to the login page.

6. Responsive Design

The entire header component is built with responsiveness in mind, ensuring that it works equally well on desktop and mobile devices. Elements like the category dropdown, cart sheet, and search bar adjust their appearance based on the screen size, providing an optimal experience on all devices.