# PHP Navigation Menu System - Setup & Documentation

## Overview
A complete, modular PHP navigation menu system for your Emporio Sport header. Allows admins to:
- Select up to 4 featured pages for the main navigation
- View all pages in a dropdown menu on hover
- Manage page order and featured status
- Add, edit, and delete pages from the database

## Features
✅ **Database-driven** - Uses MySQL pages table  
✅ **Modular design** - Separate helper class for database operations  
✅ **Hover dropdown** - Displays all pages on navigation hover  
✅ **Admin interface** - Beautiful management dashboard  
✅ **API endpoint** - For AJAX operations  
✅ **Responsive CSS** - Mobile-friendly navigation menu  
✅ **Fixed numbering bug** - Category page no longer shows incorrect numbering  

---

## Installation Steps

### Step 1: Create the Database Table
Run the setup script once:

```bash
Navigate to: http://localhost/emporio-sport/setup_pages_table.php
```

This will:
- Create the `pages` table if it doesn't exist
- Insert default pages (Home, Shop, Blogs, About Us, Contact)
- Set initial featured pages

**Table Structure:**
```sql
CREATE TABLE pages (
    id INT AUTO_INCREMENT PRIMARY KEY,
    title VARCHAR(255) NOT NULL UNIQUE,
    slug VARCHAR(255) NOT NULL UNIQUE,
    url VARCHAR(500) NOT NULL,
    is_featured BOOLEAN DEFAULT 0,
    menu_order INT DEFAULT 999,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
)
```

### Step 2: Files Created

#### Core Files
- **[helpers/navigation_helper.php](helpers/navigation_helper.php)** - Main database handler class
- **[header.php](header.php)** - Updated header with navigation menu (already included)
- **[css/navigation-menu.css](css/navigation-menu.css)** - Navigation styling

#### Admin Interface
- **[admin_manage_pages.php](admin_manage_pages.php)** - Admin dashboard for managing pages
- **[api_manage_pages.php](api_manage_pages.php)** - API endpoint for page operations
- **[setup_pages_table.php](setup_pages_table.php)** - Database table setup script

---

## How It Works

### Navigation Display

**Header Navigation (Featured Pages):**
- Displays up to 4 featured pages directly in the header
- Pages appear in order of `menu_order` value
- All featured pages have `is_featured = 1`

**Dropdown Menu (All Pages):**
- On hover over navigation, shows all other pages
- Includes a "Featured" badge for currently featured pages
- Allows easy navigation to less important pages

### Admin Interface

Access the admin page management at:
```
http://localhost/emporio-sport/admin_manage_pages.php
```

**Requirements:**
- User must be logged in
- User must have `is_admin = 1` in the database

**Features:**
1. **Add New Page**
   - Enter page title, slug, URL
   - Optionally mark as featured
   - Maximum 4 featured pages allowed

2. **Update Menu Order**
   - Set the order pages appear in navigation
   - Lower numbers appear first
   - Use values 1-999

3. **Toggle Featured Status**
   - Click "Make Featured" or "Unfeature" buttons
   - Featured pages show directly in header
   - Non-featured pages appear in dropdown

4. **Delete Pages**
   - Remove pages from navigation
   - Requires confirmation

---

## Code Examples

### Using NavigationHelper in Your Code

```php
<?php
require_once __DIR__ . '/helpers/navigation_helper.php';

// Get featured pages (max 4)
$featured = NavigationHelper::getFeaturedPages();
foreach ($featured as $page) {
    echo '<a href="' . $page['url'] . '">' . $page['title'] . '</a>';
}

// Get all pages
$allPages = NavigationHelper::getAllPages();

// Toggle featured status
NavigationHelper::toggleFeatured($pageId, true);

// Update menu order
NavigationHelper::updateMenuOrder($pageId, 2);

// Add new page
$newPage = NavigationHelper::addPage([
    'title' => 'Gallery',
    'slug' => 'gallery',
    'url' => 'gallery.php',
    'is_featured' => 1
]);

// Delete page
NavigationHelper::deletePage($pageId);

// Get single page
$page = NavigationHelper::getPageById($pageId);
?>
```

### API Endpoint Usage

```javascript
// Get all featured pages
fetch('api_manage_pages.php', {
    method: 'POST',
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
    body: 'action=get_featured_pages'
})
.then(r => r.json())
.then(data => console.log(data.pages));

// Toggle featured status
fetch('api_manage_pages.php', {
    method: 'POST',
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
    body: 'action=toggle_featured&page_id=2&is_featured=1'
})
.then(r => r.json())
.then(data => console.log(data.success));
```

---

## CSS Classes Reference

### Main Navigation Menu
```css
.nav-menu-featured              /* Featured pages container */
.nav-menu-dropdown              /* Dropdown menu wrapper */
.nav-menu-dropdown-toggle       /* "MORE" button */
.nav-menu-dropdown-content      /* Dropdown items container */
.nav-menu-featured-badge        /* "Featured" label */
```

### Styling
All CSS is in [css/navigation-menu.css](css/navigation-menu.css)

**Key Features:**
- Hover effects with smooth transitions
- Dropdown appears on hover with animation
- Mobile-responsive design
- Orange (#F07E2D) accent color matching site theme

---

## Bug Fixes

### Category Page Numbering Issue
**Problem:** Category page was displaying "1. 2. 3." in the description  
**Cause:** Hardcoded PHP string concatenation instead of PHP variable echo  
**Fix:** Updated [category.php](category.php) line ~142 to properly echo variables

**Before:**
```php
<p>Explore our collection of ' . htmlspecialchars($cat) . ' fashion items</p>
```

**After:**
```php
<p>Explore our collection of <?php echo htmlspecialchars($cat); ?> fashion items</p>
```

---

## Database Queries

### Get Featured Pages
```sql
SELECT id, title, slug, url 
FROM pages 
WHERE is_featured = 1 
ORDER BY menu_order ASC 
LIMIT 4
```

### Get All Pages
```sql
SELECT id, title, slug, url, is_featured
FROM pages 
ORDER BY menu_order ASC
```

### Toggle Featured
```sql
UPDATE pages 
SET is_featured = ? 
WHERE id = ?
```

### Update Menu Order
```sql
UPDATE pages 
SET menu_order = ? 
WHERE id = ?
```

---

## Troubleshooting

### Navigation not showing
1. Verify `pages` table exists in database
2. Check that at least one page has `is_featured = 1`
3. Ensure [helpers/navigation_helper.php](helpers/navigation_helper.php) is included in header
4. Check browser console for JavaScript errors

### Database connection error
1. Verify database credentials in [db_config.php](db_config.php)
2. Check that database server is running
3. Ensure user has appropriate MySQL permissions

### CSS not loading
1. Verify [css/navigation-menu.css](css/navigation-menu.css) exists
2. Check that WEB_BASE_PATH is correctly defined
3. Clear browser cache (Ctrl+Shift+Delete)

### Pages not appearing
1. Check `menu_order` values (should be 1-999)
2. Verify `is_featured` is set correctly
3. Check that `url` field contains correct path

---

## Security Notes

✅ Uses prepared statements (parameterized queries) to prevent SQL injection  
✅ Admin check required for management page  
✅ User input is sanitized with htmlspecialchars()  
✅ CSRF protection recommended for production  

**Recommended additions for production:**
- Add CSRF tokens to admin forms
- Implement rate limiting on API endpoint
- Add user audit logging
- Use SSL/HTTPS for admin panel

---

## Configuration

### Default Featured Pages
Located in [setup_pages_table.php](setup_pages_table.php):

```php
$default_pages = [
    ['title' => 'Home', 'slug' => 'home', 'url' => 'index.php', 'is_featured' => 1],
    ['title' => 'Shop', 'slug' => 'shop', 'url' => 'shop.php', 'is_featured' => 1],
    ['title' => 'Blogs', 'slug' => 'blogs', 'url' => 'blogs.php', 'is_featured' => 1],
    ['title' => 'About Us', 'slug' => 'about', 'url' => 'about.php', 'is_featured' => 1],
    // ... more pages
];
```

Modify this array before running setup to set different default pages.

---

## File Locations

```
emporio-sport/
├── header.php (modified)
├── category.php (fixed numbering)
├── helpers/
│   └── navigation_helper.php (new)
├── css/
│   └── navigation-menu.css (new)
├── admin_manage_pages.php (new)
├── api_manage_pages.php (new)
└── setup_pages_table.php (new)
```

---

## Support

For issues or questions:
1. Check the Troubleshooting section above
2. Review the code comments in each file
3. Check browser console for JavaScript errors
4. Check server error logs for PHP errors

---

**Navigation System Created:** January 28, 2026  
**Status:** ✅ Complete and Ready for Use
