dj_mix_hosting_software/includes/navbar.php

<?php
function current_list(): string
{
    return ' active" aria-current="page';
}

$languages = $config['locales'];

if (isset($_GET['lang']) && array_key_exists($_GET['lang'], $languages)) {
    $_SESSION['lang'] = $_GET['lang'];
}
$current_lang = $_SESSION['lang'] ?? $config['app']['locale'];
?>

<header class="navbar navbar-expand-md bg-body sticky-top shadow">
    <div class="container-fluid">
        <a class="navbar-brand pe-3" href="/"><?php echo htmlspecialchars($config['app']['name']); ?></a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggle"
                aria-controls="navbarToggle" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarToggle">
            <ul class="navbar-nav me-auto mb-2 mb-md-0">
                <li class="nav-item">
                    <a class="nav-link<?php
                    // if the page is genres.php, set active and aria-current="page"
                    if (basename($_SERVER['SCRIPT_NAME']) == 'index.php') {
                        echo current_list();
                    }
                    ?>" href="/"><?php echo $locale['home']; ?></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link<?php

                    if (in_array($_SERVER['SCRIPT_NAME'], $genrePages)) {
                        echo current_list();
                    } ?>" href="/genres"><?php echo $locale['genres']; ?></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link<?php

                    if (in_array($_SERVER['SCRIPT_NAME'], $djsPages)) {
                        echo current_list();
                    } ?>" href="/djs"><?php echo $locale['djs']; ?></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link<?php

                    if (in_array($_SERVER['SCRIPT_NAME'], $mixshowsPages)) {
                        echo current_list();
                    } ?>" href="/mixshows"><?php echo $locale['mixshows']; ?></a>
                </li>
            </ul>

            <?php
            if (isset($_SESSION['darkmode']) && $_SESSION['darkmode'] == 'true') {
                echo '<button class="btn btn-outline-dark" id="darkModeToggle" onclick="toggleDarkMode()">🌙</button>';
            } else {
                echo '<button class="btn btn-outline-light" id="darkModeToggle" onclick="toggleDarkMode()">🌞</button>';
            }
            ?>

            <div class="dropdown">
                <label for="languageSelect" style="display: none">Language Selector</label>
                <select class="form-select" id="languageSelect"
                        onchange="location = this.value;">
                    <?php
                    $currentUrl = strtok($_SERVER["REQUEST_URI"], '?');
                    $queryParams = $_GET;
                    foreach ($languages as $key => $value) {
                        $queryParams['lang'] = $key;
                        $queryString = http_build_query($queryParams);
                        $langUrl = htmlspecialchars($currentUrl . '?' . $queryString);
                        $selected = ($key == $current_lang) ? ' selected' : '';
                        echo '<option value="' . $langUrl . '"' . $selected . '>' . $value . '</option>';
                    }
                    ?>
                </select>
            </div>


            <?php
            if (isset($_SESSION['user'])) {
                echo '<a class="nav-link" href="/profile.php">' . $locale['userProfile'] . '</a>';
            } else {
                echo '<a class="nav-link" href="/login.php">' . $locale['login'] . '</a>';
            }
            ?>
            <form class="d-flex" role="search">
                <input class="form-control me-2" type="search" placeholder="<?php echo $locale['search']; ?>"
                       aria-label="<?php echo $locale['search']; ?>">
                <button class="btn btn-outline-success" type="submit"><?php echo $locale['search']; ?></button>
            </form>
        </div>
    </div>
    </div>

    <script>
        document.getElementById('darkModeToggle').addEventListener('click', function() {
            var html = document.documentElement;

            // Check the current theme
            if (html.getAttribute('data-bs-theme') === 'dark') {
                html.removeAttribute('data-bs-theme'); // Switch to light mode
                this.innerHTML = '🌞'; // Update the button to reflect light mode
                updateDarkModeOnServer('false');
            } else {
                html.setAttribute('data-bs-theme', 'dark'); // Switch to dark mode
                this.innerHTML = '🌙'; // Update the button to reflect dark mode
                updateDarkModeOnServer('true');
            }
        });

        function updateDarkModeOnServer(value) {
            // Create a new AJAX request
            var xhr = new XMLHttpRequest();
            xhr.open('POST', 'settings.php', true);
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

            // Define what happens on successful data submission
            xhr.onload = function() {
                if (xhr.status >= 200 && xhr.status < 400) {
                    console.log('Dark mode setting updated on server');
                }
            };

            // Define what happens in case of an error
            xhr.onerror = function() {
                console.error('An error occurred during the request.');
            };

            // Set the action and send the request
            xhr.send('action=darkmode&value=' + value);
        }

    </script>

</header>