Styled App Bar - Copy this React, Mui Component to your project
Header Design Specification (English Version) Header Background: The main header has a dark red background (#D91E1E) that spans the entire width of the website. The header height is sufficient to accommodate the logo, search bar, and contact information, along with login and shopping cart elements. Logo: The XGEAR logo is white and positioned at the top left corner of the header. The logo is large and clearly visible, vertically centered with other elements. Font: Uses a bold, modern, and legible font. Search Bar: The search bar is centrally aligned, with a placeholder text reading "Handheld / C". The search button features a red magnifying glass icon with a white background for the input field, rounded borders, and a spacious width. Hotline & Store Info: The top right corner of the header contains the following contact information: Hotline: Displays the phone number 02871081881 with a small white phone icon next to it. Store Locator: A small location icon next to the text "Hệ thống cửa hàng" (Store system). When clicked, it triggers a dropdown showing available store locations. Login / Register: The Login/Register button is placed next to the shopping cart icon, displayed as a white user icon. Clicking on it opens a dropdown menu for login or registration options. Shopping Cart: The shopping cart icon is located at the top right corner, with a red cart icon. The number of items in the cart is displayed on a small red circle. Secondary Navigation (Product Categories): The secondary navigation bar sits directly below the main header and has a black background. Items such as Product Categories, Payment Guide, Installment Guide, Warranty Lookup, Recruitment, and Tech News are displayed in white text. These items include small icons, and when hovered over, the color changes or an underline effect appears. Primary Navigation: The primary navigation bar, with a red background, contains items like Laptop, Xgear PC, Monitors, Components, Accessories, Promotions, Best Sellers, etc. Each item has a small accompanying icon, displayed in white. When hovered over, the text changes color or an underline/hover effect is applied.
