# Global Header / Menubar & Footer Design Plan

**Project:** Bangladesh Saree E-Commerce Website  
**Component Type:** Global Top Navigation Bar (Desktop & Mobile Slide-Out Drawer) + Global Website Footer  
**Color Zone Allocation:** **15% `--brand-primary` Brand Authority Zone**  
**Navigation Architecture:** **Dual Switchable Menubar Modes (`MODE_A` & `MODE_B`)** controlled via `storeConfig.headerNavigationMode` — with **no dropdown menus, no search bar trigger, no track order link, no login icon, and no wishlist heart (`♡`)**.  
**Design System Reference:** Strictly uses the 12 global variables from `global_color_typography_design_plan.md` (`--bg-main`, `--bg-surface`, `--brand-primary`, `--brand-accent`, `--text-primary`, `--text-muted`, `--text-light`, `--border-subtle`, `--state-success`, `--state-error`, `--font-heading`, `--font-body`) and shared standards from `global_ui_components_and_content_standards.md`. **Zero hardcoded hex codes or font names.**

---

## 1. AI Agent Implementation Rules (Strict Directives)

1. **100% Variable-Driven Styling:** Reference only the 12 global variables. Never hardcode hex values or font names.
2. **15% `--brand-primary` Color Rule:** Both the Top Menubar and the Global Footer use solid `--brand-primary` backgrounds with `--text-light` primary text/icons and `--brand-accent` hover/active highlights.
3. **Contrast Rule on `--brand-accent` Elements:** Any solid `--brand-accent` badge or pill inside the header or footer (such as the Shopping Bag counter badge or the Footer COD trust pill) must **always** use `--text-primary` Semi-Bold/Bold text (never `--text-light`).
4. **Zero Header Clutter:**
   * **No Dropdown Menus:** Every link in the menubar is a direct 1-click destination.
   * **No Search Icon / Bar, No Track Order Link, No Login Icon, No Wishlist Heart (`♡`).**
   * **Right Zone Utility:** Contains **only** the **Shopping Bag Trigger (`🛍` + Item Counter Badge)**.
5. **Switchable Navigation Modes (`MODE_A` vs. `MODE_B`):** Implement both **Mode A (Flat Direct Saree Category Bar)** and **Mode B (Minimal Boutique Bar)** so changing `storeConfig.headerNavigationMode` switches both the Desktop Header and Mobile Menu Drawer automatically.

---

## 2. Optional Top Announcement Bar (`storeConfig.announcementBar`)

* **Dimensions:** Full width (`100%`), height `34px` Desktop / `30px` Mobile.
* **Surface & Border:** `--bg-surface` background with a bottom `1px` solid `--border-subtle` border.
* **Typography & Color:** Centered single-line text in `--font-body` (Medium `500`, `12px` Desktop / `11px` Mobile, `--text-primary`).
* **Default Copy:** *"✓ Cash on Delivery Across Bangladesh  •  Inside Dhaka Delivery BDT 70  •  Check Parcel Upon Delivery"*
* **Toggle:** Controlled by `storeConfig.announcementBar.enabled`.

---

## 3. Desktop Main Menubar (`1025px+` Viewport)

### A. Container & Sticky Behavior
* **Dimensions:** Full width (`100%`), height `74px`, inner layout centered (`max-width: 1280px`, `padding: 0 24px`).
* **Surface:** Solid `--brand-primary` background, sticky at the top of the viewport (`top: 0`).

### B. 3-Zone Horizontal Desktop Layout

#### 1. Left Zone (`20%` Width) — Brand Logo
* Renders `storeConfig.brandName` in `--font-heading` (Bold `700`, `28px`, letter-spacing `1px`, `--text-light`) or an uploaded logo image.
* **Destination:** Always routes to `/` (Homepage).

#### 2. Center Zone (`65%` Width) — Switchable Navigation Modes
* **Typography:** `--font-body` (Medium `500`, `15px`, `--text-light`), horizontally centered (`28px – 32px` gap).
* **Hover & Active Link State:** Text transitions to `--brand-accent` with a `2px` bottom underline in `--brand-accent`.

##### Option 1 — `MODE_A`: Flat Direct Saree Category Bar *(Default)*
Displays the store's top Saree categories directly in a single flat horizontal row:
* **Links & Exact Routes:**
  * `Home` → `/`
  * `All Sarees` → `/sarees` (`all_sarees_category_showcase_plan.md`)
  * `Jamdani` → `/category/jamdani` (`single_category_view_all_page_plan.md`)
  * `Muslin` → `/category/muslin`
  * `Katan` → `/category/katan`
  * `Silk` → `/category/silk`
  * `Cotton` → `/category/cotton`

##### Option 2 — `MODE_B`: Minimal Boutique Bar
Displays high-level collection links for an ultra-minimal boutique feel:
* **Links & Exact Routes:**
  * `Home` → `/`
  * `All Sarees` → `/sarees`
  * `New Arrivals` → `/collections/new-arrivals` (`collection_and_utility_pages_plan.md`)
  * `Festive Edit` → `/collections/festive-edit`
  * `Offers` → `/collections/offers`

##### Future Phase 2 Mode (Multi-Department)
When future women's wear departments (*Salwar Kameez, Kurtis, Jewelry*) are activated later, the flat bar can display the Parent Departments (`Home | Sarees | Salwar Kameez | Kurtis | Jewelry`) with zero dropdown clutter.

#### 3. Right Zone (`15%` Width) — Shopping Bag Trigger Only
* Right-aligned button (`height: 44px`, `padding: 0 12px`, `aria-label="Shopping bag, X items"`).
* **Icon:** Shopping Bag icon (`🛍`) in `--text-light` (hover transitions to `--brand-accent`).
* **Item Counter Badge:** Circular pill (`22px × 22px`) in solid `--brand-accent` background with `--text-primary` Semi-Bold/Bold (`12px`) `--font-body` text.
* **Action:** Slides open the **Right Cart Drawer** (`cart_and_checkout_flow_plan.md`).

---

## 4. Mobile & Tablet Header + Slide-Out Drawer (`320px – 1024px`)

### A. Sticky Mobile Header Bar (`height: 60px`)
* **Background:** Solid `--brand-primary` with `--text-light` icons and brand title.
* **3-Part Symmetric Layout:**
  1. **Left (`44px × 44px` Touch Target):** **Hamburger Menu Button (`☰`)** in `--text-light` (`aria-label="Open menu"`).
  2. **Center:** **Brand Logo** in `--font-heading` (Bold `700`, `22px`, `--text-light`) routing to `/`.
  3. **Right (`44px × 44px` Touch Target):** **Shopping Bag Button (`🛍`)** in `--text-light` + circular `--brand-accent` counter badge (`--text-primary` text).

### B. Slide-Out Mobile Menu Drawer (Left-to-Right Overlay)
* **Backdrop:** Dimmed overlay (`--text-primary` at `60%` opacity).
* **Drawer Panel:** `width: 82vw` (`max-width: 320px`), `height: 100dvh`, `--bg-main` background with a `1px` `--border-subtle` right border.
* **Drawer Top Bar (`height: 60px`):** Solid `--brand-primary` background with Brand Logo (`--text-light`, `22px`) on the left and Close Button (`✕`, `44px × 44px` tap target, `--text-light`) on the right.
* **Flat Vertical Navigation List (Synced with `MODE_A` or `MODE_B`):**
  * Automatically lists the links from whichever mode (`MODE_A` or `MODE_B`) is active in `storeConfig`.
  * Each link is a full-width touch row (`height: 50px`, `padding: 0 20px`) separated by a `1px` `--border-subtle` divider, with link text in `--font-body` (Medium `500`, `15px`, `--text-primary`; active page in `--brand-primary` Semi-Bold `600`) and a subtle right arrow (`→` in `--text-muted`).
* **Drawer Bottom Support Box (Pinned Bottom, `--bg-surface` Container, `1px` `--border-subtle` Top Border):**
  * Displays Customer Support Phone / WhatsApp number (`storeConfig.storeContactInfo.phone`), Support Hours (`10:00 AM – 10:00 PM`), and `"✓ Cash on Delivery Across Bangladesh"` in `--font-body` (`13px`, `--text-muted` & `--text-primary`).

---

## 5. Global Website Footer (15% `--brand-primary` Anchor Zone)

### A. Footer Surface & Typography Mapping
* **Container Background:** Solid `--brand-primary` (`padding: 64px 24px 24px` Desktop / `40px 16px 24px` Mobile).
* **Column Headings (H4):** `--font-heading` (Semi-Bold `600`, `20px` Desktop / `18px` Mobile) in `--brand-accent`.
* **Footer Links & Body Copy:** `--font-body` (Regular `400`, `14px`, line-height `1.7`) in `--text-light` (hover transitions to `--brand-accent`).
* **Internal Dividers:** `1px` `--border-subtle` at `20%` opacity.

### B. 4-Column Responsive Footer Grid (`max-width: 1280px`)
* **Desktop (`1025px+`):** 4 columns side-by-side.
* **Tablet (`768px – 1024px`):** `2 × 2` grid.
* **Mobile (`320px – 767px`):** Single-column stack (Columns 2 & 3 use clean tap-to-expand accordions on mobile so the footer stays compact).

#### Column 1 — Brand Story & Social Media (`30%` Width)
* **Brand Logo:** `--font-heading` (Bold `700`, `28px` Desktop / `22px` Mobile, `--text-light`).
* **Heritage Description:** 2–3 sentences celebrating authentic Bangladeshi handloom weavers in `--font-body` (`14px`, `--text-light`).
* **Social Media Icon Row:** Circular buttons (`40px × 40px`) for *Facebook, Instagram, YouTube, and WhatsApp* (`1px` `--brand-accent` border, `--text-light` icon; hover fills with `--brand-accent` background and `--text-primary` icon).

#### Column 2 — Shop Sarees (`22%` Width)
* **Heading (H4):** `Shop Sarees` (`--brand-accent`).
* **Links & Routes (`--text-light`):**
  * *All Sarees* → `/sarees`
  * *Dhakai Jamdani* → `/category/jamdani`
  * *Pure Muslin* → `/category/muslin`
  * *Royal Katan* → `/category/katan`
  * *Tangail & Pure Cotton* → `/category/cotton`
  * *Pure Silk Sarees* → `/category/silk`
  * *New Arrivals* → `/collections/new-arrivals`

#### Column 3 — Information & Policies (`23%` Width)
* **Heading (H4):** `Information` (`--brand-accent`).
* **Links & Routes (`--text-light` — defined in `collection_and_utility_pages_plan.md`):**
  * *About Our Brand* → `/about`
  * *Shipping & Delivery Charges* → `/shipping-policy`
  * *Cash on Delivery (COD) Guidelines* → `/cod-policy`
  * *Exchange & Return Policy* → `/exchange-policy`
  * *Saree Wash & Care Guide* → `/saree-care-guide`
  * *Contact Us* → `/contact`

#### Column 4 — Customer Support & COD Assurance (`25%` Width)
* **Heading (H4):** `Customer Support` (`--brand-accent`).
* **Contact Details (`--text-light`, pulled from `storeConfig`):**
  * **Helpline / WhatsApp:** `+880 1XXX-XXXXXX`
  * **Support Hours:** `Daily, 10:00 AM – 10:00 PM`
  * **Email:** `support@yourdomain.com`
  * **Location:** `Dhaka, Bangladesh`
* **Cash on Delivery Assurance Badge:**
  * Solid `--brand-accent` pill (`padding: 8px 14px`) with `--text-primary` Semi-Bold (`600`, `11px` uppercase) `--font-body` text:
  * **`✓ CASH ON DELIVERY ACROSS ALL 64 DISTRICTS`**

### C. Bottom Copyright Bar
Separated by a `1px` horizontal line (`--border-subtle` at `20%` opacity):
* **Left:** `© 2026 [Brand Name]. All Rights Reserved.` (`--text-light`, `13px`).
* **Right:** `Delivery Across Bangladesh  •  Payment: Cash on Delivery (COD)` (`--text-light`, `13px`).