Fixed Navbar bugs

3 files changed, 189 insertions, 29 deletions

diff --git a/src/components/Header.astro b/src/components/Header.astro
index af08977..ec91fcc 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -113,20 +113,10 @@ import 'bootstrap/dist/css/bootstrap.css'
 
     @media screen and (max-width: 982px) {
         .head{
-            margin-top: 8vh;
+            margin-top: 6vh;
+            /* margin-top: 8vh; */
         }
     }
 
-    /* @media screen and (max-width: 580px){
-        .head{
-            margin-top: 7vw;
-        }
-        .nav{
-            margin: 1vh;
-        }
-    } */
-
-
-
   </style>
 
diff --git a/src/components/Navbar.astro b/src/components/Navbar.astro
index 425b65c..ea76d9f 100644
--- a/src/components/Navbar.astro
+++ b/src/components/Navbar.astro
@@ -41,8 +41,8 @@ const routes : Routes[] = [
     ))
   }
 </div>
-  <style>
-  
+<style>
+
     .hamburger-navbar{
       position: fixed;
       right: 0%;
@@ -54,7 +54,7 @@ const routes : Routes[] = [
       display: none;
       width: 100%;
       z-index: 5;
-      top: 22%;
+      top: 20%;
       position: sticky;
       right: -450px;
       flex-direction: column;
@@ -66,7 +66,8 @@ const routes : Routes[] = [
       font-size: 2.9vh;
       text-decoration: none;
       color: black;
-      font-weight: 400;
+      /* color: blue; */
+      font-weight: 500;
       padding: 1vh 4vh;
       z-index: 1001;
     }
@@ -142,6 +143,7 @@ const routes : Routes[] = [
     }
     .navbar a {
       font-size: 2.2vh;
+      color: blue;
       font-weight:600;
       text-decoration: none;
       padding: 1.7vh 1.5vw;
@@ -151,8 +153,10 @@ const routes : Routes[] = [
       color: white;
     }
 
-    @media screen and (max-width: 550px){
-      
+    @media screen and (max-width: 465px){
+      nav{
+        width: 100vh;
+      }
     }
 
     @media screen and (max-width: 613px) {
@@ -166,23 +170,24 @@ const routes : Routes[] = [
 
     @media screen and (max-width: 627px){
       .off-screen-menu{
-        top: 18%;
+        /* top: 17.5vh; */
+        top: 15.8vh;
       }
     }
-    @media screen and (max-width: 770px){
+    @media screen and (min-width: 628px) and (max-width: 768px){
       .off-screen-menu{
-        top: 20%;
-      }
-      .active{
-        top: 13%;
+        top: 17vh;
       }
     }
     @media screen and (min-width: 772px) and (max-width: 982px){
-      .nav{
+      nav{
         padding: 1.3rem;
       }
       .active{
-        top: 12vh;
+        top: 21vh;
+      }
+      nav{
+        width: 100vw;
       }
     }
     @media screen and (max-width: 982px){
@@ -192,9 +197,6 @@ const routes : Routes[] = [
       .hamburger-navbar{
         display: block;
       }
-      nav{
-        width: 100vh;
-      }
       
     }
     @media screen and (min-width: 983px){
diff --git a/src/components/TestNavbar.astro b/src/components/TestNavbar.astro
new file mode 100644
index 0000000..3e3aa5c
--- /dev/null
+++ b/src/components/TestNavbar.astro
@@ -0,0 +1,168 @@
+<!-- ---
+interface Routes {
+  path: string;
+  name: string;
+}
+
+const routes : Routes[] = [
+  { path: '/', name: 'Home' },
+  { path: '#purpose', name: 'About' },
+  { path: '/resources', name: 'Resources' },
+//   { path: '/schedule', name: 'Schedule' },
+//   { path: '#register', name: 'Register' },
+//   { path: '#partners', name: 'Partners' },
+//   { path: '#contact-us', name: 'Contact Us' },
+
+]
+---
+
+<header class="header">
+    <nav class="navbar">
+        <ul class="nav-menu">
+            {
+            routes.map(route => (
+                <li class="nav-item">
+                    <a href={route.path} class="nav-link">{route.name}</a>
+                </li>
+            ))
+            }
+        </ul>
+        <div class="hamburger">
+            <span class="bar"></span>
+            <span class="bar"></span>
+            <span class="bar"></span>
+        </div>
+    </nav>
+</header>
+
+
+<style>
+    * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+    }
+
+    html {
+        font-size: 62.5%;
+        font-family: 'Roboto', sans-serif;
+    }
+
+    li {
+        list-style: none;
+    }
+
+    a {
+        text-decoration: none;
+    }
+
+    .header{
+        border-bottom: 1px solid #E2E8F0;
+        background-color: rgb(252, 230, 188);
+    }
+
+    .navbar {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 1rem 1.5rem;
+    }
+
+    .hamburger {
+        display: none;
+    }
+
+    .bar {
+        display: block;
+        width: 25px;
+        height: 3px;
+        margin: 5px auto;
+        -webkit-transition: all 0.3s ease-in-out;
+        transition: all 0.3s ease-in-out;
+        background-color: #101010;
+    }
+    .nav-menu {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    .nav-item {
+        /* margin-left: 5rem; */
+    }
+
+    .nav-link{
+        /* font-size: 1.6rem;
+        font-weight: 400; */
+        padding: 1.5vh 3vh;
+        color: rgb(24, 94, 223);
+        /* color: #475569; */
+        font-size: 2.4vh;
+        font-weight:600;
+    }
+
+    .nav-link:hover{
+        /* color: #482ff7; */
+        color: white;
+        background-color: rgb(6, 6, 88);
+    }
+
+    .nav-logo {
+        font-size: 2.1rem;
+        font-weight: 500;
+        color: #482ff7;
+    }
+
+    @media only screen and (max-width: 768px) {
+    .nav-menu {
+        position: fixed;
+        left: -100%;
+        top: 5rem;
+        flex-direction: column;
+        background-color: #fff;
+        width: 100%;
+        border-radius: 10px;
+        text-align: center;
+        transition: 0.3s;
+        box-shadow:
+            0 10px 27px rgba(0, 0, 0, 0.05);
+    }
+
+    .nav-menu.active {
+        left: 0;
+    }
+
+    .nav-item {
+        margin: 2.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);
+    }
+
+}
+</style>
+
+<script>
+    function showSidebar(){
+      const sidebar : any = document.querySelector('.sidebar')
+      sidebar.style.display = 'flex'
+    }
+    function hideSidebar(){
+      const sidebar : any  = document.querySelector('.sidebar')
+      sidebar.style.display = 'none'
+    }
+  </script> -->
\ No newline at end of file