php_billing/119/_navbar.php

<?php
	$link = new mysqli(MYSQL_HOST, MYSQL_USER, MYSQL_PASS, MYSQL_DB);
	$email = $link->real_escape_string($_SESSION['email']);
	$query = "SELECT * FROM `" . SHOP_ID . "_user` WHERE `email` = '$email'";
	$result = $link->query($query);
	if ($result) {while ($row = $result->fetch_assoc()) {$user_email = $row['email'];}} else {echo "Error: " . $link->error;}
	$link->close();
?>

<section class="container-fluid navbar">
    <!-- Desktop Menu -->
<div class="container mx-auto flex justify-center">
    <div class="hidden md:block  py-4">
        <div class="navbar">
            <a href="bill">Bill</a>
            <a href="view-bills?payment=paid">Bill History</a>
            <?php
            // if(isset($_SESSION['email']) && $_SESSION['email']=='mousumi@email.siliconpin.com'){
            //     echo '<a href="view-bills-cost?payment=paid">Bill Costing</a>';
            // }
            ?>
            <a href="return">Return</a>
            <!-- <a href="#news">Product</a> -->
            <div class="dropdownDesktop">
                <button class="dropbtnDesktop">Category 
                <!-- <i class="fa fa-caret-downDesktop"></i> -->
                </button>
                <div class="dropdown-contentDesktop">
                    <a href="create-category">Creat Category</a>
                    <a href="view-category">View Category</a>
                </div>
            </div>
				<?php
					if(isset($_SESSION['email']) && $_SESSION['email']=='mousumi@fashionavenueonline.com'){
                    	echo '<a href="create-barcode">Barcode</a>';
                    }
				?>
            <div class="dropdownDesktop">
                <button class="dropbtnDesktop">Stock 
                <!-- <i class="fa fa-caret-downDesktop"></i> -->
                </button>
                <div class="dropdown-contentDesktop">
                    <a href="view-product">All Product</a>
                    <a href="view-category">All Category</a>
                </div>
            </div>
			<a href="change-password">Change Password</a>
			
            <a href="signout">SignOut</a>
			<a style="float: right;" href="change-password"><?php echo $user_email; ?></a>
            <!-- <a href="#home">Stock</a> -->
        </div>
    </div>
</div>

<!-- Mobile Menu -->
<!-- <div class="mobileTopMenu block md:hidden">
    <div class="topnavMobile">
        <a href="#home" class="active">Logo</a>
        <div id="mobileMenu" class="hidden">
            <a href="#news">Educators</a>
            <a href="#contact">Administrators</a>
        <div class="dropdown">
            <button class="dropbtn">Dropdown &#11183</button>
            <div class="dropdown-content">
                <a href="#">Link 1</a>
                <a href="#">Link 2Link 2Link 2</a>
                <a href="#">Link 3</a>
            </div>
            </div> 
            <a href="#about">About</a>
            <a href="#about">About</a>
            <a href="#about">About</a>
            <a href="#about">About</a>

        </div>
        <a  class="icon" onclick="openMobileMenu()">
        &#9776;
        </a>
    </div>
</div> -->
</section>



<script is:inline>
function openMobileMenu() {
var element = document.getElementById("mobileMenu");
element.classList.toggle("hidden");
}

</script>
<style>
.navbar {
overflow: hidden;
background-color: rgb(150, 39, 39);
/* position: absolute;
width: 100%;
left: 0;
top: 0; */
}

.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

.dropdownDesktop {
float: left;
overflow: hidden;

}

.dropdownDesktop .dropbtnDesktop {
font-size: 16px;  
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}

.navbar a:hover, .dropdownDesktop:hover .dropbtnDesktop {
background-color: red;
}

.dropdown-contentDesktop {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

.dropdown-contentDesktop a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}

.dropdown-contentDesktop a:hover {
background-color: #ddd;
}

.dropdownDesktop:hover .dropdown-contentDesktop {
display: block;
}




/* .mobileTopMenu{
position: absolute;
top:0;
left:0;
width:100%;
} */
.dropdown:hover .dropdown-content {
display: block;
background-color: #ddd;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown-content {
display: none;
position: absolute;
z-index: 1;
}

.dropdown-content a {
float: none;
text-decoration: none;
display: block;
text-align: left;
}





.topnavMobile {
overflow: hidden;
background-color: #333;
position: relative;
}


.topnavMobile a, .topnavMobile >div > div {
color: white;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
display: block;
}

.topnavMobile a.icon {
background: black;
display: block;
position: absolute;
right: 0;
top: 0;
}

.topnavMobile a:hover {
background-color: #ddd;
color: black;
}

.active {
background-color: #aa6204;
color: white;
}


</style>