<nav class="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700">
    <div class="flex items-center">
        
        <img src="https://img.icons8.com/fluent/40/user-male-circle.png" width="30px">
        <a href="<?php echo e(route('settings')); ?>">
        <h1 class="text-xl font-semibold"><?php echo e(ucfirst(collect(preg_split('/\s+/', auth()->user()->name))->first())); ?></h1>
        </a>
    </div>
    
    <!-- Dark Mode Toggle -->
    <div class="flex items-center space-x-4">
        <div class="flex items-center space-x-2">
            <i class="fas fa-sun text-sm"></i>
            <button id="darkModeToggle" class="p-2 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200">
                <svg id="sunIcon" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
                </svg>
                <svg id="moonIcon" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 hidden" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 11.5a8.38 8.38 0 01-.9 3.807 8.38 8.38 0 01-3.8.9L12 18.354l-1.121.523a8.38 8.38 0 01-3.8-.9 8.38 8.38 0 01-.9-3.807 8.38 8.38 0 013.8-3.807 8.38 8.38 0 013.8-.9l1.121.523zm-2.958-7.919a16.128 16.128 0 013.1 2.66 4.35 4.35 0 01-.832 2.94c.07.152.4.923.8.923h.005c.4 0 .75-.77.8-.923 3.183-1.651 6.817-1.651 10 0a4.35 4.35 0 01-.832 2.94 16.128 16.128 0 013.1 2.66A10.54 10.54 0 0112 15.69l-1.121-.523a10.54 10.54 0 01-3.8-.9 10.54 10.54 0 01-3.8-3.807 10.54 10.54 0 013.8-3.807 10.54 10.54 0 013.8-.9l1.121.523z" />
                </svg>
            </button>
        
        </div>
    </div>
</nav>


                     <script>
        const darkModeToggle = document.getElementById('darkModeToggle');
        const html = document.documentElement;
        const moonIcon = document.getElementById('moonIcon');
        const sunIcon = document.getElementById('sunIcon');

        // Function to set the theme
        function setTheme(isDark) {
            html.classList.toggle('dark', isDark);
            moonIcon.classList.toggle('hidden', !isDark);
            sunIcon.classList.toggle('hidden', isDark);
        }

        // Check for saved theme preference or use system preference
        const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
        const hasUserPreference = localStorage.getItem('theme');

        if (hasUserPreference) {
            setTheme(hasUserPreference === 'dark');
        } else {
            setTheme(darkModeMediaQuery.matches);
        }

        // Toggle theme and save preference
        darkModeToggle.addEventListener('click', () => {
            const isDark = html.classList.toggle('dark');
            setTheme(isDark);
            localStorage.setItem('theme', isDark ? 'dark' : 'light');
        });

        // Listen for system theme changes
        darkModeMediaQuery.addListener((e) => {
            if (!hasUserPreference) {
                setTheme(e.matches);
            }
        });
    </script>
    <?php /**PATH /home/quantumv/Qfselitevault.com/resources/views/layouts/user/navigation.blade.php ENDPATH**/ ?>