<header id="header" class="header dark-background d-flex flex-column">
    <i class="header-toggle d-xl-none bi bi-list"></i>

    <div class="profile-img">
        <img src="assets/img/my-profile-img.jpg" alt=""
            class="img-fluid rounded-circle">
    </div>

    <a href="index.php"
        class="logo d-flex align-items-center justify-content-center">
        <!-- Uncomment the line below if you also wish to use an image logo -->
        <!-- <img src="assets/img/logo.png" alt=""> -->
        <h1 class="sitename">Manoj Thulasidas</h1>
    </a>

    <div class="social-links text-center">
        <a href="//www.linkedin.com/in/manojthulasidas/" target="_blank"
            class="facebook"><i class="bi bi-linkedin" data-bs-toggle="tooltip"
                data-placement="bottom" title="LinkedIn Profile"></i></a>
        <a href="//www.facebook.com/manoj.thulasidas" target="_blank"
            class="facebook"><i class="bi bi-facebook" data-bs-toggle="tooltip"
                data-placement="bottom" title="Facebook Page"></i></a>
        <a href="//www.youtube.com/@manojtd" target="_blank" class="youtube"><i
                class="bi bi-youtube" data-bs-toggle="tooltip"
                data-placement="bottom" title="YouTube Channel"></i></a>
        <a href="//theunrealuniverse.com" target="_blank" class="google-plus"><i
                class="bi bi-book" data-bs-toggle="tooltip" data-placement="bottom"
                title="My Book, My Legacy"></i></a>
        <a href="//us.thulasidas.com" target="_blank" class="family"><i
                class="bi bi-people" data-bs-toggle="tooltip"
                data-placement="bottom" title="Family Page (Restricted)"></i></a>
    </div>

    <nav id="navmenu" class="navmenu">
        <ul>
            <li><a href="index.php#hero"><i
                        class="bi bi-house navicon"></i>Home</a>
            </li>
            <li><a href="index.php#about"><i class="bi bi-person navicon"></i>
                    About</a></li>
            <li><a href="index.php#resume"><i
                        class="bi bi-file-earmark-text navicon"></i>
                    Resume</a></li>
            <li><a href="index.php#portfolio"><i
                        class="bi bi-images navicon"></i>
                    Portfolio</a></li>
            <li><a href="wad.php"><i
                        class="bi bi-hdd-stack navicon"></i>
                    For WAD1 Students</a></li>
            <li class="dropdown"><a href="#"><i
                        class="bi bi-menu-button navicon"></i>
                    <span>Quo Vadis?</span> <i
                        class="bi bi-chevron-down toggle-dropdown"></i></a>
                <ul>
                    <li><?php insertVideo("KJ0NJUAj7w0", "Who Am I?"); ?></li>
                    <li><a href="//smu.sg/manoj" target="_blank">SMU: Faculty
                            Page</a></li>
                    <li><a href="//www.thulasidas.com" target="_blank">Unreal
                            Blog</a></li>
                    <li><?php insertVideo("217Townasjc", "Why Unreal?"); ?></li>
                    <li><a href="//theunrealuniverse.com" target="_blank">Book:
                            The Unreal Universe</a></li>
                    <li><a href="//la4cs.com" target="_blank">Book:
                            Linear Algebra</a></li>
                    <li><a href="//us.thulasidas.com" target="_blank">Family
                            Website (Restricted)</a></li>
                </ul>
            </li>
            <li><a href="index.php#contact"><i class="bi bi-envelope navicon"></i>
                    Contact</a></li>
        </ul>
    </nav>
</header>