<?php
/**
 * Created by PhpStorm.
 * User: andirangu
 * Date: 2/10/2019
 * Time: 11:05 AM
 */
?>

<nav class="navbar navbar-expand-lg navbar-light bg-white">
    <a class="navbar-brand d-block d-sm-block d-md-block d-lg-none" href="#">
        <img src="assets/img/logo-dark.png" width="145" height="32.3" alt="QuillPro">
    </a>
    <button class="hamburger hamburger--slider" type="button" data-target=".sidebar" aria-controls="sidebar"
            aria-expanded="false" aria-label="Toggle Sidebar">
						<span class="hamburger-box">
							<span class="hamburger-inner"></span>
						</span>
    </button>
    <!-- Added Mobile-Only Menu -->
    <ul class="navbar-nav ml-auto mobile-only-control d-block d-sm-block d-md-block d-lg-none">
        <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" id="navbar-notification-search-mobile"
               data-toggle="dropdown" data-flip="false" aria-haspopup="true" aria-expanded="false">
                <i class="batch-icon batch-icon-search"></i>
            </a>
            <ul class="dropdown-menu dropdown-menu-fullscreen"
                aria-labelledby="navbar-notification-search-mobile">
                <li>
                    <form class="form-inline my-2 my-lg-0 no-waves-effect">
                        <div class="input-group">
                            <input type="text" class="form-control" placeholder="Search for..."
                                   aria-label="Search for..." aria-describedby="basic-addon2">
                            <div class="input-group-append">
                                <button class="btn btn-primary btn-gradient waves-effect waves-light"
                                        type="button">
                                    <i class="batch-icon batch-icon-search"></i>
                                </button>
                            </div>
                        </div>
                    </form>
                </li>
            </ul>
        </li>
    </ul>

    <!--  DEPRECATED CODE:
        <div class="navbar-collapse" id="navbarSupportedContent">
    -->
    <!-- USE THIS CODE Instead of the Commented Code Above -->
    <!-- .collapse added to the element -->
    <div class="collapse navbar-collapse" id="navbar-header-content">
        <ul class="navbar-nav navbar-language-translation mr-auto">
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" id="navbar-dropdown-menu-link" data-toggle="dropdown"
                   data-flip="false" aria-haspopup="true" aria-expanded="false">
                    <i class="batch-icon batch-icon-book-alt-"></i>
                    English
                </a>
            </li>
        </ul>
        <ul class="navbar-nav navbar-notifications float-right">
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" id="navbar-notification-search" data-toggle="dropdown"
                   data-flip="false" aria-haspopup="true" aria-expanded="false">
                    <i class="batch-icon batch-icon-search"></i>
                </a>
                <ul class="dropdown-menu dropdown-menu-fullscreen"
                    aria-labelledby="navbar-notification-search">
                    <li>
                        <form class="form-inline my-2 my-lg-0 no-waves-effect">
                            <div class="input-group">
                                <input type="text" class="form-control" placeholder="Search for..."
                                       aria-label="Search for..." aria-describedby="basic-addon2">
                                <div class="input-group-append">
                                    <button class="btn btn-primary btn-gradient waves-effect waves-light"
                                            type="button">Search
                                    </button>
                                </div>
                            </div>
                        </form>
                    </li>
                </ul>
            </li>

        </ul>
        <ul class="navbar-nav ml-5 navbar-profile">
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" id="navbar-dropdown-navbar-profile"
                   data-toggle="dropdown" data-flip="false" aria-haspopup="true" aria-expanded="false">
                    <div class="profile-name">
                        <?php echo $fName; ?>
                    </div>
                    <div class="profile-picture bg-gradient bg-primary has-message float-right">
                        <img src="assets/img/profile_pic/avatar.png" width="44" height="44">
                    </div>
                </a>
                <ul class="dropdown-menu dropdown-menu-right"
                    aria-labelledby="navbar-dropdown-navbar-profile">
                    <li><a class="dropdown-item" href="profiles-member-profile.html">Profile</a></li>
                    <li>
                        <a class="dropdown-item" href="mail-inbox.html">
                            Messages
                            <span class="badge badge-danger badge-pill float-right">3</span>
                        </a>
                    </li>
                    <li><a class="dropdown-item" href="profiles-member-profile.html">Settings</a></li>
                    <li><a class="dropdown-item" href="sisu-lock-screen.html">Logout</a></li>
                </ul>
            </li>
        </ul>
    </div>
</nav>
