More mobile support on nav + Code fix

src/assets/main/close.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path fill="#ffffff" d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"/></svg>

src/assets/main/menu.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path fill="#ffffff" d="M0 96C0 78.3 14.3 64 32 64l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 128C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 288c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32L32 448c-17.7 0-32-14.3-32-32s14.3-32 32-32l384 0c17.7 0 32 14.3 32 32z"/></svg>

src/components/navbar.tmpl

@@ -23,10 +23,48 @@
       </li>
     </a> 
     <a href="https://git.keyemail.dev/explore/">
-      <li class="lastIcon" style="border-top-right-radius: 10%; border-bottom-right-radius: 10%;">
+      <li style="border-top-right-radius: 10%; border-bottom-right-radius: 10%;">
         Git
       </li>
     </a>
   </ul>
+  <img id="NavButton" src="/src/assets/main/menu.svg"/>
 </nav>
+<div id="NavMobile">
+  <div>
+    <a class="pfp" href="/src/assets/profile/profile.jpg">
+      <img src="/src/assets/profile/profile.jpg"/>
+    </a>
+    <h1>Keyemail</h1>
+    <img id="NavClose" src="/src/assets/main/close.svg"/>
+  </div>
+  <ul>
+    <a href="/">
+      <li class="{{ if eq .PageName "home" }}active{{ end }}">
+        Home
+      </li>
+    </a>
+    <a href="/gallery">
+      <li class="{{ if eq .PageName "gallery" }}active{{ end }}">
+        Gallery
+      </li>
+    </a>
+    <a href="/socials">
+      <li class="{{ if eq .PageName "socials" }}active{{ end }}">
+        Socials
+      </li>
+    </a>
+    <a href="/videos" class="{{ if eq .PageName "videos" }}active{{ end }}">
+      <li>
+        Videos
+      </li>
+    </a> 
+    <a href="https://git.keyemail.dev/explore/">
+      <li>
+        Git
+      </li>
+    </a>
+  </ul>
+</div>
+<script src="/src/scripts/navbar.js"></script>
 {{ end }}

src/scripts/navbar.js

@@ -0,0 +1,15 @@
+let navbarButton = document.getElementById("NavButton");
+let navbarMobile = document.getElementById("NavMobile");
+let navbarClose = document.getElementById("NavClose");
+
+navbarButton.addEventListener('click', function(event) {
+    if (navbarMobile.style.display === 'none' || navbarMobile.style.display === '') {
+        navbarMobile.style.display = 'flex';
+    }
+})
+
+navbarClose.addEventListener('click', function(event) {
+    if (navbarMobile.style.display === 'flex' || navbarMobile.style.display === '') {
+        navbarMobile.style.display = 'none';
+    }
+})

src/styles/home.css

@@ -28,6 +28,30 @@ header {
     font-size: 1.5rem;
     margin-left: 20px;
   }
+
+  .pfp {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 130px !important;
+    width: 130px !important;
+    border: solid;
+    border-width: 6px;
+    border-radius: 50%;
+    border-color: var(--bg-alt-color);
+    overflow: hidden;
+    margin-left: 20px;
+    margin-top: -50px;
+    user-select: none;
+    flex-shrink: 0;
+    
+    img {
+      width:100%;
+      height:100%;
+      object-fit: cover;
+      background-color: #afb5c8;
+    }
+  }
 }
 
 #headercontent {
@@ -37,30 +61,6 @@ header {
   align-items: center;
 }
 
-.pfp {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 130px !important;
-  width: 130px !important;
-  border: solid;
-  border-width: 6px;
-  border-radius: 50%;
-  border-color: var(--bg-alt-color);
-  overflow: hidden;
-  margin-left: 20px;
-  margin-top: -50px;
-  user-select: none;
-  flex-shrink: 0;
-  
-  img {
-    width:100%;
-    height:100%;
-    object-fit: cover;
-    background-color: #afb5c8;
-  }
-}
-
 #headerImg {
   height: 250px;
   width: 100%;

src/styles/main.css

@@ -98,6 +98,123 @@ nav {
   }
 }
 
+#NavButton {
+  display: none;
+  width: 30px;
+  height: 100%;
+  padding: 0 13px;
+  box-sizing: content-box;
+  border-top-right-radius: 10px;
+  border-bottom-right-radius: 10px;
+  cursor: pointer;
+}
+
+#NavButton:hover {
+  background-color: #2269d4;
+}
+
+#NavMobile {
+  display: none;
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  background-color: var(--bg-color);
+  margin: -20px;
+  z-index: 999;
+  color: white;
+  font-family: 'Rubik', sans-serif;
+  font-weight: 500;
+  flex-direction: column;
+  align-items: center;
+
+  div {
+    display: flex;
+    align-items: center;
+    margin-top: 20px;
+    justify-content: center;
+    width: 90%;
+    height: 50px;
+    border-radius: 10%;
+    background-color: var(--bg-alt-color);
+    z-index: 1000;
+
+    h1 {
+      text-align: center;
+      width: fit-content;
+      font-size: 1.5rem;
+    }
+  }
+
+  ul {
+    position: absolute;
+    height: 100%;
+    width: 90%;
+    display: flex;
+    flex-direction: column;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    text-align: center;
+    justify-content: center;
+  }
+
+  ul li {
+    width: 100%;
+    text-align: center;
+    padding: 15px 0;
+    background-color: var(--bg-alt-color);
+    margin: 5px 0;
+    border-radius: 10px;
+  }
+
+  ul li:hover {
+    background-color: #2269d4;
+  }
+
+  #NavClose {
+    position: absolute;
+    right: 20px;
+    width: 30px;
+    padding: 0 13px;
+    box-sizing: content-box;
+    height: 50px;
+    border-top-right-radius: 10%;
+    border-bottom-right-radius: 10%;
+    cursor: pointer;
+  }
+
+  #NavClose:hover {
+    background-color: #2269d4;
+  }
+
+  .active {
+    background-color: #2269d4 !important;
+  }
+
+  .pfp {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 45px !important;
+    width: 45px !important;
+    border: solid;
+    border-width: 6px;
+    border-radius: 50%;
+    border-color: var(--bg-alt-color);
+    overflow: hidden;
+    user-select: none;
+    flex-shrink: 0;
+    
+    img {
+      width:100%;
+      height:100%;
+      object-fit: cover;
+      background-color: #afb5c8;
+    }
+  }
+}
+
+
 @media screen and (max-width: 540px) {
   nav {
     justify-content: center;
@@ -110,8 +227,18 @@ nav {
 
 @media screen and (max-width: 400px) {
   nav {
-    ul li {
+    justify-content:space-between;
-      padding: 0 8px;
+
+    ul {
+      display: none;
+    }
+
+    h1 {
+      display: block;
     }
   }
+
+  #NavButton {
+    display: block;
+  }
 }