added hamburger (#137)

rbjks · May 6, 2024 · bf156fd · bf156fd
1 parent 1da64e5
commit bf156fd
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 10 deletions.
diff --git a/activities.html b/activities.html
@@ -58,9 +58,11 @@
             >
           </li>
         </ul>
-        <a href="javascript:void(0);" class="icon" onclick="toggleMobileNav()">
-          <i class="fa fa-bars"></i>
-        </a>
+        <svg class="hamburger" onclick="toggleMobileNav()" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" color="white" fill="none">
+          <path d="M4 5L20 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+          <path d="M4 12L20 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+          <path d="M4 19L20 19" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+        </svg>
       </nav>
       <ul class="mobileNav">
         <li><a class="translate" href="/" aria-label="होम">Home</a></li>

diff --git a/assets/css/style.css b/assets/css/style.css
@@ -604,12 +604,26 @@ footer {
     display: none;
   }
 
+  .hamburger{
+    /* display: block; */
+    position: absolute;
+    right: 0px;
+    padding-right: 10px;
+    z-index: 20;
+  }
+
   #navbar ul.mobileNav.mobileVisible {
     display: flex;
+    font-size: large;
     flex-direction: column;
     align-items: center;
     background-color: #22b9a8;
-    height: 30vh;
+    position: fixed;
+    right: 0px;
+    top: 0px;
+    z-index: 10;
+    height: 100vh;
+    width: 250px;
     justify-content: space-evenly;
   }
 

diff --git a/assets/script/main.js b/assets/script/main.js
@@ -4,6 +4,7 @@ var prefLanguage = 'en';
 var translateElements = document.querySelectorAll('.translate');
 var htmlParent = document.querySelector('html');
 var navbarlist = document.querySelector('#navbar ul.mobileNav');
+var hamburger=document.querySelector(".hamburger")
 
 //var englishElements = document.querySelectorAll('.translate')
 //var hindiElements = document.querySelectorAll('[lang = hi]')
@@ -50,8 +51,10 @@ function swap(el) {
 function toggleMobileNav() {
   if (navbarlist.className === 'mobileNav') {
     navbarlist.className += ' mobileVisible';
+    hamburger.style.position="fixed"
   } else {
     navbarlist.className = 'mobileNav';
+    hamburger.style.position="absolute"
   }
 }
 
diff --git a/contact.html b/contact.html
@@ -56,9 +56,11 @@
             >
           </li>
         </ul>
-        <a href="javascript:void(0);" class="icon" onclick="toggleMobileNav()">
-          <i class="fa fa-bars"></i>
-        </a>
+        <svg class="hamburger" onclick="toggleMobileNav()" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" color="white" fill="none">
+          <path d="M4 5L20 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+          <path d="M4 12L20 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+          <path d="M4 19L20 19" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+        </svg>
       </nav>
       <ul class="mobileNav">
         <li><a class="translate" href="/" aria-label="होम">Home</a></li>

diff --git a/index.html b/index.html
@@ -56,9 +56,11 @@
             >
           </li>
         </ul>
-        <a href="javascript:void(0);" class="icon" onclick="toggleMobileNav()">
-          <i class="fa fa-bars"></i>
-        </a>
+        <svg class="hamburger" onclick="toggleMobileNav()" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" color="white" fill="none">
+          <path d="M4 5L20 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+          <path d="M4 12L20 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+          <path d="M4 19L20 19" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+        </svg>
       </nav>
       <ul class="mobileNav">
         <li><a class="translate" href="/" aria-label="होम">Home</a></li>