WebFM/src/core/templates/body-header.html

<nav class="container navbar navbar-expand-sm bg-dark navbar-dark justify-content-center text-center sticky-top">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
            data-bs-target="#navbarTogglerHeader" aria-controls="navbarTogglerHeader"
                aria-expanded="false" aria-label="Toggle Header Navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div id="navbarTogglerHeader" class="row collapse navbar-collapse">
        {% if current_directory %}
            <div class="col col-auto">
                <!-- Left menues -->
                <ul class="navbar-nav">
                    <li class="nav-item" data-bs-toggle="modal" data-bs-target="#file-view-modal">
                        <i class="nav-link bi bi-projector-fill" aria-label="File viewer" title="File viewer..." >
                            Media Viewer
                        </i>
                    </li>
                    <li class="nav-item">
                        <div class="input-group">
                            <input id="search-files-field" type="text" class="form-control"
                                    aria-label="Search..." placeholder="Search..." style="max-width: 260px">
                            <div class="input-group-prepend">
                                <button id="clear-search-btn" type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" title="Clears search..."></button>
                            </div>
                        </div>
                    </li>
                    <li class="nav-item" data-bs-toggle="modal" data-bs-target="#favorites-modal">
                        <i class="nav-link" aria-label="Faves list" title="Faves list..." >
                            Faves List
                        </i>
                    </li>
                    <li class="nav-item">
                        <i id="scroll-files-to-top-btn" class="nav-link" aria-label="Scroll to top" title="Scroll to top..." >
                            Scroll To Top
                        </i>
                    </li>
                    <li class="nav-item">
                        <div class="ml-2 mt-2 form-check">
                            <input class="form-check-input" type="checkbox" value="" id="playlist-mode-btn">
                            <label class="form-check-label" for="playlist-mode-btn">
                                Playlist Mode
                            </label>
                        </div>
                        <!-- <i id="playlist-mode-btn" class="nav-link" aria-label="Playlist Mode" title="Playlist Mode..." >
                            Playlist Mode
                        </i> -->
                    </li>
                </ul>
            </div>
        {% endif %}

        <div class="col">
            <li class="nav-item mx-3">
                <a id="trailer-link" href="#">
                    <span id="trailer-btn" class="btn btn-info btn-sm" style="display: none;" title="Trailer..." >Trailer</span>
                </a>
            </li>
        </div>

        <div class="col col-auto">
            <!-- Right menues -->
            <ul class="navbar-nav">
                {% if current_directory %}
                    <li class="nav-item">
                        <i id="back-btn" class="nav-link bi bi-arrow-left-square" aria-hidden="true" title="Back..." hash="{{dot_dots[1][1]}}">
                            Back
                        </i>
                    </li>
                    <li class="nav-item">
                        <i id="refresh-btn" class="nav-link bi bi-arrow-clockwise" aria-hidden="true" title="Refresh..." hash="{{dot_dots[0][1]}}">
                            Refresh
                        </i>
                    </li>
                {% endif %}
                <li class="nav-item" data-bs-toggle="modal" data-bs-target="#options-modal">
                    <i class="nav-link bi bi-gear-wide-connected" aria-hidden="true" title="Other options..." >
                        Settings
                    </i>
                </li>
                {% if current_user.is_authenticated or oidc_loggedin() %}
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('logout') }}">
                            <i class="bi bi-box-arrow-left"></i> Logout
                        </a>
                    </li>
                {% endif %}
                {% if not current_user.is_authenticated and not oidc_loggedin() %}
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-bs-toggle="dropdown">
                            Account
                        </a>
                        <div class="dropdown-menu">
                            <a class="dropdown-item" href="{{ url_for('login') }}">
                                <i title="Login" class="bi bi-person-circle"></i>&nbsp;&nbsp;Login
                            </a>
                            <a class="dropdown-item" href="{{ url_for('register') }}">
                                <i title="Register A User..." class="bi bi-person-plus-fill"></i>&nbsp;&nbsp;Register
                            </a>
                        </div>
                    </li>
                {% endif %}
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-bs-toggle="dropdown">
                        Theme
                    </a>
                    <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bd-theme" style="--bs-dropdown-min-width: 8rem;">
                        <li>
                            <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="light">
                                <i title="Register A User..." class="bi bi-brightness-high"></i>
                                &nbsp;&nbsp;&nbsp;&nbsp;Light
                            </button>
                        </li>
                        <li>
                            <button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="dark">
                                <i title="Register A User..." class="bi bi-brightness-low"></i>
                                &nbsp;&nbsp;&nbsp;&nbsp;Dark
                            </button>
                        </li>
                        <li>
                            <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="auto">
                                <i title="Register A User..." class="bi bi-brightness-high"></i>
                                &nbsp;&nbsp;&nbsp;&nbsp;Auto&nbsp;&nbsp;&nbsp;&nbsp;
                                <i title="Register A User..." class="bi bi-brightness-low"></i>
                            </button>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>