# Layouts Documentation > Tài liệu chi tiết về layout components (Header, Footer) và responsive behavior --- ## Overview The `layouts/` directory contains layout-level components used across all pages. These are included in the root layout and provide consistent header/footer across the application. ``` layouts/ ├── header.tsx # Sticky top header with shop branding and auth ├── footer.tsx # Footer with shop info, social links, WiFi details └── LAYOUTS.md # (this file) ``` --- ## Header (layouts/header.tsx) **File:** layouts/header.tsx **Type:** Client component **Description:** Sticky top navigation bar with brand info and authentication status display. ### Layout ``` ┌─────────────────────────────────────────────────────┐ │ [Logo] [Shop Name] [Tagline] │ [Auth Status] │ └─────────────────────────────────────────────────────┘ height: 72px (var(--spacing-header-height)) ``` **2-Column Layout:** - **Left:** Shop branding (logo + name + tagline) - **Right:** Auth status indicator ### Features #### Logo & Branding - Shop logo (40x40px) - Shop name (bold text) - Tagline (hidden on mobile < md, visible md+) **Responsive:** | Breakpoint | Logo | Name | Tagline | |-----------|------|------|---------| | < sm (640px) | Yes | Yes | Hidden | | sm-md | Yes | Yes | Hidden | | md+ (768px) | Yes | Yes | Visible | #### Authentication Status The header cycles through 3 auth states (for UI demo): **State 1: Guest (Not logged in)** ``` [brown button] "Dang nhap" ``` - Guest state (user = null) - Brown primary button - Click: toggles to next state **State 2: Manager** ``` [caramel/gold badge] "👔 Quản lý" ``` - Shows manager role - Gold/caramel colored badge - User tie icon - Name: Nguyễn Văn An **State 3: Staff** ``` [border button] "👤 [Name]" ``` - Shows staff role with avatar placeholder - Bordered button style - Name: Trần Thị Bình - Click: toggles back to Guest state ### Responsive Behavior | Breakpoint | Layout | | ------------- | ------------------------------- | | < sm | Stacked vertically | | sm-md (640px) | Side-by-side, reduced spacing | | md+ (768px) | Full width, comfortable spacing | **Mobile (<640px):** - Logo smaller - Name only (no tagline) - Auth button text hidden, icon shown - Touch-friendly padding **Desktop (≥640px):** - Normal logo size - Full layout with tagline - Button with text and icon - Comfortable spacing ### Styling | Element | Classes | | -------------------- | --------------------------------------------------------- | | Header wrapper | `sticky top-0 z-50 bg-white shadow-md` | | Container | `max-w-7xl mx-auto px-4 md:px-6 h-72px flex items-center` | | Left section (brand) | `flex items-center gap-3 flex-1` | | Right section (auth) | `flex items-center gap-3 shrink-0` | | Logo image | `w-10 h-10 md:w-12 md:h-12` | | Brand text | `font-bold text-sm md:text-base` | | Tagline | `hidden md:block text-xs text-muted-foreground` | | Auth button | `px-4 py-2 rounded-lg text-sm font-medium` | ### CSS Variables Used ```css --spacing-header-height: 72px; --color-primary: brown; --color-primary-dark: darker brown; --color-text-primary: text color; --color-text-muted: gray text; --color-shadow-sm: subtle shadow; ``` ### Dependencies - **next/image** - Logo image rendering - **next/link** - Navigation links - **lib/constants:** SHOP_INFO, MOCK_USERS - **lib/types:** User - **FontAwesome icons:** fa-sign-in-alt, fa-sign-out-alt, fa-user-tie, fa-user-circle ### Key Code Snippets **Auth Demo State Machine:** ```typescript const [user, setUser] = useState(null); const handleAuthClick = () => { if (!user) { setUser(MOCK_USERS.manager); } else if (user.role === "manager") { setUser(MOCK_USERS.staff); } else { setUser(null); } }; ``` **Responsive Brand Text:** ```typescript
{SHOP_INFO.name} {SHOP_INFO.tagline}
``` --- ## Footer (layouts/footer.tsx) **File:** layouts/footer.tsx **Type:** Client component (uses constants) **Description:** Site footer with shop information, social links, and WiFi details. ### Layout ``` ┌────────────────────────────────────────────┐ │ [Brand Info] │ [Social + WiFi] │ ├────────────────────────────────────────────┤ │ © 2024 Coffee Shop. Made with ❤️ in VN │ └────────────────────────────────────────────┘ ``` **12-Column Grid Layout:** | Breakpoint | Brand Info | Social + WiFi | | ------------ | ----------- | ------------- | | Mobile | col-span-12 | col-span-12 | | md (768px) | col-span-6 | col-span-6 | | lg+ (1024px) | col-span-6 | col-span-6 | ### Sections #### 1. Brand Info (Left Section) **Content:** - Shop logo (40x40px) - Shop name (bold) - Tagline (gray text) - Address with location icon - Phone with phone icon - Email with envelope icon - Open hours with clock icon **Responsive:** ``` Mobile: └─ Logo └─ Name & Tagline (stacked) └─ Address └─ Phone └─ Email └─ Open Hours Desktop: └─ Logo + Name/Tagline (flexbox, side-by-side) └─ Address, Phone, Email, Hours (stacked below) ``` #### 2. Social Links (Top Right) **Links:** - Facebook icon → SHOP_INFO.facebook - TikTok icon → SHOP_INFO.tiktok - Website icon → SHOP_INFO.website **Styling:** - Icons in circle backgrounds - Hover effect (color change) - Flex row layout - Centered alignment #### 3. WiFi Card (Bottom Right) **Content:** - "📶 WiFi miễn phí" label - Network name (monospace) - Password (monospace, can be hidden/shown) **Styling:** - Light gray background - Rounded borders - Monospace font for credentials - Eye icon toggle for password visibility **Example:** ``` 📶 WiFi miễn phí ┌────────────────────────┐ │ Network: CoffeeShop │ │ Password: •••••••• │ │ (eye icon) │ └────────────────────────┘ ``` #### 4. Copyright Bar (Bottom) **Content:** - Copyright text: "© 2024 Coffee Shop" - "Made with ❤️ in Vietnam" - Centered **Styling:** - Small text - Gray color - Subtle separator line above ### Responsive Behavior **Mobile (<768px):** - Single column layout - Stacked sections - Full width - Padding around edges **Tablet (768px):** - 2-column layout - Brand info left, Social + WiFi right - Equal width columns **Desktop (≥768px):** - 2-column layout with more spacing - Brand info slightly smaller - Comfortable padding ### Styling | Element | Classes | | -------------- | --------------------------------------------------------- | | Footer wrapper | `bg-gray-100 border-t` | | Container | `max-w-7xl mx-auto px-4 py-8` | | Grid | `grid grid-cols-12 gap-8` | | Brand section | `col-span-12 md:col-span-6` | | Social section | `col-span-12 md:col-span-6` | | Logo | `w-10 h-10` | | Info text | `text-sm text-gray-600` | | Social icons | `w-10 h-10 rounded-full flex items-center justify-center` | | WiFi card | `bg-white p-4 rounded-lg border` | | Copyright bar | `border-t mt-8 pt-6 text-center text-xs text-gray-500` | ### CSS Variables Used ```css --color-primary: brand color; --color-text-secondary: secondary text color; --color-text-muted: muted/gray text color; --color-accent: accent color; --color-border: border color; --color-bg-*: background colors; --color-shadow-sm: subtle shadow; ``` ### Dependencies - **next/image** - Shop logo - **next/link** - Social links - **lib/constants:** SHOP_INFO, SOCIAL_LINKS - **FontAwesome icons:** location-dot, phone, envelope, clock, facebook, tiktok, globe, wifi, eye, eye-slash ### Key Code Snippets **Brand Info Section:** ```typescript
{SHOP_INFO.name}

{SHOP_INFO.name}

{SHOP_INFO.tagline}

{SHOP_INFO.address}

{/* etc */}
``` **Social Links:** ```typescript
{/* etc */}
``` **WiFi Display:** ```typescript

📶 WiFi miễn phí

{SHOP_INFO.wifi.name}

{showPassword ? SHOP_INFO.wifi.password : "••••••••"}

``` --- ## Integration in Root Layout **File:** app/layout.tsx ```typescript export default function RootLayout({ children }) { return (
{children}