website-v3/src/nav.html

<script>
    // Themeing
    let loadedTheme = localStorage.getItem( 'theme' ) ?? 'auto';
    var theme = loadedTheme;
    let loadTheme = () => {
        loadedTheme = localStorage.getItem( 'theme' ) ?? 'auto';
        if ( loadedTheme === 'auto' ) {
            if ( window.matchMedia( '(prefers-color-scheme: dark)' ).matches ) {
                theme = 'dark_mode';
            } else {
                theme = 'light_mode';
            }
        }
        if ( theme === 'dark_mode' ) {
            document.documentElement.classList.remove( 'light' );
            document.documentElement.classList.add( 'dark' );
        } else {
            document.documentElement.classList.add( 'light' );
            document.documentElement.classList.remove( 'dark' );
            theme === 'light_mode';
        }
    }
    loadTheme();

    setTimeout( () => {
        document.querySelector( 'body' ).classList.add( 'loaded' );
    }, 500 );

    function changeTheme () {
        theme = document.getElementById( 'theme-select' ).value;
        localStorage.setItem( 'theme', theme );
        loadTheme();
    }
</script>

<div class="nav-placeholder"></div>

<div class="nav-top-bar">
    <a href="/" class="logo-wrapper">
        <img src="https://static.janishutz.com/logo.jpg" alt="janishutz.com logo" class="logo" loading="lazy">
    </a>
    <!-- <img src="https://static.janishutz.com/logo.jpg" alt="janishutz.com logo" class="logo"> -->
    <div class="nav-toggle" onclick="openMenu( 'toggle' )">
        <span class="line" id="line1"></span>
        <span class="line" id="line2"></span>
        <span class="line" id="line3"></span>
    </div>
</div>

<div class="nav-menu">
    <div class="nav-link-wrapper">
        <a class="nav-link-header" href="/projects">
            <span class="material-symbols-outlined nav-icon">lightbulb</span>
            <div>Projects</div>
        </a>
        <div class="nav-link-dropdown">
            <a href="/projects">View all</a>
            <a href="/projects/storagemanager">StorageManager</a>
            <a href="/projects/qrscanner">QR & Barcode Insight</a>
            <a href="/projects/libreevent">libreǝvent</a>
            <a href="/projects/musicplayer">MusicPlayer</a>
            <a href="https://conductorcalc.com" target="_blank">ConductorCalc</a>
        </div>
    </div>

    <div class="nav-link-wrapper">
        <a class="nav-link-header" href="/services">
            <span class="material-symbols-outlined nav-icon">build</span>
            <div>Services</div>
        </a>
        <div class="nav-link-dropdown">
            <a href="https://store.janishutz.com">Store</a>
            <a href="https://account.janishutz.com">Account</a>
            <a href="https://development.janishutz.com">Custom Websites</a>
        </div>
    </div>

    <a href="/" class="logo-wrapper">
        <img src="https://static.janishutz.com/logo.jpg" alt="janishutz.com logo" class="logo">
    </a>

    <div class="nav-link-wrapper">
        <a class="nav-link-header" href="/about">
            <span class="material-symbols-outlined nav-icon">info</span>
            <div>About</div>
        </a>
        <div class="nav-link-dropdown">
            <a href="/about">About janishutz.com</a>
            <a href="/about/aboutme">About Janis Hutz</a>
            <a href="https://blog.janishutz.com" target="_blank">Blog</a>
            <a href="/legal">Legal</a>
        </div>
    </div>

    <div class="nav-link-wrapper">
        <a class="nav-link-header" href="/support">
            <span class="material-symbols-outlined nav-icon">support_agent</span>
            <div>Support</div>
        </a>
        <div class="nav-link-dropdown">
            <a href="https://support.janishutz.com" target="_blank">Support Hub</a>
            <a href="https://support.janishutz.com/knowledgebase.php" target="_blank">Knowledgebase</a>
            <a href="/support/old">Old websites</a>
        </div>
    </div>
</div>

<script>
    const toggle = document.getElementsByClassName( 'nav-toggle' )[ 0 ];
    const menu = document.getElementsByClassName( 'nav-menu' )[ 0 ];
    const bar = document.getElementsByClassName( 'nav-top-bar' )[ 0 ];

    function openMenu( action ) {
        if ( action === 'toggle' ) {
            if ( menu.classList.contains( 'active' ) ) {
                openMenu( 'close' );
            } else {
                openMenu( 'open' );
            }
        } else if ( action === 'close' ) {
            menu.classList.remove( 'active' );
            toggle.classList.remove( 'active' );
            document.body.classList.remove( 'no-scroll' );
        } else if ( action === 'open' ) {
            document.body.classList.add( 'no-scroll' );
            toggle.classList.add( 'active' );
            menu.classList.add( 'active' );
            bar.classList.remove( 'slide-up' );
            menu.classList.remove( 'slide-up' );
        }
    }

    let oldScroll = 0;
    document.addEventListener( 'scroll', () => {
        if ( oldScroll < window.scrollY && window.innerHeight * 0.2 < window.scrollY ) {
            bar.classList.add( 'slide-up' );
            menu.classList.add( 'slide-up' );
        } else if ( oldScroll > window.scrollY ) {
            bar.classList.remove( 'slide-up' );
            menu.classList.remove( 'slide-up' );
        }
        oldScroll = window.scrollY;
    } );

    // TODO: Hide menu on when scrolling down
</script>