Upload website

src/nav.html

@@ -0,0 +1,146 @@
+<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">
+    </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>