From efe6d2b1a5122fc05e4e660d913e726c508305ee Mon Sep 17 00:00:00 2001
From: tresabhi <43380238+tresabhi@users.noreply.github.com>
Date: Thu, 24 Apr 2025 20:07:17 -0500
Subject: [PATCH] feat: better navbar background

---
 packages/website/src/components/Navbar.astro | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/packages/website/src/components/Navbar.astro b/packages/website/src/components/Navbar.astro
index 5eb5cf180..c92379e87 100644
--- a/packages/website/src/components/Navbar.astro
+++ b/packages/website/src/components/Navbar.astro
@@ -29,6 +29,16 @@ const strings = getStrings(locale);
     height: 100%;
   }
 
+  .navbar[data-expanded='false'] .content {
+    background-color: var(--black-a8);
+    backdrop-filter: blur(4rem);
+    box-shadow: var(--shadow-5);
+  }
+
+  .navbar[data-expanded='true'] .content {
+    background-color: var(--gray-1);
+  }
+
   .navbar[data-expanded='true'] *[data-closed] {
     display: none;
   }
@@ -64,11 +74,11 @@ const strings = getStrings(locale);
   }}
 >
   <Flex
+    className="content"
     width="100%"
     p={{ initial: '4', sm: '3' }}
     direction="column"
     align="center"
-    style={{ backgroundColor: Var('gray-1') }}
   >
     <Flex gap="4" direction="column" maxWidth="80rem" width="100%">
       <Flex align="center">
@@ -208,7 +218,7 @@ const strings = getStrings(locale);
                     justify="end"
                     flexGrow="1"
                     style={{
-                      background: `linear-gradient(90deg, transparent, ${Var('gray-1')})`,
+                      background: `linear-gradient(90deg, transparent, ${Var('gray-1')} 90%)`,
                     }}
                   >
                     {toolStrings.name}