Update navbar background

LaurierHawkHacks · Apr 1, 2024 · 530e50c · 530e50c
1 parent 8c75520
commit 530e50c
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 2 deletions.
diff --git a/src/components/Navbar/Menu.tsx b/src/components/Navbar/Menu.tsx
@@ -9,7 +9,7 @@ const Menu: React.FC<MenuProp> = ({ showMenu, hideMenu }) => {
     if (!showMenu) return;
 
     return (
-        <div className="oveflow-hidden fixed right-0 top-0 z-50 h-full w-full max-w-[65%] border px-10 py-24 backdrop-blur-xl">
+        <div className="oveflow-hidden fixed right-0 top-0 z-50 h-screen max-w-[65%] w-full border border-white bg-white/20 px-10 py-24 backdrop-blur-lg">
             <NavItems isHorizontal={false} handleClick={hideMenu} />
 
             <Button className="mt-20 block lg:hidden">

diff --git a/src/components/Navbar/Navbar.tsx b/src/components/Navbar/Navbar.tsx
@@ -14,7 +14,7 @@ const Navbar = () => {
     }, [showMenu]);
 
     return (
-        <nav className="gradient fixed top-0 z-50 flex h-fit w-full items-center justify-between p-3 px-10 lg:justify-normal">
+        <nav className="navbar fixed top-0 z-50 flex h-fit w-full items-center justify-between p-3 px-10 | lg:justify-normal">
             <div className="logo lg:mr-8">
                 <img
                     className="h-14 w-14"

diff --git a/src/index.css b/src/index.css
@@ -73,3 +73,14 @@ body {
         place-items: end center;
     }
 }
+
+.navbar::before {
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    backdrop-filter: blur(5px);
+    z-index: -1;
+}