From 9fcb0447eeccc951aec633e62a021c61c50be802 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Sun, 23 Nov 2025 22:18:24 +0100
Subject: [PATCH] fix: apply background and blur to nav element for mobile menu
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Move background styling to the nav element itself with rounded corners.
- Add bg-background/95 backdrop-blur-md to nav element
- Add rounded-lg and p-4 for better visual appearance
- Creates frosted glass card effect for the mobile menu

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 components/layout/Navbar.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/layout/Navbar.tsx b/components/layout/Navbar.tsx
index c938248..bb7cb7f 100644
--- a/components/layout/Navbar.tsx
+++ b/components/layout/Navbar.tsx
@@ -117,8 +117,8 @@ export function Navbar() {
       {/* Mobile Menu Drawer */}
       {mobileMenuOpen && (
         <div className="md:hidden fixed inset-0 top-16 z-50">
-          <div className="container px-4 py-6 bg-background/95 backdrop-blur-md h-full">
-            <nav className="flex flex-col gap-2">
+          <div className="container px-4 py-6">
+            <nav className="flex flex-col gap-2 bg-background/95 backdrop-blur-md rounded-lg p-4">
               {navItems.map((item) => (
                 <Link key={item.href} href={item.href}>
                   <Button