components/Navbar/Navbar.module.css

@@ -37,10 +37,6 @@
   display: block;
 }
 
-.nav-links button:focus-visible {
-  outline: 2px solid #000000;
-}
-
 .nav-links {
   background-color: inherit;
   position: fixed;
@@ -90,10 +86,6 @@
   padding: 12px 16px;
 }
 
-.nav-links li a:focus-visible {
-  outline: 2px solid #393636;
-}
-
 .nav-hamburger {
   width: 48px;
   height: 48px;
@@ -109,16 +101,6 @@
   -webkit-tap-highlight-color: transparent;
 }
 
-.nav-hamburger:focus {
-  outline: none;
-}
-
-.nav-hamburger:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 3px #000000;
-  border-radius: 6px;
-}
-
 .nav-hamburger span {
   position: absolute;
   right: 16px;
@@ -190,7 +172,6 @@
     display: flex;
     align-items: center;
     flex-direction: row;
-    visibility: visible;
     pointer-events: auto;
     transform: none;
     transition: none;

components/Navbar/Navbar.tsx

@@ -106,7 +106,18 @@ export default function Navbar() {
           />
         </Link>
       </div>
-
+      <button
+        type="button"
+        className={`${styles["nav-hamburger"]} ${menuOpen ? styles.open : ""}`}
+        onClick={toggleMenu}
+        aria-label={menuOpen ? "Menü schließen" : "Menü öffnen"}
+        aria-expanded={menuOpen}
+        aria-controls="Hauptmenü"
+      >
+        <span></span>
+        <span></span>
+        <span></span>
+      </button>
       <ul
         id="main-navigation"
         className={[
@@ -133,19 +144,6 @@ export default function Navbar() {
 
         {endLinks.map(renderNavLink)}
       </ul>
-
-      <button
-        type="button"
-        className={`${styles["nav-hamburger"]} ${menuOpen ? styles.open : ""}`}
-        onClick={toggleMenu}
-        aria-label={menuOpen ? "Menü schließen" : "Menü öffnen"}
-        aria-expanded={menuOpen}
-        aria-controls="main-navigation"
-      >
-        <span></span>
-        <span></span>
-        <span></span>
-      </button>
     </nav>
   );
 }

components/Navbar/NavbarSubMenu.module.css

@@ -10,16 +10,23 @@
   opacity: 1;
   overflow: hidden;
   pointer-events: none;
+  transform: translateY(-4px);
   transition:
     max-height 250ms ease,
-    opacity 180ms ease;
+    opacity 180ms ease,
+    transform 180ms ease;
   background-color: var(--nav-bg);
 }
 
+.nav-submenu[hidden] {
+  display: none !important;
+}
+
 .nav-submenu.open {
   max-height: var(--submenu-h);
   opacity: 1;
   pointer-events: auto;
+  transform: translateY(0);
 }
 
 .nav-submenu-inner {
@@ -69,6 +76,7 @@
     pointer-events: none;
     box-shadow: 0 4px 6px -6px rgb(0 0 0 / 30%);
     opacity: 0;
+    transform: translateY(-8px);
     transition:
       max-height 300ms,
       opacity 300ms,

components/Navbar/NavbarSubMenu.tsx

@@ -71,6 +71,7 @@ export const NavbarSubMenu: FC<Props> = ({
       <ul
         ref={subMenuRef}
         id={`submenu-${id}`}
+        hidden={!open}
         className={[
           styles["nav-submenu"],
           open ? styles.open : "",