From ff6cb12162e08888ec3465c888edf3c97b3349aa Mon Sep 17 00:00:00 2001
From: Engin Bektas <engin.bektas@envu.de>
Date: Sat, 2 May 2026 13:43:30 +0200
Subject: [PATCH] Navbar angepasst

---
 components/Navbar/NavbarSubMenu.module.css |  9 +++------
 hooks/useToggleBodyOverflow.ts             | 14 +++++++++-----
 2 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/components/Navbar/NavbarSubMenu.module.css b/components/Navbar/NavbarSubMenu.module.css
index 872677b..3ed5e60 100644
--- a/components/Navbar/NavbarSubMenu.module.css
+++ b/components/Navbar/NavbarSubMenu.module.css
@@ -10,11 +10,9 @@
   opacity: 1;
   overflow: hidden;
   pointer-events: none;
-  transform: translateY(-4px);
   transition:
     max-height 250ms ease,
-    opacity 180ms ease,
-    transform 180ms ease;
+    opacity 180ms ease;
   background-color: var(--nav-bg);
 }
 
@@ -22,7 +20,6 @@
   max-height: var(--submenu-h);
   opacity: 1;
   pointer-events: auto;
-  transform: translateY(0);
 }
 
 .nav-submenu-inner {
@@ -95,10 +92,10 @@
     margin: 0 auto;
     display: grid;
     grid-auto-flow: column;
-    grid-template-rows: repeat(5, auto);
+    grid-template-rows: repeat(3, auto);
     grid-auto-columns: minmax(180px, max-content);
     column-gap: 48px;
-    row-gap: 4px;
+    row-gap: 16px;
     justify-content: start;
     align-items: start;
     padding: 24px 24px 48px 24px;
diff --git a/hooks/useToggleBodyOverflow.ts b/hooks/useToggleBodyOverflow.ts
index 7cb432d..24292da 100644
--- a/hooks/useToggleBodyOverflow.ts
+++ b/hooks/useToggleBodyOverflow.ts
@@ -11,15 +11,19 @@ export function useToggleBodyOverflow(locked: boolean, options: Options = {}) {
 
   useEffect(() => {
     const root = document.documentElement;
+    const body = document.body;
 
-    root.classList.toggle(className, locked);
-
-    const prevOverflow = document.body.style.overflow;
-    document.body.style.overflow = locked ? "hidden" : "";
+    if (locked) {
+      root.classList.add(className);
+      body.style.overflow = "hidden";
+    } else {
+      root.classList.remove(className);
+      body.style.overflow = "";
+    }
 
     return () => {
       root.classList.remove(className);
-      document.body.style.overflow = prevOverflow;
+      body.style.overflow = "";
     };
   }, [locked, className]);
 }