# Navigation System Architecture & Flow Diagram

## System Architecture Overview

```
┌─────────────────────────────────────────────────────────────────────┐
│                           HEADER NAVIGATION                          │
│  [HOME] [SHOP] [BLOGS] [ABOUT]  [MORE ▼]                           │
│                                     ↓ (on hover)                    │
│                              ┌──────────────────┐                   │
│                              │ DROPDOWN CONTENT │                   │
│                              ├──────────────────┤                   │
│                              │ • Contact        │                   │
│                              │ • Gallery        │                   │
│                              │ • Services       │                   │
│                              │ • FAQ            │                   │
│                              └──────────────────┘                   │
└─────────────────────────────────────────────────────────────────────┘
```

## Data Flow Diagram

```
┌──────────────────┐
│  MySQL Database  │
│  (pages table)   │
└────────┬─────────┘
         │ READ
         ↓
   ┌─────────────────────────────────────┐
   │   NavigationHelper Class            │
   │  (helpers/navigation_helper.php)    │
   │                                     │
   │  • getFeaturedPages()               │
   │  • getAllPages()                    │
   │  • toggleFeatured()                 │
   │  • updateMenuOrder()                │
   │  • addPage()                        │
   │  • deletePage()                     │
   └────────┬────────────────────────────┘
            │
    ┌───────┴────────┐
    ↓                ↓
┌─────────────┐  ┌──────────────────┐
│  header.php │  │ API Endpoint     │
│   (display) │  │ (api_manage_...) │
└────┬────────┘  └────────┬─────────┘
     │                    │
     │                    │
     ↓                    ↓
  FRONTEND         ADMIN DASHBOARD
  (navigation)     (admin_manage...)
```

## Page Request Flow

```
User visits website
        ↓
   header.php loads
        ↓
   navigation_helper.php included
        ↓
   NavigationHelper::getFeaturedPages()
        ↓
   Query MySQL: SELECT * FROM pages WHERE is_featured=1 LIMIT 4
        ↓
   Display featured pages in header
        ↓
   Display "MORE" button with dropdown
        ↓
   NavigationHelper::getAllPages()
        ↓
   Query MySQL: SELECT * FROM pages ORDER BY menu_order
        ↓
   Display all pages in dropdown on hover
```

## Admin Management Flow

```
Admin visits: admin_manage_pages.php
        ↓
   Form submitted (POST)
        ↓
   Determine action: add_page, toggle_featured, update_order, delete_page
        ↓
   Call NavigationHelper::{action}()
        ↓
   Update MySQL pages table
        ↓
   Display success/error message
        ↓
   Refresh display with updated pages
        ↓
   Changes immediately visible in header.php
```

## Database Schema

```
┌─────────────────────────────────────────────────┐
│                    pages TABLE                   │
├────────┬──────────┬────────┬────────────────────┤
│ Column │   Type   │ Key    │   Description      │
├────────┼──────────┼────────┼────────────────────┤
│ id     │ INT      │ PK     │ Unique identifier  │
├────────┼──────────┼────────┼────────────────────┤
│ title  │ VARCHAR  │ UNIQUE │ Page name          │
├────────┼──────────┼────────┼────────────────────┤
│ slug   │ VARCHAR  │ UNIQUE │ URL slug           │
├────────┼──────────┼────────┼────────────────────┤
│ url    │ VARCHAR  │        │ Link to page       │
├────────┼──────────┼────────┼────────────────────┤
│ featured│ BOOLEAN │        │ 1=featured, 0=not  │
├────────┼──────────┼────────┼────────────────────┤
│ order  │ INT      │        │ Sort order (1-999) │
├────────┼──────────┼────────┼────────────────────┤
│ created│ TIMESTAMP│        │ Creation time      │
├────────┼──────────┼────────┼────────────────────┤
│ updated│ TIMESTAMP│        │ Last update time   │
└────────┴──────────┴────────┴────────────────────┘
```

## Feature Pages Flow (4 Featured Max)

```
All Pages in Database
        ↓
┌─────────────────────────────────────┐
│ Featured Pages (is_featured = 1)    │
│                                     │
│ • id=1, title="Home"    order=1 ✓   │ ──→ HEADER: [HOME]
│ • id=2, title="Shop"    order=2 ✓   │ ──→ HEADER: [SHOP]
│ • id=4, title="Blogs"   order=3 ✓   │ ──→ HEADER: [BLOGS]
│ • id=5, title="About"   order=4 ✓   │ ──→ HEADER: [ABOUT]
│                                     │
│ Max 4 pages shown directly          │
└─────────────────────────────────────┘
        
All Pages in Dropdown
        ↓
┌─────────────────────────────────────┐
│ Dropdown Menu (ALL Pages)           │
│                                     │
│ • Home         ✓ Featured           │
│ • Shop         ✓ Featured           │
│ • Contact      (not featured)       │
│ • Gallery      (not featured)       │
│ • Blogs        ✓ Featured           │
│ • About        ✓ Featured           │
│ • FAQ          (not featured)       │
│                                     │
│ Shows ALL pages with featured badge │
└─────────────────────────────────────┘
```

## Menu Order Example

```
Database records with menu_order:

┌──────────────────────────────────────┐
│ id │ title      │ featured │ order   │
├────┼────────────┼──────────┼─────────┤
│ 1  │ Home       │    1     │  1      │
│ 2  │ Shop       │    1     │  2      │
│ 5  │ About      │    1     │  3      │
│ 4  │ Blogs      │    1     │  4      │
│ 3  │ Contact    │    0     │  5      │
│ 6  │ Gallery    │    0     │  6      │
│ 7  │ FAQ        │    0     │  7      │
└──────────────────────────────────────┘

HEADER DISPLAY (featured pages in order):
[HOME] [SHOP] [ABOUT] [BLOGS] [MORE ▼]

DROPDOWN DISPLAY (all pages in order):
1. Home        ✓ Featured
2. Shop        ✓ Featured
3. About       ✓ Featured
4. Blogs       ✓ Featured
5. Contact
6. Gallery
7. FAQ
```

## CSS Cascade (Styling Flow)

```
┌─────────────────────────────────────┐
│  browser defaults                   │
└──────────┬──────────────────────────┘
           ↓
┌─────────────────────────────────────┐
│  layout-system.css (global styles)  │
└──────────┬──────────────────────────┘
           ↓
┌─────────────────────────────────────┐
│  navigation-menu.css                │
│  (specific nav styling)             │
│                                     │
│  • .nav-menu-featured               │
│  • .nav-menu-dropdown               │
│  • .nav-menu-dropdown-content       │
│  • .nav-menu-featured-badge         │
│  • Hover effects                    │
│  • Mobile responsive                │
└──────────┬──────────────────────────┘
           ↓
┌─────────────────────────────────────┐
│  RENDERED NAVIGATION                │
│  (header display with styling)      │
└─────────────────────────────────────┘
```

## Admin Interface Workflow

```
                    ┌─ Add Page ──────────────┐
                    │                          │
                    ├─ Toggle Featured ───────┤
Admin Dashboard ────┤                          ├─→ NavigationHelper
                    ├─ Update Order ─────────┤
                    │                          │
                    └─ Delete Page ──────────┘

                           ↓
                    
                    Update MySQL
                      pages table
                    
                           ↓
                    
        Changes reflected in:
        • Header navigation
        • Dropdown menu
        • All site pages
        (immediately, no cache)
```

## File Dependencies

```
┌─────────────────────────────────────┐
│         Your Site Files             │
├─────────────────────────────────────┤
│                                     │
│  header.php                         │
│      ↓                              │
│  helpers/navigation_helper.php      │
│      ↓                              │
│  db_config.php (MySQL connection)   │
│                                     │
└─────────────────────────────────────┘

┌─────────────────────────────────────┐
│      Admin Management Files         │
├─────────────────────────────────────┤
│                                     │
│  admin_manage_pages.php             │
│      ↓                              │
│  helpers/navigation_helper.php      │
│      ↓                              │
│  db_config.php                      │
│                                     │
└─────────────────────────────────────┘

┌─────────────────────────────────────┐
│      API Endpoint Files             │
├─────────────────────────────────────┤
│                                     │
│  api_manage_pages.php               │
│      ↓                              │
│  helpers/navigation_helper.php      │
│      ↓                              │
│  db_config.php                      │
│                                     │
└─────────────────────────────────────┘
```

## User Interaction Flow

```
REGULAR VISITOR:
━━━━━━━━━━━━━━━━━
Visit Site → Load Header → See Featured Pages → 
    ↓
Hover over "MORE" → See All Pages in Dropdown → 
    ↓
Click Page Link → Navigate to Page


ADMIN USER:
━━━━━━━━━━━
Visit Admin → admin_manage_pages.php → 
    ↓
Choose Action:
│
├─ Add Page → Fill Form → Submit → Update DB
│
├─ Toggle Featured → Click Button → Update DB
│
├─ Change Order → Edit Numbers → Submit → Update DB
│
└─ Delete Page → Confirm → Update DB
    ↓
See Updated Navigation in Real-Time
```

## Responsive Design Breakpoints

```
DESKTOP (> 1024px):
[HOME] [SHOP] [BLOGS] [ABOUT] [MORE ▼]
(Full size, all padding)

TABLET (768px - 1024px):
[HOME] [SHOP] [BLOGS] [MORE ▼]
(Reduced padding, still horizontal)

MOBILE (< 768px):
[HOME] [SHOP] [MORE ▼]
(More compact, flexible layout)

SMALL MOBILE (< 480px):
[HOME] [MORE ▼]
(Minimal display, stacked if needed)
```

## Security Layers

```
┌─────────────────────────────────────┐
│     Input Validation                │
│  (Check page_id, is_featured, etc)  │
└────────────┬────────────────────────┘
             ↓
┌─────────────────────────────────────┐
│   Prepared Statements               │
│   (Prevent SQL injection)           │
└────────────┬────────────────────────┘
             ↓
┌─────────────────────────────────────┐
│   HTML Escaping                     │
│   (htmlspecialchars() for output)   │
└────────────┬────────────────────────┘
             ↓
┌─────────────────────────────────────┐
│   Admin Check                       │
│   (Require is_admin = 1)            │
└────────────┬────────────────────────┘
             ↓
┌─────────────────────────────────────┐
│   Safe Database Updates             │
└─────────────────────────────────────┘
```

## Performance Optimization

```
DATABASE LEVEL:
├─ Primary Key Index on id
├─ UNIQUE Index on title and slug
├─ Index on is_featured (filter query)
└─ Query Limiting (LIMIT 4 for featured)

APPLICATION LEVEL:
├─ Static method cache (singleton pattern)
├─ Direct parameter passing (no globals)
├─ Prepared statements (compiled queries)
└─ Minimal database calls per page load

FRONTEND LEVEL:
├─ CSS animations (GPU accelerated)
├─ Hover effects (no JavaScript)
├─ Responsive design (mobile-first)
└─ Minimal CSS file size
```

---

**This diagram shows how all components work together to create a seamless navigation system!**
