<nav class="navbar navbar-light bg-faded rounded navbar-toggleable-md">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#containerNavbar" aria-controls="containerNavbar" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand grow" href="#">

        <img width="65" height="80" src="img/logo.png">
    </a>
    <div class="collapse navbar-collapse" id="containerNavbar">
        <ul class="navbar-nav mr-auto">

            <li class="nav-item active">
                <a class="nav-link" href="user_login"><span class="fa fa-home grow">&nbsp;</span>Home</a>
            </li>


                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <span class="fa fa-wrench"> HR Control Panel</span>
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">

                        <a class="nav-link" href="filtration"><span class="fa fa-bar-chart-o grow">&nbsp;</span>Filtration</a>

                        <a class="nav-link" href="edit-filtration"><span class="fa fa-eye grow">&nbsp;</span>View Filtration</a>

                        <a class="nav-link" href="overview"><span class="fa fa-calendar grow">&nbsp;</span>Gap overview</a>

                    </div>
                </li>


            <li class="nav-item" data-toggle="collapse" data-target="#GapMenu">
                <a class="nav-link"><span id="GapMenuCollapse" data-toggle="collapse" data-target="#GapMenu" class="fa fa-caret-square-o-down grow">&nbsp;</span>Gaps</a>

                <div id="GapMenu" class="collapse">
                    <a class="nav-link" data-toggle="modal" href="#ModalGaps"><span class="fa fa-calendar grow">&nbsp;</span>Add your gaps</a>
                    <a class="nav-link" data-toggle="modal" href="#ModalSchedule"><span class="fa fa-calendar-o grow">&nbsp;</span>View your gaps</a>
                </div>

            </li>

            <li class="nav-item">
                <a class="nav-link" href="attendance"><span class="fa fa-check-square-o grow">&nbsp;</span>Attendance</a>
            </li>

            <li class="nav-item">
                <a class="nav-link" href="profile"><span class="fa fa-tachometer grow">&nbsp;</span>Attendance Monitor</a>
            </li>

        </ul>
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" data-toggle="collapse" data-target="#user-menu"><span class="fa fa-user-circle-o grow">&nbsp;</span>Logged in as <?php echo $info['name']; ?> <span class="fa fa-caret-down">&nbsp;</span></a>
                <div id="user-menu" class="collapse">
                    <ul>
                        <a class="nav-link" data-toggle="modal" href="#ModalUserSettings"><span class="fa fa-cog">&nbsp;</span>User profile</a>

                        <a class="nav-link" href="index.php?uref=logout"><span class="fa fa-sign-out">&nbsp;</span>Log out</a>

                    </ul>
                </div>
            </li>
        </ul>
    </div>
</nav>