From 530e50cee2cdfc06988a68ab1fd801e0eb18130d Mon Sep 17 00:00:00 2001
From: Aidan Traboulay <aidantraboulay13@gmail.com>
Date: Mon, 1 Apr 2024 00:44:07 -0400
Subject: [PATCH] Update navbar background

---
 src/components/Navbar/Menu.tsx   |  2 +-
 src/components/Navbar/Navbar.tsx |  2 +-
 src/index.css                    | 11 +++++++++++
 3 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/components/Navbar/Menu.tsx b/src/components/Navbar/Menu.tsx
index 015ba5d0..7e9e4636 100644
--- 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
index 7c501de8..59698a3e 100644
--- 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
index 1874493d..012d3adf 100644
--- 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;
+}
\ No newline at end of file