From 98348f2627ce9558e9fb44effeb0be95438c721a Mon Sep 17 00:00:00 2001
From: Benno Tielen <Benno@tielen.nl>
Date: Tue, 11 Feb 2025 10:17:37 +0100
Subject: [PATCH] fix: mobile menu

---
 src/components/Menu/Menu.stories.ts    |  2 +-
 src/components/Menu/Menu.tsx           | 17 +++++++++++++----
 src/components/Menu/styles.module.scss |  4 ++++
 3 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/src/components/Menu/Menu.stories.ts b/src/components/Menu/Menu.stories.ts
index 18cf288..734c104 100644
--- a/src/components/Menu/Menu.stories.ts
+++ b/src/components/Menu/Menu.stories.ts
@@ -14,7 +14,7 @@ export const Default: Story = {
       leftItems: [
         {
           text: 'Home',
-          href: '/'
+          href: 'https://disney.com'
         },
         {
           text: 'Gemeinschaft finden',
diff --git a/src/components/Menu/Menu.tsx b/src/components/Menu/Menu.tsx
index d4dda37..dbc38f6 100644
--- a/src/components/Menu/Menu.tsx
+++ b/src/components/Menu/Menu.tsx
@@ -9,6 +9,7 @@ import { Logo } from '@/components/Logo/Logo'
 import { useCallback, useState } from 'react'
 import { MegaMenu } from '@/components/MegaMenu/MegaMenu'
 import { CollapsibleArrow } from '@/components/CollapsibleArrow/CollapsibleArrow'
+import Link from 'next/link'
 
 type MenuItemProps = MenuItemType & {
   onItemClick?: () => void
@@ -30,13 +31,16 @@ const MenuItem = ({text, href, display = "normal", megaMenu, onItemClick}: MenuI
 
   return (
     <span
-      className={styles.menuItem}
       onMouseEnter={() => setIsActive(true)}
       onMouseLeave={() => setIsActive(false)}
     >
-      <a className={className} href={href}>
+      <Link
+        className={className}
+        href={href || ""}
+        onClick={() => href ? itemClicked() : setIsActive(!isActive)}
+      >
         {text} {megaMenu && <CollapsibleArrow direction={isActive ? "UP" : "DOWN"} stroke={1.5} /> }
-      </a>
+      </Link>
 
       {megaMenu &&
         <div
@@ -92,7 +96,12 @@ export const Menu = ({menu}: MenuProps) => {
     <>
       <nav className={classNames(styles.nav, {[styles.full]: displayMenuMobile})}>
         <div className={styles.navMobile}>
-          <Logo withText={false} height={30} color={"#426156"}/>
+          <Link
+            href={"/"} onClick={() => setDisplayMenuMobile(false)}
+            className={styles.logoLink}
+          >
+            <Logo withText={false} height={30} color={"#426156"}/>
+          </Link>
           <Image
             src={MenuIcon}
             width={25}
diff --git a/src/components/Menu/styles.module.scss b/src/components/Menu/styles.module.scss
index 469fe22..8477adf 100644
--- a/src/components/Menu/styles.module.scss
+++ b/src/components/Menu/styles.module.scss
@@ -60,6 +60,10 @@
   cursor: pointer;
 }
 
+.logoLink {
+  height: 30px;
+}
+
 .megaMenu {
   position: fixed;
   top: 62px;