Add mobile navbar

CarletonComputerScienceSociety · Jun 29, 2024 · 4aa9616 · 4aa9616
1 parent 71eb9aa
commit 4aa9616
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 4 deletions.
diff --git a/src/components/Sidebar/Sidebar.astro b/src/components/Sidebar/Sidebar.astro
@@ -81,3 +81,23 @@ const endSections = [
     </div>
   </div>
 </div>
+
+<div class="Sidebar__mobile">
+  <div class="Sidebar__mobile__inner">
+    {
+      sections
+        .filter((section) => !section.disabled)
+        .slice(0, 4)
+        .map((section) => (
+          <a href={section.link}>
+            <div class={`Sidebar__item`}>
+              <div class="Sidebar__item__icon">
+                <i class={section.icon} />
+              </div>
+              <div class="Sidebar__item__title">{section.title}</div>
+            </div>
+          </a>
+        ))
+    }
+  </div>
+</div>
diff --git a/src/components/Sidebar/Sidebar.scss b/src/components/Sidebar/Sidebar.scss
@@ -76,4 +76,55 @@
       color: #000000;
     }
   }
+
+  display: block;
+
+  @media (max-width: 768px) {
+    display: none;
+
+    .Sidebar__item {
+      flex-direction: column;
+    }
+
+    .Sidebar__item__title {
+      font-size: 0.1rem;
+    }
+  }
+}
+
+.Sidebar__mobile {
+  display: none;
+  width: 100vw;
+  z-index: 1;
+  position: fixed;
+  background-color: #ffffff;
+  bottom: 0;
+  justify-content: center;
+  border-top-width: 0.1rem;
+  border-color: #f1f1f1;
+  border-style: solid;
+  @media (max-width: 768px) {
+    display: flex;
+  }
+
+  &__inner {
+    display: flex;
+    justify-content: space-between;
+    width: 50%;
+    min-width: 14rem;
+    padding: 0.5rem;
+    gap: 0.5rem;
+  }
+}
+
+@media (max-width: 768px) {
+  .Sidebar__item {
+    flex-direction: column;
+    justify-content: center;
+    gap: 0.2rem;
+  }
+  .Sidebar__item__title {
+    font-size: 0.6rem;
+    padding-left: 0rem;
+  }
 }
diff --git a/src/layouts/Content/Content.scss b/src/layouts/Content/Content.scss
@@ -7,10 +7,6 @@
   }
 
   @media (max-width: 768px) {
-    &__sidebar {
-      display: none;
-    }
-
     &__page {
       margin-left: 0;
     }