Change NavBar to use Custom Navbar

mtocommunity · Sep 24, 2024 · 1d74cae · 1d74cae
1 parent 2e7afda
commit 1d74cae
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 19 deletions.
diff --git a/src/components/general/organism/custom_navbar/index.tsx b/src/components/general/organism/custom_navbar/index.tsx
@@ -11,7 +11,7 @@ type Props = {
   full?: boolean;
 };
 
-function CustomNavBar({ children, fixed, full }: Props) {
+function CustomNavBar({ children, fixed = false, full }: Props) {
   const [toggle, setToggle] = useState(true);
 
   const handleToggle = () => {
@@ -23,9 +23,7 @@ function CustomNavBar({ children, fixed, full }: Props) {
       <header
         className={`flex justify-between items-center w-full h-14${
           fixed ? " fixed" : null
-        } top-0 px-4 transition-colors z-50 ${
-          !toggle ? "bg-mto_gray" : "bg-transparent"
-        } lg:bg-transparent lg:w-[95%] lg:mx-auto lg:top-6`}
+        } top-0 px-4 transition-colors z-50 lg:bg-transparent lg:w-[95%] lg:mx-auto lg:top-6`}
       >
         <a className="h-full flex items-centers" href="/">
           <MTOTransparentBackground className="h-full lg:h-[150%] aspect-square" />
@@ -41,8 +39,8 @@ function CustomNavBar({ children, fixed, full }: Props) {
         <nav className="hidden lg:flex nav-desktop">{children}</nav>
       </header>
       <div
-        className={`nav-mobile fixed w-full top-14 bg-mto_gray text-mto_blue_light z-20 flex-col items-center justify-between py-4 text-xl lg:hidden ${
-          toggle ? "hidden" : "flex"
+        className={`nav-mobile flex fixed w-full bg-mto_gray text-mto_blue_light z-20 flex-col items-center justify-between text-xl lg:hidden ${
+          !toggle ? "active" : ""
         }`}
       >
         {children}

diff --git a/src/components/general/organism/custom_navbar/style.css b/src/components/general/organism/custom_navbar/style.css
@@ -1,6 +1,14 @@
 .nav-mobile {
-  animation: dropDown 0.2s ease-in-out;
-  height: 33dvh;
+  height: 0;
+  overflow: hidden;
+  top: 0;
+  max-height: fit-content;
+  @apply pt-0 opacity-0 transition-all;
+}
+
+.active {
+  height: 100%;
+  @apply pb-8 gap-8 pt-14 opacity-100;
 }
 
 .nav-desktop {
@@ -29,12 +37,3 @@
     width: calc(100%-2.5rem);
   }
 }
-
-@keyframes dropDown {
-  0% {
-    height: 0;
-  }
-  100% {
-    height: 33dvh;
-  }
-}
diff --git a/src/layouts/landing/index.astro b/src/layouts/landing/index.astro
@@ -1,5 +1,6 @@
 ---
 import Footer from "../../components/general/footer.astro";
+import CustomNavBar from "../../components/general/organism/custom_navbar";
 import NavBar from "../../components/general/organism/navbar";
 
 import "../../styles.css";
@@ -43,8 +44,15 @@ const { title } = Astro.props;
     <meta name="twitter:image" content="/android-chrome-512x512.png" />
   </head>
   <body class="bg-mto_dark_gray w-full">
-    <div class="w-auto">
-      <NavBar client:load />
+    <div class="w-auto pt-14">
+      <CustomNavBar fixed client:load>
+        <a href="/#home">Home</a>
+        <a href="/#about-us">About us</a>
+        <a href="/#teams">Teams</a>
+        {/*<a href="/#events">Events</a>*/}
+        <a href="/#contactus">Contact us</a>
+        <a href="/staff">Staff</a>
+      </CustomNavBar>
       <slot />
       <Footer />
     </div>