fix: mobile menu

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',

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}

src/components/Menu/styles.module.scss

@@ -60,6 +60,10 @@
   cursor: pointer;
 }
 
+.logoLink {
+  height: 30px;
+}
+
 .megaMenu {
   position: fixed;
   top: 62px;