From 1d74cae0c5f205201fd5e9f80be1487c8061cdd9 Mon Sep 17 00:00:00 2001 From: Luis Bazan Date: Tue, 24 Sep 2024 11:11:31 -0500 Subject: [PATCH] Change NavBar to use Custom Navbar --- .../general/organism/custom_navbar/index.tsx | 10 ++++----- .../general/organism/custom_navbar/style.css | 21 +++++++++---------- src/layouts/landing/index.astro | 12 +++++++++-- 3 files changed, 24 insertions(+), 19 deletions(-) diff --git a/src/components/general/organism/custom_navbar/index.tsx b/src/components/general/organism/custom_navbar/index.tsx index d9f66dd..9424ea9 100644 --- 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) {
@@ -41,8 +39,8 @@ function CustomNavBar({ children, fixed, full }: Props) {
{children} diff --git a/src/components/general/organism/custom_navbar/style.css b/src/components/general/organism/custom_navbar/style.css index 5460fe3..c28719a 100644 --- 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 index 8dd2693..840c6b1 100644 --- 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; -
- +
+ + Home + About us + Teams + {/*Events*/} + Contact us + Staff +