From bd9094231e68b25d77a15fc2d337d26255c8f1be Mon Sep 17 00:00:00 2001
From: Janis Hutz <development@janishutz.com>
Date: Tue, 27 Aug 2024 15:04:15 +0200
Subject: [PATCH] some more progress on nav, soon complete

---
 site/src/css/nav.css | 263 ++++++++++++++++++++++++++++++++++---------
 site/src/nav.html    | 122 +++++++++++++-------
 2 files changed, 287 insertions(+), 98 deletions(-)

diff --git a/site/src/css/nav.css b/site/src/css/nav.css
index 87c85bc..c1e3b3d 100644
--- a/site/src/css/nav.css
+++ b/site/src/css/nav.css
@@ -1,13 +1,15 @@
 nav {
-    display: flex;
     width: 100vw;
     height: 20vh;
-    justify-content: center;
-    align-items: center;
-    background-color: rgb(226, 226, 226);
+    
 }
 
-nav .logo {
+.nav-placeholder {
+    height: 20vh;
+}
+
+.nav-menu .logo {
+    display: none;
     height: 90%;
     border-radius: 20px;
 }
@@ -18,71 +20,220 @@ nav a {
     text-decoration: none;
 }
 
-nav .nav-link-wrapper .nav-link-dropdown {
-    transform: scaleY( 0 );
-    display: flex;
-    flex-direction: column;
-    position: absolute;
-    top: 100%;
-    transform-origin: top;
-    transition: transform 0.5s;
-    background-color: white;
-    border-radius: 10px;
-    padding: 15px;
-    z-index: 2;
+.nav-link-dropdown a {
+    font-size: 1.1rem;
 }
 
-nav .nav-link-wrapper {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-    cursor: pointer;
-    position: relative;
-    width: 10%;
-    min-width: 50px;
-    z-index: 20;
+.nav-icon {
+    font-size: 2rem;
 }
 
-nav .nav-link-wrapper:hover {
-    color: gray;
-}
-
-nav .nav-link-wrapper .nav-link-header {
+.nav-menu {
+    position: fixed;
+    left: -100vw;
+    top: 20vh;
+    padding-top: 2.5vh;
+    padding-bottom: 2.5vh;
+    padding-left: 2.5vw;
+    padding-right: 2.5vw;
+    height: 75vh;
+    width: 95vw;
     display: flex;
-    justify-content: center;
-    align-items: center;
     flex-direction: column;
+    z-index: 100;
+    background-color: rgb(226, 226, 226);
     transition: all 0.5s;
-    padding: 10px;
-    border-top-left-radius: 10px;
-    border-top-right-radius: 10px;
-    position: relative;
-    z-index: 2;
 }
 
-nav .nav-link-wrapper:hover .nav-link-header {
-    background-color: white;
+.nav-top-bar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 20vh;
+    background-color: rgb(226, 226, 226);
+    display: flex;
+    align-items: center;
+    z-index: 100;
 }
 
-nav .nav-link-wrapper:hover .nav-link-dropdown {
-    transform: scaleY( 1 );
+.nav-top-bar .logo {
+    display: unset;
+    height: 90%;
+    border-radius: 20px;
+    margin-left: 20px;
 }
 
-nav .nav-link-wrapper .nav-link-header::before {
-    border: white 15px solid;
-    border-top-color: transparent;
-    border-left-color: transparent;
-    width: 20px;
-    height: 20px;
-    position: absolute;
-    right: calc( 100% - 15px );
-    bottom: -15px;
-    border-bottom-right-radius: 30px;
-    content: " ";
-    z-index: -1;
+.nav-menu.active {
+    left: 0;
 }
 
-nav .nav-link-wrapper:hover .nav-link-header::before {
+.nav-link-header {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    transition: all 0.5s;
+}
+
+.nav-link-dropdown {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+}
+
+
+/* Nav-Toggle button idea from here: https://codepen.io/alvarotrigo/pen/wvrzPWL*/
+.nav-toggle {
+    margin-left: auto;
+    margin-right: 20px;
+    text-decoration: none;
+    color: black;
+    font-size: 5vh;
+    cursor: pointer;
+    width: 35px;
+    height: 25px;
+    z-index: 1;
+    transition: 0.8s;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+}
+
+.line {
+    display: block;
+    width: 100%;
+    height: 2px;
+    background-color: black;
+}
+
+#line1 {
+    transform-origin: 0% 0%;
+    transition: transform 0.4s ease-in-out;
+}
+
+#line2 {
+    transition: transform 0.2s ease-in-out;
+}
+
+#line3 {
+    transform-origin: 0% 100%;
+    transition: transform 0.4s ease-in-out;
+}
+
+.nav-toggle.active #line1 {
+    transform: rotate( 45deg ) scaleX( 0.95 );
+}
+
+.nav-toggle.active #line2 {
+    transform: scaleY(0);
+}
+
+.nav-toggle.active #line3 {
+    transform: rotate( -45deg ) scaleX( 0.95 );
+}
+
+
+@media only screen and (min-width: 900px) {
+    .nav-menu .logo {
+        display: unset;
+    }
+
+    .nav-top-bar {
+        display: none;
+    }
+
+    .nav-menu {
+        padding: 0;
+        height: 20vh;
+        justify-content: center;
+        align-items: center;
+        flex-direction: row;
+        top: 0;
+        left: 0;
+    }
+
+    .nav-link-dropdown {
+        transform: scaleY( 0 );
+        align-items: unset;
+        justify-content: unset;
+        position: absolute;
+        top: 100%;
+        min-width: 175px;
+        width: max-content;
+        transform-origin: top;
+        transition: transform 0.5s;
+        background-color: white;
+        border-radius: 10px;
+        padding: 15px;
+        z-index: 2;
+    }
     
+    .nav-link-wrapper {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+        cursor: pointer;
+        position: relative;
+        margin-left: 3%;
+        margin-right: 3%;
+    }
+    
+    .nav-link-header {
+        flex-direction: column;
+        min-width: 100px;
+        padding: 10px;
+        border-top-left-radius: 10px;
+        border-top-right-radius: 10px;
+        position: relative;
+        z-index: 3;
+    }
+
+    .nav-link-header::before, .nav-link-header::after {
+        opacity: 0;
+        border: white 15px solid;
+        border-top-color: transparent;
+        width: 20px;
+        height: 20px;
+        position: absolute;
+        content: " ";
+        z-index: -1;
+        transition: opacity 0.4s;
+        bottom: -15px;
+    }
+    
+    .nav-link-header::before {
+        border-left-color: transparent;
+        border-bottom-right-radius: 30px;
+        right: calc( 100% - 15px );
+    }
+    
+    .nav-link-header::after {
+        border-right-color: transparent;
+        border-bottom-left-radius: 30px;
+        left: calc( 100% - 15px );
+    }
+
+    .nav-link-dropdown a:hover {
+        text-decoration: underline;
+    }
+    
+    .nav-link-wrapper:hover .nav-link-header {
+        background-color: white;
+    }
+    
+    .nav-link-wrapper:hover .nav-link-dropdown {
+        transform: scaleY( 1 );
+    }
+
+    .nav-link-wrapper:hover .nav-link-header::before, .nav-link-wrapper:hover .nav-link-header::after {
+        transition-delay: 0.1s;
+        opacity: 1;
+    }
+    
+    .nav-toggle {
+        display: none;
+    }
 }
\ No newline at end of file
diff --git a/site/src/nav.html b/site/src/nav.html
index 3e5c1cb..4bfe0ed 100644
--- a/site/src/nav.html
+++ b/site/src/nav.html
@@ -1,50 +1,88 @@
-<div class="nav-link-wrapper">
-    <div class="nav-link-header">
-        <span class="material-symbols-outlined">lightbulb</span>
-        <a href="/projects">Projects</a>
-    </div>
-    <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>
+<div class="nav-placeholder"></div>
+
+<div class="nav-top-bar">
+    <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-link-wrapper">
-    <div class="nav-link-header">
-        <span class="material-symbols-outlined">build</span>
-        <a href="/services">Services</a>
+<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>
+        </div>
     </div>
-    <div class="nav-link-dropdown">
-        <a href="https://store.janishutz.com">Store</a>
-        <a href="https://id.janishutz.com">Account</a>
-        <a href="https://development.janishutz.com">Custom Websites</a>
+
+    <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://id.janishutz.com">Account</a>
+            <a href="https://development.janishutz.com">Custom Websites</a>
+        </div>
+    </div>
+
+    <img src="https://static.janishutz.com/logo.jpg" alt="janishutz.com logo" class="logo">
+
+    <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="/legal">Legal</a>
+        </div>
+    </div>
+
+    <div class="nav-link-wrapper">
+        <a class="nav-link-header" href="/projects">
+            <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">Support Hub</a>
+            <a href="https://support.janishutz.com/knowledgebase.php">Knowledgebase</a>
+            <a href="/support/old">Old websites</a>
+        </div>
     </div>
 </div>
 
-<img src="https://static.janishutz.com/logo.jpg" alt="janishutz.com logo" class="logo">
+<script>
+    const toggle = document.getElementsByClassName( 'nav-toggle' )[ 0 ];
+    const menu = document.getElementsByClassName( 'nav-menu' )[ 0 ];
+    const bar = document.getElementsByClassName( 'nav-top-bar' )[ 0 ];
+    let isAllowedToScroll = true;
 
-<div class="nav-link-wrapper">
-    <div class="nav-link-header">
-        <span class="material-symbols-outlined">info</span>
-        <a href="/about">About</a>
-    </div>
-    <div class="nav-link-dropdown">
-        <a href="/about">About janishutz.com</a>
-        <a href="/about/aboutme">About Janis Hutz</a>
-        <a href="/legal">Legal</a>
-    </div>
-</div>
-
-<div class="nav-link-wrapper">
-    <div class="nav-link-header">
-        <span class="material-symbols-outlined">support_agent</span>
-        <a href="/projects">Support</a>
-    </div>
-    <div class="nav-link-dropdown">
-        <a href="https://support.janishutz.com">Support Hub</a>
-        <a href="https://support.janishutz.com/knowledgebase.php">Knowledgebase</a>
-        <a href="/support/old">Old websites</a>
-    </div>
-</div>
\ No newline at end of file
+    function openMenu( action ) {
+        if ( action === 'toggle' ) {
+            if ( menu.classList.contains( 'active' ) ) {
+                openMenu( 'close' );
+            } else {
+                openMenu( 'open' );
+            }
+        } else if ( action === 'close' ) {
+            isAllowedToScroll = true;
+            menu.classList.remove( 'active' );
+            toggle.classList.remove( 'active' );
+        } else if ( action === 'open' ) {
+            isAllowedToScroll = false;
+            toggle.classList.add( 'active' );
+            menu.classList.add( 'active' );
+        }
+    }
+</script>
\ No newline at end of file