<?php
$current_page = basename($_SERVER['PHP_SELF']);
?>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">

<div class="sidebar">

    <div class="sidebar-header">
        <i class="bi bi-shield-lock-fill"></i>
        <span>Admin Panel</span>
    </div>

    <ul class="nav flex-column mt-4">

        <li class="nav-item">
            <a href="dashboard.php"
                class="nav-link <?php echo ($current_page == 'dashboard.php') ? 'active' : ''; ?>">
                <i class="bi bi-speedometer2"></i>
                Dashboard
            </a>
        </li>

        <li class="nav-item">
            <a href="manage_admin.php"
                class="nav-link <?php echo ($current_page == 'manage_admin.php') ? 'active' : ''; ?>">
                <i class="bi bi-people-fill"></i>
                Manage Admin
            </a>
        </li>

        <li class="nav-item">
            <a href="manage_article.php"
                class="nav-link <?php echo (
                                    $current_page == 'manage_article.php' ||
                                    $current_page == 'add_article.php' ||
                                    $current_page == 'edit_article.php'
                                ) ? 'active' : ''; ?>">

                <i class="bi bi-file-earmark-text"></i>

                Articles

            </a>
        </li>

        <li class="nav-item">
            <a href="logout.php" class="nav-link logout-link">
                <i class="bi bi-box-arrow-right"></i>
                Logout
            </a>
        </li>

    </ul>

</div>

<style>
    .sidebar {
        width: 100%;
        height: 100vh;

        background: linear-gradient(180deg, #1e293b, #0f172a);
        color: #fff;

        overflow-y: auto;
        overflow-x: hidden;

        box-shadow: 4px 0 20px rgba(0, 0, 0, .2);
    }

    .sidebar ul {
        flex: 1;
        overflow-y: auto;

        padding: 15px;
        margin: 0;

        scrollbar-width: thin;
        scrollbar-color: #38bdf8 transparent;
    }

    /* Header */

    .sidebar-header {
        text-align: center;
        padding: 20px 15px;
        border-bottom: 1px solid rgba(255, 255, 255, .1);
    }

    .sidebar-header i {
        font-size: 40px;
        color: #38bdf8;
        display: block;
    }

    .sidebar-header span {
        font-size: 22px;
        font-weight: 700;
    }

    /* Menu Container */

    .sidebar ul {
        padding: 15px;
        margin: 0;
    }

    /* Chrome Scrollbar */

    .sidebar::-webkit-scrollbar {
        width: 6px;
    }

    .sidebar::-webkit-scrollbar-thumb {
        background: #38bdf8;
        border-radius: 20px;
    }

    /* Menu Links */

    .sidebar .nav-link {
        color: #cbd5e1;
        padding: 12px 15px;
        margin: 6px 0;
        border-radius: 10px;
        transition: .3s;
        font-size: 15px;
        font-weight: 500;
    }

    .sidebar .nav-link i {
        margin-right: 10px;
        font-size: 18px;
    }

    .sidebar .nav-link:hover {
        background: #38bdf8;
        color: #fff;
        transform: translateX(6px);
    }

    .sidebar .nav-link.active {
        background: #0ea5e9;
        color: #fff;
        font-weight: 600;
        box-shadow: 0 4px 15px rgba(14, 165, 233, .4);
    }

    .logout-link:hover {
        background: #dc3545 !important;
        color: #fff !important;
    }
</style>