<nav class="navbar fixed-top navbar-expand-md navbar-dark bg-dark">
    <div class="container">
        <a href="/" class="navbar-brand mb-0 h1">Masks Personality Quiz | V.S.</a>
        <button
            class="navbar-toggler"
            type="button"
            data-bs-toggle="collapse"
            data-bs-target="#navbar"
            aria-controls="navbar"
            aria-expanded="false"
            aria-label="Toggle Navigation"
        >
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbar">
            <ul class="navbar-nav">
                <li class="nav-item" id="nav-home">
                    <a class="nav-link" id="link-home" href="/">Home</a>
                </li>
                <li class="nav-item" id="nav-quiz">
                    <a class="nav-link" id="link-quiz" href="/quiz">Take the Quiz</a>
                </li>
                <li class="nav-item dropdown" id="nav-about">
                    <a
                        class="nav-link dropdown-toggle"
                        id="dropdown-about"
                        role="button"
                        href="/masks"
                        data-bs-toggle="dropdown"
                        aria-expanded="false"
                    >
                        About
                    </a>
                    <ul
                        class="dropdown-menu"
                        aria-labelledby="dropdown-about"
                    >
                        <li>
                            <a href="/masks" id="link-masks" class="dropdown-item">About <em>Masks</em></a>
                        </li>
                        <li>
                            <a href="https://git.vsnt.uk/viveksantayana/masks-personality-quiz" id="link-dev" class="dropdown-item">View the Code</a>
                        </li>
                        <li>
                            <a href="/compatibility" id="link-compatibility" class="dropdown-item">Compatibility and Accessibility</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>