<!-- CSS অংশ: এটি আপনার হেডার বা স্টাইল ফাইলে রাখুন -->
<style>
    /* ড্রপডাউন মেনু কন্টেইনার (Glassmorphism Effect) */
    .dropdown-menu.pullDown {
        background: rgba(255, 255, 255, 0.7) !important; /* ট্রান্সপারেন্ট সাদা */
        backdrop-filter: blur(15px) saturate(180%); /* ব্লার ইফেক্ট */
        -webkit-backdrop-filter: blur(15px) saturate(180%);
        border-radius: 20px !important; /* কোণা গোল করা */
        border: 1px solid rgba(255, 255, 255, 0.3); /* হালকা বর্ডার */
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); /* হালকা শ্যাডো */
        padding: 10px 0;
        min-width: 240px;
        margin-top: 10px;
    }

    /* নাম বা টাইটেল স্টাইল */
    .dropdown-title {
        color: #111 !important;
        font-weight: 700 !important;
        text-transform: uppercase;
        letter-spacing: 1.2px;
        font-size: 15px;
        padding: 15px 20px !important;
        background: transparent !important;
    }

    /* ড্রপডাউন আইটেম বা মেনু লিস্ট */
    .dropdown-item {
        font-size: 18px; /* টেক্সট বড় করা */
        font-weight: 500;
        padding: 12px 20px !important;
        display: flex;
        align-items: center;
        color: #333 !important;
        transition: background 0.3s ease;
    }

    .dropdown-item:hover {
        background-color: rgba(0, 0, 0, 0.05) !important;
    }

    /* আইকন কালার ও গ্যাপ */
    .dropdown-item i {
        font-size: 20px;
        width: 35px; /* আইকন স্পেসিং */
    }

    /* প্রোফাইল আইকন (নীল) */
    .dropdown-item i.fa-user {
        color: #0099ff !important;
    }

    /* অ্যাফিলিয়েট আইকন (সবুজ) */
    .dropdown-item i.fa-link {
        color: #28a745 !important;
    }

    /* লগআউট আইকন (লাল) */
    .dropdown-item.text-danger {
        color: #ff4d4d !important;
    }
    .dropdown-item.text-danger i {
        color: #ff4d4d !important;
    }

    /* ডিভাইডার লাইন */
    .dropdown-divider {
        border-top: 1px solid rgba(0, 0, 0, 0.08);
        margin: 5px 0;
    }
</style>

<!-- HTML অংশ -->
<nav class="navbar navbar-expand-lg main-navbar sticky">
   <div class="form-inline me-auto">
      <ul class="navbar-nav mr-3">
         <li><a href="#" data-bs-toggle="sidebar" class="nav-link nav-link-lg collapse-btn"> <i data-feather="menu"></i></a></li>
      </ul>
   </div>
   <ul class="navbar-nav navbar-right">
      <li><a href="#" class="nav-link nav-link-lg fullscreen-btn">
            <i data-feather="maximize"></i>
         </a></li>
      <li><a href="#" class="nav-link nav-link-lg theme-btn">
            <i data-feather="sun" class="sun" onclick="toggleTheme()"></i>
            <i data-feather="moon" class="moon d-none" onclick="toggleTheme()"></i>
         </a></li>
      <li class="dropdown dropdown-list-toggle"><a href="#" data-bs-toggle="dropdown" class="nav-link nav-link-lg message-toggle"><i data-feather="bell" class="mailAnim"></i>
            <span class="badge headerBadge1">
            </span> </a>
         <div class="dropdown-menu dropdown-list dropdown-menu-right pullDown">
            <div class="dropdown-header">
               Notifications
               <div class="float-right">
                  <a href="#">Mark All As Read</a>
               </div>
            </div>
            <div class="dropdown-list-content dropdown-list-message">
               <a href="#" class="dropdown-item">
                  <span class="dropdown-item-desc">
                     <span class="message-user">No Notification found</span>
                  </span>
               </a>
            </div>
            <div class="dropdown-footer text-center">
               <a href="#">View All <i class="fas fa-chevron-right"></i></a>
            </div>
         </div>
      </li>

      <li class="dropdown">
         <a href="#" data-bs-toggle="dropdown" class="nav-link dropdown-toggle nav-link-lg nav-link-user">
            <img alt="image" src="<?= get_avatar('user') ?>" class="user-img-radious-style"> 
            <span class="d-sm-none d-lg-inline-block"></span>
         </a>
         <div class="dropdown-menu dropdown-menu-right pullDown">
            <div class="dropdown-title">HI, <?= current_user('first_name'); ?> <?= current_user('last_name'); ?></div>
            
            <a href="<?= user_url('profile') ?>" class="dropdown-item has-icon">
               <i class="far fa-user"></i> Profile
            </a>
            
            <a href="<?= user_url('affiliates') ?>" class="dropdown-item has-icon">
               <i class="fas fa-link"></i> Affiliates
            </a>
            
            <div class="dropdown-divider"></div>
            
            <a href="<?= user_url("logout") ?>" class="dropdown-item has-icon text-danger"> 
               <i class="fas fa-power-off"></i> Logout
            </a>
         </div>
      </li>
   </ul>
</nav>