some more progress on nav, soon complete

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 {
+.nav-link-dropdown a {
-    transform: scaleY( 0 );
+    font-size: 1.1rem;
+}
+
+.nav-icon {
+    font-size: 2rem;
+}
+
+.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;
     flex-direction: column;
+    z-index: 100;
+    background-color: rgb(226, 226, 226);
+    transition: all 0.5s;
+}
+
+.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-top-bar .logo {
+    display: unset;
+    height: 90%;
+    border-radius: 20px;
+    margin-left: 20px;
+}
+
+.nav-menu.active {
+    left: 0;
+}
+
+.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 .nav-link-wrapper {
+    .nav-link-wrapper {
         display: flex;
         justify-content: center;
         align-items: center;
         flex-direction: column;
         cursor: pointer;
         position: relative;
-    width: 10%;
+        margin-left: 3%;
-    min-width: 50px;
+        margin-right: 3%;
-    z-index: 20;
+    }
-}
     
-nav .nav-link-wrapper:hover {
+    .nav-link-header {
-    color: gray;
-}
-
-nav .nav-link-wrapper .nav-link-header {
-    display: flex;
-    justify-content: center;
-    align-items: center;
         flex-direction: column;
-    transition: all 0.5s;
+        min-width: 100px;
         padding: 10px;
         border-top-left-radius: 10px;
         border-top-right-radius: 10px;
         position: relative;
-    z-index: 2;
+        z-index: 3;
-}
+    }
 
-nav .nav-link-wrapper:hover .nav-link-header {
+    .nav-link-header::before, .nav-link-header::after {
-    background-color: white;
+        opacity: 0;
-}
-
-nav .nav-link-wrapper:hover .nav-link-dropdown {
-    transform: scaleY( 1 );
-}
-
-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;
-}
+        transition: opacity 0.4s;
+        bottom: -15px;
+    }
     
-nav .nav-link-wrapper:hover .nav-link-header::before {
+    .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;
+    }
 }

site/src/nav.html

@@ -1,50 +1,88 @@
-<div class="nav-link-wrapper">
+<div class="nav-placeholder"></div>
-    <div class="nav-link-header">
+
-        <span class="material-symbols-outlined">lightbulb</span>
+<div class="nav-top-bar">
-        <a href="/projects">Projects</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>
         </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>
+
+    <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">
-    <div class="nav-link-header">
-        <span class="material-symbols-outlined">info</span>
-        <a href="/about">About</a>
     </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">
-    <div class="nav-link-header">
-        <span class="material-symbols-outlined">support_agent</span>
-        <a href="/projects">Support</a>
     </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>
+
+<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;
+
+    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>