php

Current File : /home/viralhoga/public_html/includes/navbar.php
<?php
include('includes/main-action.php');
$obj = new admin_main();
$sel_menu_details = $obj->select_all('menu','order by menu_id');
?>
<header class="header-area">
  <div class="header-main-area">
    <div class="container-fluid">
      <div class="row">
        <div class="col">
          <div class="header-main">

            <!-- LOGO -->
            <div class="header-element logo">
              <a href="index.php" class="theme-header-logo">
                <img src="img/logo.png" class="img-fluid" alt="logo">
              </a>
            </div>

            <!-- MAIN MENU -->
            <div class="header-element megamenu-content">
              <a href="#main-collapse" class="browse-cat" data-bs-toggle="collapse">
                <span class="menu-icon"><i class="feather-menu"></i></span>
                <span class="menu-title">Menu</span>
                <span class="menu-arrow"><i class="feather-chevron-down"></i></span>
              </a>

              <div class="mainwrap collapse show" id="main-collapse">
                <ul class="main-menu">
                  <li class="menu-link"><a href="exclusive.php" class="link-title"><span class="sp-link-title">Exclusive</span></a></li>
                  <li class="menu-link"><a href="non-exclusive.php" class="link-title"><span class="sp-link-title">Non-Exclusive</span></a></li>
                  <li class="menu-link"><a href="download-thumbnail.php" class="link-title"><span class="sp-link-title">Thumbnail</span></a></li>
                  <li class="menu-link"><a href="download-wishes.php" class="link-title"><span class="sp-link-title">Wishes</span></a></li>
                  <li class="menu-link"><a href="service.php" class="link-title"><span class="sp-link-title">Services</span></a></li>
                  <li class="menu-link"><a href="#!" class="link-title" data-bs-toggle="modal" data-bs-target="#howto_reach"><span class="sp-link-title">How to reach?</span></a></li>
                  <li class="menu-link"><a href="support.php" class="link-title"><span class="sp-link-title">Support</span></a></li>
                </ul>
              </div>
            </div>

            <!-- RIGHT SIDE -->
            <div class="header-element right-block-box">
              <ul class="shop-element">

                <?php if(isset($_SESSION['reg_id']) && !empty($_SESSION['reg_id'])){?>
                  <li><a href="booking.php"><?php echo $_SESSION['reg_id']?></a></li>
                <?php }else{?>
                  <li><a href="login.php">Login/Signup</a></li>
                <?php }?>

                <!-- USER ICON -->
                <li class="ms-3 user-dropdown">
                  <a href="#user-collapse" data-bs-toggle="collapse" class="user-icon">
                    <i class="feather-user"></i>
                  </a>

                  <!-- DROPDOWN -->
                  <div class="mainwrap collapse user-menu" id="user-collapse">
                    <?php if(isset($_SESSION['reg_id']) && !empty($_SESSION['reg_id'])){?>
                    <ul class="main-menu">
                      <li><a href="user-profile.php">Profile</a></li>
                      <li><a href="booking.php">Booking</a></li>
                      <li><a href="referral-income.php">My Referral</a></li>
                      <li><a href="logout.php">Logout</a></li>
                    </ul>
                    <?php }?>
                  </div>
                </li>

                <li class="side-wrap toggle-wrap">
                  <button class="toggler-button"><span class="line"></span></button>
                </li>

              </ul>
            </div>

          </div>
        </div>
      </div>
    </div>
  </div>
</header>

<style>
/* SLIDER FIX */
.swiper-slide{
   width:215px!important;  
}

/* MOBILE FIX - PROPER DROPDOWN */
@media (max-width: 768px) {

  .user-dropdown {
    position: relative;
  }

  .user-menu {
    position: absolute !important;
    top: 100%;
    right: 0;
    left: auto;
    width: 180px;
    background: #fff;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    z-index: 999;
  }

.user-menu {
  margin-top: 8px;
}
ul.main-menu {
    padding: 14px;
    /* border-radius: 10px; */
}
.main-menu li{
    margin-bottom: 10px;
}
}

/* DESKTOP HOVER DROPDOWN */
@media (min-width: 769px) {

  .user-dropdown {
    position: relative;
  }

  .user-menu {
    position: absolute;
    top: 100%;
    right: 0;
    background: #fff;
    min-width: 180px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    display: none;
    z-index: 999;
    padding: 10px 0;
  }

  .user-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .user-menu ul li {
    padding: 8px 15px;
  }

  .user-menu ul li a {
    color: #000;
    text-decoration: none;
    display: block;
  }

  .user-menu ul li:hover {
    background: #f5f5f5;
  }

  .user-dropdown:hover .user-menu {
    display: block !important;
  }
/* .user-menu {*/
/*  top: calc(100% + 5px);*/
/*}*/

}
</style> 

<script>
document.addEventListener("click", function (e) {
  const dropdown = document.querySelector(".user-dropdown");
  const menu = document.querySelector("#user-collapse");

  if (!dropdown.contains(e.target)) {
    const bsCollapse = bootstrap.Collapse.getInstance(menu);
    if (bsCollapse) {
      bsCollapse.hide();
    }
  }
});
</script>