Header - mobile (#70)

* added mobile css

* changes to header mobile

* removed br tag

* Update announcement.css changed @media width to 768px

* removed webkit css

* removed gaps and added padding for mobile

* fixed a few css errors

* padding and margin adjusted

* changed css margin

* removed unnecessary code

* removed unnecessary code

* merged from main

* added margin

* removed comma

* ignore id

* changed ids to class

* a tags formatting

* changed top in header nav active to 9rem

Author: MariamM110

assets/js/bioconductor.js

@@ -36,6 +36,28 @@ function checkNav() {
 
 window.addEventListener("load", checkNav);
 
+//Mobile siteHead js
+document.addEventListener("DOMContentLoaded", function () {
+  const hamburger = document.querySelector(".hamburger");
+  const navMenu = document.querySelector(".header-nav");
+
+  function mobileMenu() {
+    hamburger.classList.toggle("active");
+    navMenu.classList.toggle("active");
+  }
+
+  window.addEventListener("click", mobileMenu);
+
+  const navLink = document.querySelectorAll(".mobile-link");
+
+  function closeMenu() {
+    hamburger.classList.remove("active");
+    navMenu.classList.remove("active");
+  }
+
+  navLink.forEach((n) => n.addEventListener("click", closeMenu));
+});
+
 function log(message) {
   if (fb_lite) {
     //console.log(message);

assets/style/announcement.css

@@ -34,3 +34,14 @@
   color: #fff;
   stroke: #fff;
 }
+
+@media (width <= 768px) {
+  .announcement {
+    display: flex;
+    padding: 0.625rem;
+    justify-content: center;
+    align-items: flex-start;
+    gap: 0.5rem;
+    text-align: center;
+  }
+}

assets/style/header.css

@@ -20,7 +20,7 @@ header {
   align-items: center;
 }
 
-.header-desktop {
+.header-nav {
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -137,3 +137,125 @@ input:focus::placeholder {
   background: var(--primary-p400);
   color: #fff;
 }
+
+.nav-mobile {
+  display: none;
+}
+
+.bar {
+  display: block;
+  width: 25px;
+  height: 3px;
+  border-radius: 25px;
+  margin: 5px auto;
+  transition: all 0.3s ease-in-out;
+  background-color: var(--misc-dark);
+}
+
+@media (width <= 768px) {
+  .header-size {
+    justify-content: space-between;
+    align-items: center;
+    padding: 1rem 0.5rem;
+  }
+
+  .header-nav {
+    position: fixed;
+    flex-direction: column;
+    width: 100vw;
+    top: -100%;
+    left: 0;
+    background-color: #fff;
+    transition: 0.3s;
+    gap: 0;
+    z-index: -1;
+  }
+
+  .header-nav.active {
+    top: 9rem;
+  }
+
+  .nav-mobile {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 0.7rem;
+  }
+
+  .nav-mobile h6 {
+    margin: 0;
+  }
+
+  .nav-links {
+    flex-direction: column;
+    gap: 0;
+    padding-left: 2rem;
+    margin-top: 0.5rem;
+    border-top: 1px solid var(--neutral-n75);
+    padding-top: 0.5rem;
+  }
+
+  .nav-links a {
+    text-decoration: none !important;
+    width: 100vw;
+    border-bottom: 1px solid var(--neutral-n75);
+    padding-left: 1.5rem;
+    padding-bottom: 1rem;
+  }
+
+  .search-container {
+    height: 2.5rem;
+    display: flex;
+    width: calc(100vw - 3rem);
+    align-items: center;
+    justify-content: space-between;
+    padding-left: 0.75rem;
+    padding-right: 0;
+  }
+
+  .header-button {
+    background-image: var(--gradient-brand);
+    color: var(--primary-p400);
+    display: flex;
+    width: 100%;
+    border-radius: 0%;
+    align-items: center;
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+  }
+
+  .get-started {
+    background: none;
+    color: #fff;
+    flex-direction: column;
+    align-items: flex-start;
+    margin: 0.5rem;
+  }
+
+  .get-started svg {
+    display: none;
+  }
+
+  .nav-links a,
+  .search-container,
+  .header-button {
+    margin: 0.5rem 0;
+  } 
+
+  .hamburger {
+    display: block;
+    cursor: pointer;
+  }
+
+  .hamburger.active .bar:nth-child(2) {
+    opacity: 0;
+  }
+
+  .hamburger.active .bar:nth-child(1) {
+    transform: translateY(8px) rotate(45deg);
+  }
+
+  .hamburger.active .bar:nth-child(3) {
+    transform: translateY(-8px) rotate(-45deg);
+  }
+}

layouts/components/header.html

@@ -12,14 +12,13 @@
       </a>
     </div>
 
-    <nav class="header-desktop">
+    <nav class="header-nav">
       <div class="nav-links">
-        <a class="format-bold" href="/about/">About</a>
-        <a class="format-bold" href="/developers/">Developers</a>
-        <a class="format-bold" href="/help/">Learn</a>
+        <a class="format-bold mobile-link" href="/about/">About</a>
+        <a class="format-bold mobile-link" href="/developers/">Developers</a>
+        <a class="format-bold mobile-link" href="/help/">Learn</a>
       </div>
-
-      <div class="search-container">
+      <div class="search-container mobile-link">
         <form
           class="site-search"
           id="search-form"
@@ -36,7 +35,7 @@
         </form>
       </div>
 
-      <a class="header-button format-bold" href="/install/">
+      <a class="header-button format-bold mobile-link" href="/install/">
         <span class="get-started format-bold">
           Get Started
           <svg
@@ -57,5 +56,14 @@
         </span>
       </a>
     </nav>
+
+    <div class="nav-mobile">
+      <h6>Menu</h6>
+      <div class="hamburger">
+        <span class="bar"></span>
+        <span class="bar"></span>
+        <span class="bar"></span>
+      </div>
+    </div>
   </div>
 </header>