<div class="side-menu animate-dropdown outer-bottom-xs">
    <div class="head d-flex align-items-center bg-light border-bottom px-3 py-2">
        <i class="fa fa-align-justify fa-fw mr-2"></i> Categories
    </div>        
    <nav class="nav flex-column">
        <ul class="nav flex-column mb-0">
            <?php 
            $sql = mysqli_query($con, "SELECT id, categoryName FROM category");
            while ($row = mysqli_fetch_array($sql)) { ?>
                <li class="nav-item">
                    <a href="category.php?cid=<?php echo $row['id']; ?>" class="nav-link d-flex align-items-center">
                        <i class="fa fa-desktop fa-fw mr-2"></i>
                        <?php echo $row['categoryName']; ?>
                    </a>
                </li>
            <?php } ?>
        </ul>
    </nav>
</div>

<style>
.side-menu {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    max-width: 250px;
    font-family: 'Roboto', sans-serif;
}

.side-menu .head {
    font-weight: 600;
    font-size: 1.1rem;
    color: #333;
    user-select: none;
    background: #000;
}

.side-menu .nav-link {
    color: #555;
    padding: 10px 15px;
    font-size: 0.95rem;
    border-bottom: 1px solid #eee;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.side-menu .nav-link:hover, 
.side-menu .nav-link:focus {
    background-color: #007bff;
    color: #fff;
    text-decoration: none;
}

.side-menu .nav-link i {
    font-size: 1.1rem;
}

@media (max-width: 576px) {
    .side-menu {
        max-width: 100%;
        border-radius: 0;
    }
}
</style>
