# Purchase Manager Sidebar Implementation Guide

## Overview
The Purchase Manager module now features a professional, responsive sidebar navigation system that matches the manager module's design. The sidebar is fully responsive across all devices and includes automatic badge count updates.

## Files Created

### 1. **pm-sidebar.php** (Sidebar Component)
Location: `/purchase_manager/pm-sidebar.php`  
This is the main sidebar navigation component that should be included on every page.

**Key Features:**
- Professional gradient background (#1e3a8a to #2563eb - blue theme)
- Organized sections: Main, Procurement, Inventory, Reports, Account
- Active state highlighting
- Badge support for low stock and new ingredients
- User info footer with avatar and role
- Hamburger menu for mobile devices
- Sidebar overlay for mobile/tablet

### 2. **pm-sidebar-styles.css** (Stylesheet)
Location: `/purchase_manager/pm-sidebar-styles.css`  
Contains all CSS for the sidebar with responsive breakpoints:
- Large desktop (1441px+): Full width sidebar
- Desktop (1025-1440px): Adjusted sidebar width
- Tablet (769-1024px): Overlay sidebar with hamburger
- Mobile (481-768px): Touch-friendly interface
- Small mobile (≤480px): Optimized for tiny screens
- Extra small (≤320px): Basic functionality

### 3. **pm-sidebar.js** (Interactivity)
Location: `/purchase_manager/pm-sidebar.js`  
Handles all JavaScript functionality:
- Hamburger menu toggle
- Sidebar open/close animations
- Overlay click to close
- Badge count auto-updates (new ingredients, low stock)
- Session management
- Logout functionality

## How to Update Existing Pages

### Step 1: Update HEAD Section
Replace the navbar bar styling with sidebar styling:

**OLD CODE:**
```html
<link rel="stylesheet" href="./pm-theme-enhanced.css">
```

**NEW CODE:**
```html
<link rel="stylesheet" href="./pm-sidebar-styles.css">
<link rel="stylesheet" href="./pm-theme-enhanced.css">
```

### Step 2: Replace Navbar with Sidebar
Replace the entire `<nav class="navbar">...</nav>` section with:

```php
<?php include 'pm-sidebar.php'; ?>
<div class="pm-main-container">
```

### Step 3: Wrap Main Content
Wrap all page content with `pm-main-container`:

```html
<!-- Existing page content inside -->
<div class="container">
    <!-- All your page content here -->
</div>
```

### Step 4: Close the Container
At the end of `<body>` before `</html>`, close the main container, add sidebar script, and close body:

```html
</div>  <!-- Close pm-main-container -->

<script src="./pm-sidebar.js"></script>
</body>
</html>
```

### Step 5: Update User Info Display
In the `checkSession()` function, update user info to use sidebar:

**OLD CODE:**
```javascript
const name = data.purchase_manager_name || 'PM';
document.getElementById('userName').textContent = name;
document.getElementById('userAvatar').textContent = initials;
```

**NEW CODE:**
```javascript
const name = data.purchase_manager_name || 'PM';
const initials = name.split(' ').map(n => n[0]).join('').substring(0, 2).toUpperCase();

// Update sidebar user info
const sidebarUserName = document.getElementById('userNameSidebar');
const sidebarUserAvatar = document.getElementById('userAvatarSidebar');
if (sidebarUserName) sidebarUserName.textContent = name;
if (sidebarUserAvatar) sidebarUserAvatar.textContent = initials;
```

## Pages to Update

All purchase manager pages should be updated. Here's the current list:

### Updated Pages ✅
- [x] dashboard.php
- [x] suppliers.php

### Remaining Pages to Update ⬜
- [ ] ingredients.php
- [ ] low_stock.php
- [ ] new_ingredients.php
- [ ] requisitions.php
- [ ] purchase_orders.php
- [ ] cost_comparison.php
- [ ] reports.php

## Responsive Breakpoints

The sidebar automatically adapts to different screen sizes:

| Breakpoint | Device | Width | Behavior |
|-----------|--------|-------|----------|
| 1441px+ | Large Desktop | 300px | Always visible |
| 1025-1440px | Desktop | 280px | Always visible |
| 769-1024px | Tablet | 320px max | Overlay with hamburger |
| 481-768px | Mobile | 85vw max | Overlay with hamburger |
| ≤480px | Small Mobile | 80vw | Overlay with hamburger |
| ≤320px | Extra Small | 75vw | Basic features |

## Features

### 1. Active Link Highlighting
Links automatically highlight based on the current page using:
```php
<?php echo (basename($_SERVER['PHP_SELF']) == 'page_name.php') ? 'active' : ''; ?>
```

### 2. Badge Notifications
- **New Ingredients**: Shows pending new ingredient requests
- **Low Stock**: Shows items below minimum stock level
- Badges update automatically every 30 seconds
- Updates on page load

### 3. Mobile Responsiveness
- Hamburger menu appears on tablets and mobile
- Sidebar slides in from left
- Semi-transparent overlay behind sidebar
- Auto-closes when link is clicked
- Auto-closes when overlay is clicked

### 4. User Profile Section
- Located at bottom of sidebar
- Shows user avatar with initials
- Displays user name and role
- Logout button included

### 5. Color Scheme
- **Primary**: Blue (#1e3a8a to #2563eb)
- **Accent**: White with transparency for hover states
- **Badge**: Red (#ef4444)
- Perfect for purchase/procurement context

## Customization

### Change Sidebar Colors
Edit `/purchase_manager/pm-sidebar-styles.css`:

```css
aside.pm-sidebar {
    background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);  /* Change these colors */
}
```

### Change Sidebar Width
Modify the `width` property in sidebar styles:

```css
aside.pm-sidebar {
    width: 280px;  /* Change this value */
}

.pm-main-container {
    margin-left: 280px;  /* Must match sidebar width */
}
```

### Add New Navigation Links
In `/purchase_manager/pm-sidebar.php`, add new links in appropriate sections:

```php
<ul class="pm-sidebar-nav">
    <li>
        <a href="new_page.php" class="pm-nav-link <?php echo (basename($_SERVER['PHP_SELF']) == 'new_page.php') ? 'active' : ''; ?>">
            <i class="fas fa-icon-name"></i>
            <span>New Page Name</span>
        </a>
    </li>
</ul>
```

## Icons Used

The sidebar uses FontAwesome icons. Here's the reference:

| Page | Icon | Code |
|------|------|------|
| Dashboard | home | `fa-home` |
| Requisitions | check-circle | `fa-file-circle-check` |
| Purchase Orders | receipt | `fa-receipt` |
| Suppliers | building | `fa-building` |
| Cost Analysis | chart-line | `fa-chart-line` |
| Ingredients | list | `fa-list` |
| Low Stock | triangle-exclamation | `fa-triangle-exclamation` |
| New Ingredients | plus-circle | `fa-plus-circle` |
| Reports | chart-bar | `fa-chart-bar` |
| Logout | sign-out-alt | `fa-sign-out-alt` |

## JavaScript Functions

### Key Functions in pm-sidebar.js

1. **updateBadgeCounts()** - Refreshes all badge counts
2. **updateNewIngredientsBadge()** - Updates new ingredients count
3. **updateLowStockBadge()** - Updates low stock count
4. **handleLogout()** - Handles logout with confirmation

## Browser Support

- Chrome/Edge 90+
- Firefox 88+
- Safari 14+
- Mobile browsers (iOS Safari, Chrome Mobile)

## Testing Checklist

- [ ] Sidebar displays on all pages
- [ ] Active links highlight correctly
- [ ] Hamburger menu works on mobile
- [ ] Overlay closes sidebar on click
- [ ] Badge counts update automatically
- [ ] User info displays correctly
- [ ] Logout functionality works
- [ ] Responsive at all breakpoints
- [ ] No console errors
- [ ] Navigation is smooth

## Quick Reference

### Include on Every Page
```php
<?php include 'pm-sidebar.php'; ?>
<link rel="stylesheet" href="./pm-sidebar-styles.css">
```

### CSS Classes to Know
- `pm-sidebar` - Main sidebar container
- `pm-main-container` - Wraps page content
- `pm-nav-link` - Navigation links
- `pm-badge` - Notification badges
- `active` - Active state for links
