<!DOCTYPE html>
<html dir="ltr" lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- Tell the browser to be responsive to screen width -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <!-- Favicon icon -->
    <link rel="icon" type="image/png" sizes="16x16" href="asset/images/mk logo1.png">
    <title>MK Trading - Admin Dashboard</title>
    <!-- Custom CSS -->
    <link href="asset/libs/flot/css/float-chart.css" rel="stylesheet">
    <!-- Custom CSS -->
    <link href="dist/css/style.min.css" rel="stylesheet">
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>

<body>
    <!-- ============================================================== -->
    <!-- Preloader - style you can find in spinners.css -->
    <!-- ============================================================== -->

    <!-- ============================================================== -->
    <!-- Main wrapper - style you can find in pages.scss -->
    <!-- ============================================================== -->
    <style>
    /* --- Fixed Sidebar Layout --- */
    .left-sidebar {
        position: fixed !important;
        top: 0;
        left: 0;
        height: 100vh !important;
        overflow-y: auto;
        z-index: 1000;
    }

    /* Main content area adjustment */
    .page-wrapper {
        margin-left: 250px;
        /* Adjust based on your sidebar width */
        transition: all 0.3s ease;
    }

    /* Keep the topbar visible */
    .topbar {
        position: fixed;
        top: 0;
        left: 250px;
        right: 0;
        z-index: 1050;
    }

    /* Prevent content from hiding behind the topbar */
    .container-fluid {
        margin-top: 80px;
        /* Adjust based on topbar height */
    }
    </style>

    <div id="main-wrapper">
        <!-- ============================================================== -->
        <!-- Topbar header - style you can find in pages.scss -->
        <!-- ============================================================== -->
        <header class="topbar" data-navbarbg="skin5">
            <nav class="navbar top-navbar navbar-expand-md navbar-dark"
                style="position: relative; display: flex; align-items: center; justify-content: center; height: 70px;">

                <!-- Mobile toggle (hamburger) -->
                <div class="position-absolute d-flex align-items-center" style="left: 15px;">
                    <a class="nav-toggler d-block d-md-none waves-effect waves-light" href="javascript:void(0)">
                        <i class="ti-menu ti-close"></i>
                    </a>
                </div>

                <!-- Center Logo -->
                <a class="navbar-brand mx-auto" href="index.php"
                    style="display: flex; align-items: center; justify-content: center;">
                    <img src="asset/images/mk logo1.png" alt="Iatrike Biogenics"
                        style="height: 55px; object-fit: contain;">
                </a>

                <!-- Logout Button (Right corner) -->
                <ul class="navbar-nav position-absolute"
                    style="right: 15px; top: 50%; transform: translateY(-50%); margin: 0;">
                    <li class="nav-item">
                        <a class="btn btn-danger text-white waves-effect waves-light" href="logout.php">
                            <i class="fa fa-sign-out-alt"></i> Logout
                        </a>
                    </li>
                </ul>
            </nav>
        </header>