<?php
$current_page = basename($_SERVER['PHP_SELF']);
?>
<style>
    .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        width: 260px;
        height: 100vh;
        background: linear-gradient(135deg, #169D53 0%, #0d7a3f 100%);
        box-shadow: 2px 0 10px rgba(0,0,0,0.1);
        overflow-y: auto;
        z-index: 1001;
        transition: all 0.3s ease;
    }
    
    /* Sidebar Overlay/Backdrop */
    .sidebar-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1000;
        display: none;
        opacity: 0;
        transition: opacity 0.3s ease;
    }
    
    .sidebar-overlay.active {
        display: block;
        opacity: 1;
    }
    
    .sidebar-header {
        padding: 25px 20px;
        text-align: center;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }
    
    .sidebar-logo {
        color: white;
        font-size: 24px;
        font-weight: 700;
        text-decoration: none;
        display: block;
        margin-bottom: 5px;
    }
    
    .sidebar-subtitle {
        color: rgba(255,255,255,0.8);
        font-size: 12px;
        font-weight: 500;
    }
    
    .sidebar-menu {
        padding: 20px 0;
    }
    
    .menu-item {
        display: block;
        padding: 15px 25px;
        color: rgba(255,255,255,0.9);
        text-decoration: none;
        transition: all 0.3s ease;
        font-weight: 500;
        border-left: 3px solid transparent;
    }
    
    .menu-item:hover {
        background: rgba(255,255,255,0.1);
        color: white;
        border-left-color: white;
    }
    
    .menu-item.active {
        background: rgba(255,255,255,0.15);
        color: white;
        border-left-color: white;
    }
    
    .menu-item i {
        margin-right: 12px;
        width: 20px;
        text-align: center;
    }
    
    .sidebar-footer {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 20px;
        border-top: 1px solid rgba(255,255,255,0.1);
    }
    
    .user-info {
        color: rgba(255,255,255,0.9);
        font-size: 13px;
        text-align: center;
    }
    
    .logout-btn {
        display: block;
        width: 100%;
        padding: 10px;
        background: rgba(255,255,255,0.1);
        color: white;
        text-align: center;
        border-radius: 5px;
        text-decoration: none;
        margin-top: 10px;
        transition: all 0.3s ease;
    }
    
    .logout-btn:hover {
        background: rgba(255,255,255,0.2);
        color: white;
    }
    
    /* Mobile Toggle */
    .sidebar-toggle {
        display: none;
        position: fixed;
        top: 15px;
        left: 15px;
        z-index: 1001;
        background: #169D53;
        color: white;
        border: none;
        padding: 10px 15px;
        border-radius: 5px;
        cursor: pointer;
    }
    
    @media (max-width: 768px) {
        .sidebar {
            left: -260px;
            box-shadow: 2px 0 20px rgba(0,0,0,0.3);
        }
        
        .sidebar.active {
            left: 0;
        }
        
        .sidebar-toggle {
            display: block;
        }
        
        /* Ensure overlay covers everything except sidebar */
        .sidebar-overlay {
            backdrop-filter: blur(2px);
        }
        
        /* Prevent background scrolling when sidebar is open */
        body.sidebar-open {
            overflow: hidden;
        }
    }
    
    /* Tablet specific adjustments */
    @media (min-width: 769px) and (max-width: 991px) {
        .sidebar {
            left: -260px;
        }
        
        .sidebar.active {
            left: 0;
        }
        
        .sidebar-toggle {
            display: block;
        }
    }
</style>

<!-- Sidebar Overlay (Dark Background) -->
<div class="sidebar-overlay" id="sidebarOverlay" onclick="closeSidebar()"></div>

<!-- Sidebar Toggle Button -->
<button class="sidebar-toggle" onclick="toggleSidebar()">
    <i class="fas fa-bars"></i>
</button>

<!-- Sidebar -->
<div class="sidebar" id="sidebar">
    <div class="sidebar-header">
        <a href="dashboard.php" class="sidebar-logo">
            <i class="fas fa-glasses"></i> OptiSlip
        </a>
        <div class="sidebar-subtitle">Admin Panel</div>
    </div>
    
    <div class="sidebar-menu">
        <a href="dashboard.php" class="menu-item <?php echo $current_page == 'dashboard.php' ? 'active' : ''; ?>">
            <i class="fas fa-tachometer-alt"></i> Dashboard
        </a>
        
        <a href="users.php" class="menu-item <?php echo $current_page == 'users.php' ? 'active' : ''; ?>">
            <i class="fas fa-users"></i> Users Management
        </a>
        
        <a href="orders.php" class="menu-item <?php echo $current_page == 'orders.php' ? 'active' : ''; ?>">
            <i class="fas fa-shopping-cart"></i> Orders
        </a>
        
        <a href="settings.php" class="menu-item <?php echo $current_page == 'settings.php' ? 'active' : ''; ?>">
            <i class="fas fa-cog"></i> Settings
        </a>
    </div>
    
    <div class="sidebar-footer">
        <div class="user-info">
            <i class="fas fa-user-shield"></i><br>
            <strong><?php echo htmlspecialchars($_SESSION['user_name'] ?? 'Admin'); ?></strong>
        </div>
        <a href="../logout.php" class="logout-btn">
            <i class="fas fa-sign-out-alt"></i> Logout
        </a>
    </div>
</div>

<script>
function toggleSidebar() {
    const sidebar = document.getElementById('sidebar');
    const overlay = document.getElementById('sidebarOverlay');
    
    sidebar.classList.toggle('active');
    overlay.classList.toggle('active');
    
    // Prevent body scroll when sidebar is open on mobile
    if (window.innerWidth <= 768) {
        document.body.style.overflow = sidebar.classList.contains('active') ? 'hidden' : '';
    }
}

function closeSidebar() {
    const sidebar = document.getElementById('sidebar');
    const overlay = document.getElementById('sidebarOverlay');
    
    sidebar.classList.remove('active');
    overlay.classList.remove('active');
    document.body.style.overflow = '';
}

// Close sidebar when clicking outside on mobile
document.addEventListener('click', function(event) {
    const sidebar = document.getElementById('sidebar');
    const toggle = document.querySelector('.sidebar-toggle');
    const overlay = document.getElementById('sidebarOverlay');
    
    if (window.innerWidth <= 768) {
        if (!sidebar.contains(event.target) && !toggle.contains(event.target) && event.target !== overlay) {
            closeSidebar();
        }
    }
});

// Close sidebar on window resize if screen becomes larger
window.addEventListener('resize', function() {
    if (window.innerWidth > 768) {
        document.body.style.overflow = '';
        document.getElementById('sidebarOverlay').classList.remove('active');
    }
});
</script>

• [F] header.php
  Delete
• [F] sidebar.php
  Delete