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 (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>

            <div class="d-flex align-items-center">
                <!-- Search form remains outside the dropdown -->
                <form class="d-flex me-3" role="search" action="/search.php" method="get">
                    <input class="form-control me-2" type="search" name="q" 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>

                <!-- Profile Widget Dropdown including language switcher -->
                <div class="dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="profileDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                        <i class="fa fa-user"></i>
                    </a>
                    <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="profileDropdown">
                        <?php if (isset($_SESSION['user'])): ?>
                            <li><a class="dropdown-item" href="/profile"><?php echo $locale['userProfile']; ?></a></li>
                            <li><a class="dropdown-item" href="/upload"><?php echo $locale['upload']; ?></a></li>
                            <li><a class="dropdown-item" href="/logout"><?php echo $locale['logout']; ?></a></li>
                            <li><hr class="dropdown-divider"></li>
                        <?php else: ?>
                            <li><a class="dropdown-item" href="/login"><?php echo $locale['login']; ?></a></li>
                            <li><hr class="dropdown-divider"></li>
                        <?php endif; ?>
                        <!-- Language Switcher -->
                        <li class="px-3 py-2">
                            <label for="languageSelect" class="visually-hidden">Language Selector</label>
                            <select class="form-select" id="languageSelect" onchange="location = this.value;">
                                <?php
                                if (isset($_SERVER["REQUEST_URI"])) {
                                    $currentUrl = strtok($_SERVER["REQUEST_URI"], '?') ?? '/';
                                } else {
                                    $currentUrl = '/';
                                }
                                $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>
                        </li>
                        <li><hr class="dropdown-divider"></li>
                        <li>
                            <button class="dropdown-item" id="darkModeToggle" onclick="toggleDarkMode()">
                                <?php echo (isset($_SESSION['darkmode']) && $_SESSION['darkmode'] == 'true') ? '🌙' : '🌞'; ?>
                                Toggle Dark Mode
                            </button>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <script>
        // Dark mode toggle script
        function toggleDarkMode() {
            const html = document.documentElement;
            if (html.getAttribute('data-bs-theme') === 'dark') {
                html.removeAttribute('data-bs-theme'); // Switch to light mode
                localStorage.setItem('darkmode', 'false');
                updateDarkModeOnServer('false');
            } else {
                html.setAttribute('data-bs-theme', 'dark'); // Switch to dark mode
                localStorage.setItem('darkmode', 'true');
                updateDarkModeOnServer('true');
            }
        }

        function updateDarkModeOnServer(value) {
            const xhr = new XMLHttpRequest();
            xhr.open('POST', '/settings.php', true);
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            xhr.onload = function() {
                if (xhr.status >= 200 && xhr.status < 400) {
                    console.log('Dark mode setting updated on server');
                }
            };
            xhr.onerror = function() {
                console.error('An error occurred during the request.');
            };
            xhr.send('action=darkmode&value=' + value);
        }

    </script>
</header>