<?php include "link.php";?>
<style>
    *
    {
        margin:0;
        padding:0;
        box-sizing:border-box;
        list-style-type: none;
        text-decoration: none;
        font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    }
    body{
        background-image: url("");
        background-repeat: no-repeat;
        background-size:100% 100%;
        background-attachment: fixed;
     /* background-color: #0e013e; */
    }
    .sidebar
    {
        width: 60px;
        position:fixed;
        left:0;
        top:0;
        margin-top:5%;
        height:90%;
        transition:0.3s;
        padding-top:1px;   
       
    }
    .sidebar li span:last-child
    {
        display:none;
    }
    .sidebar-brand
    {
        height:90px;
        color:#fff;
        
    }
    .sidebar-brand span
    {
        display: inline-block;
        /* padding-right:rem; */
    }

    .sidebar-menu li
    {
         width: 100%;
         margin-bottom:2rem;
         padding-left:1rem;
    }
    .sidebar-menu ul li a
    {
        display:block;
        color:#fff;
        font-size:12px;
    }

    .sidebar-menu a:hover
    {
        background:#fff;
        padding-top:0.5rem;
        padding-bottom:1rem;
        padding-left:1rem;
        color:#000;
        border-radius:25px 0px 0px 25px;
        height:40px;
    }

    .sidebar-menu a span:first-child
    { 
        font-size:25px;
        padding-right:1rem;
    }

    #nav-toggle:checked +.sidebar
    {
        width:245px;
        transition: 0.5s;
        padding-top:0rem;
    }

    #nav-toggle:checked +.sidebar .sidebar-brand,
    #nav-toggle:checked +.sidebar li
    {
        padding-left:1rem;
    }

    #nav-toggle:checked +.sidebar li a
    {
        padding-left:0.1rem;
        font-size:15px;
        
    }

    #nav-toggle:checked +.sidebar li a span
    {
        padding-left:-1rem;
        /* margin:-1px; */
        font-size:25px;
    }

    #nav-toggle:checked +.sidebar-brand h1 span:last-child,
    #nav-toggle:checked +.sidebar li span:last-child
    {
        /* display:none; */
        display: block;
        font-size:20px;
        margin:-30px 0px 0px 50px;
    }
   

img{
    background-color:white;
    border-radius:0px 25px 0px 25px;
    box-shadow:1px 1px 10px 1px #540903;
    padding:3px;
    height:59px;
    width:180px;
    border: 2px solid #871309;

}

.container-dd{
    padding-left: 950px;
    
}
input.forms
{
    border:2px solid black;
    width:30%;
    border-radius: 15px;
    font-weight:700;
    text-align: center;
}

@media only screen and (max-width: 600px) {
    .nav{
width: 100%;
    }
    
}


</style>
<body>
<!-- <img src="/Imperative Final Logo.png" alt=""> -->
<nav class="navbar navbar-expand-lg navbar-light fixed-top" style="margin-bottom:10%">
    <a class="navbar-brand" href="#"><img src="images/Final_Logo.png"></a>
    <ul class="nav nav-item ml-auto">
        <li class="">
            <h6>HOME</h6>
        </li>
    </ul>
    <ul class="nav nav-item ml-auto">
        <li class="nav" style="color:#871309;font-weight:bolder">
             <?php echo $_SESSION['fullname']; ?> 
            <?php  echo $_SESSION['name']; ?> 
        </li>
    </ul>
</nav>
<script>
    $(function () {
  $('[data-toggle="tooltip"]').tooltip()
})
</script>
<input type="checkbox" id="nav-toggle" style="visibility : hidden">
    
    <div class="sidebar">
        <div class="sidebar-brand"> 
   
            <h2>
                <label class="d-flex flex-row-reverse" for="nav-toggle"><span class="fa fa-bars" style="color:#8f1b1b;padding:5px ;margin-top: 10px;"></span></label>
            </h2>  
        </div>
            <br>
        <div class="sidebar-menu">
            <ul>
                <li>
                    <a href="home.php" style="color:black;font-weight:bolder;"><span class="fas fa-home" data-toggle="tooltip" data-placement="right" title="Home"></span><span>Home</span></a>      
                </li>
               
                <li>
                    <a href="logout.php" style="color:red;"  ><span class="fas fa-sign-out-alt" data-toggle="tooltip" data-placement="right" title="Logout"></span><span><b>Logout</b></span></a>
                </li> 
            
            </ul>
        </div>
    </div>
</body>
</html>