sessions-side-bar.php

<style>
a,
a:hover,
a:focus {
    text-decoration: none !important;
}

.main-sidebar {
    background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%) !important;
}

.brand-link {
    background: linear-gradient(135deg, #0ea5e9, #6366f1) !important;
    color: #ffffff !important;
    border-bottom: none !important;
}

.brand-link .brand-text {
    color: #ffffff !important;
    font-weight: 500;
    letter-spacing: 0.3px;
}

.brand-image {
    box-shadow: 0 0 14px rgba(99, 102, 241, 0.45);
    opacity: 0.92 !important;
}

.user-panel {
    border-bottom: 1px solid rgba(255,255,255,0.08);
    margin-bottom: 12px !important;
}

.user-panel .info a {
    color: #cbd5f5 !important;
    font-size: 14px;
    font-weight: 500;
}

.form-control-sidebar {
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    color: #ffffff !important;
    border-radius: 10px 0 0 10px !important;
    box-shadow: none !important;
}

.form-control-sidebar::placeholder {
    color: #94a3b8 !important;
}

.btn-sidebar {
    background: rgba(255,255,255,0.08) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-left: none !important;
    color: #cbd5f5 !important;
    border-radius: 0 10px 10px 0 !important;
}

.nav-sidebar > .nav-item {
    margin-bottom: 2px;
}

.nav-sidebar .nav-link {
    color: #cbd5f5 !important;
    border-radius: 12px;
    margin: 5px 10px;
    padding: 11px 14px;
    transition: all 0.22s ease;
}

.nav-sidebar .nav-link p {
    font-weight: 500;
    font-size: 14px;
    margin: 0;
}

.nav-sidebar .nav-icon {
    color: #cbd5f5 !important;
    font-size: 15px;
    transition: all 0.22s ease;
}

.nav-sidebar .nav-link:hover {
    background: linear-gradient(135deg, #0ea5e9, #6366f1) !important;
    color: #ffffff !important;
    transform: translateX(4px);
    box-shadow: 0 10px 22px rgba(14, 165, 233, 0.18);
}

.nav-sidebar .nav-link:hover .nav-icon,
.nav-sidebar .nav-link:hover p {
    color: #ffffff !important;
}

.nav-sidebar .nav-link.active {
    background: linear-gradient(135deg, #6366f1, #0ea5e9) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 24px rgba(99, 102, 241, 0.28);
}

.nav-sidebar .nav-link.active .nav-icon,
.nav-sidebar .nav-link.active p {
    color: #ffffff !important;
}

.badge.bg-info {
    background: linear-gradient(135deg, #22d3ee, #6366f1) !important;
    color: #ffffff !important;
    font-size: 10px;
    font-weight: 700;
    padding: 4px 8px;
    margin-left: 8px;
    border-radius: 999px;
    vertical-align: middle;
}

.sidebar .input-group {
    padding: 0 10px;
}

@media (max-width: 991.98px) {
    .nav-sidebar .nav-link {
        margin: 4px 8px;
    }
}
</style>

<!-- Main Sidebar Container -->
<aside class="main-sidebar sidebar-dark-primary elevation-4">
  <!-- Brand Logo -->
  <a href="#" class="brand-link">
    <img src="../../dist/img/medusa_logo.png"
         alt="Medusa Log" class="brand-image img-circle elevation-3">
    <span class="brand-text font-weight-light">Medusa</span>
  </a>

  <!-- Sidebar -->
  <div class="sidebar">
    <!-- Sidebar user panel -->
    <div class="user-panel mt-3 pb-3 mb-3 d-flex">
      <div class="image"></div>
      <div class="info">
        <a href="#" class="d-block">
          <i class="fas fa-user-circle mr-2"></i>
          Active user: <?php echo $_SESSION['username'];?>
        </a>
      </div>
    </div>

    <!-- SidebarSearch Form -->
    <div class="form-inline">
      <div class="input-group" data-widget="sidebar-search">
        <input class="form-control form-control-sidebar" type="search" placeholder="Search">
        <div class="input-group-append">
          <button class="btn btn-sidebar">
            <i class="fas fa-search fa-fw"></i>
          </button>
        </div>
      </div>
    </div>

    <!-- Sidebar Menu -->
    <nav class="mt-2">
      <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu">

        <li class="nav-item">
          <a href="dashboard.php" class="nav-link dashboard-item">
            <i class="nav-icon fas fa-chart-line"></i>
            <p>Dashboard</p>
          </a>
        </li>

        <li class="nav-item">
          <a href="caller.php" class="nav-link caller-item">
            <i class="nav-icon fas fa-phone-volume"></i>
            <p>Call App</p>
          </a>
        </li>




        <li class="nav-item">
          <a href="audio-manager.php" class="nav-link audio-item">
            <i class="nav-icon fas fa-music"></i>
            <p>
              Audio
            </p>
          </a>
        </li>

        <li class="nav-item">
          <a href="#" class="nav-link email-item">
            <i class="nav-icon fas fa-envelope-open-text"></i>
            <p>
              Email
              <span class="badge bg-info rounded-pill">upgrade</span>
            </p>
          </a>
        </li>

        <li class="nav-item">
          <a href="#" class="nav-link sms-item">
            <i class="nav-icon fas fa-comment-dots"></i>
            <p>
              SMS
              <span class="badge bg-info rounded-pill">upgrade</span>
            </p>
          </a>
        </li>



        <li class="nav-item">
          <a href="../../blocklist.php" class="nav-link blocklist-item">
            <i class="nav-icon fas fa-user-slash"></i>
            <p>DNC</p>
          </a>
        </li>



        <li class="nav-item">
          <a href="../../settings.php" class="nav-link settings-item">
            <i class="nav-icon fas fa-sliders-h"></i>
            <p>Settings</p>
          </a>
        </li>

        <li class="nav-item">
          <a href="user-manual.php#how" class="nav-link manual-item">
            <i class="nav-icon fas fa-book-open"></i>
            <p>User Manual</p>
          </a>
        </li>

      </ul>
    </nav>
  </div>
</aside>