From b7d5258597952528012366f15785fc22d0d95fbd Mon Sep 17 00:00:00 2001
From: Benno Tielen <Benno@tielen.nl>
Date: Wed, 11 Dec 2024 14:21:45 +0100
Subject: [PATCH] fix: menu

---
 src/app/layout.tsx                                   | 4 ++--
 src/components/CollapsibleArrow/CollapsibleArrow.tsx | 5 +++--
 src/components/Menu/Menu.tsx                         | 3 ++-
 src/components/Menu/styles.module.scss               | 2 +-
 4 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 9e1b9d7..1af95b4 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -170,8 +170,8 @@ export default function RootLayout({
             text: 'Liebe leben',
             megaMenu: {
               text: {
-                quote: '',
-                source: ''
+                quote: 'Die Liebe ist langmütig, die Liebe ist gütig.',
+                source: '1. Kor 13-4'
               },
               groups: [
                 {
diff --git a/src/components/CollapsibleArrow/CollapsibleArrow.tsx b/src/components/CollapsibleArrow/CollapsibleArrow.tsx
index 6e3ed5f..ffe0406 100644
--- a/src/components/CollapsibleArrow/CollapsibleArrow.tsx
+++ b/src/components/CollapsibleArrow/CollapsibleArrow.tsx
@@ -4,10 +4,11 @@ import classNames from 'classnames'
 type CollapsibleArrowProps = {
   direction: "UP" | "DOWN",
   onClick?: () => void,
+  stroke?: number
 }
 
 
-export const CollapsibleArrow = ({direction, onClick}: CollapsibleArrowProps) => {
+export const CollapsibleArrow = ({direction, onClick, stroke}: CollapsibleArrowProps) => {
 
   const style = classNames({
     [styles.arrow]: true,
@@ -24,7 +25,7 @@ export const CollapsibleArrow = ({direction, onClick}: CollapsibleArrowProps) =>
       onClick={onClick}
     >
       <path d="M1 1L5.28326 8.50159C5.6627 9.16614 6.3373 9.16614 6.71674 8.50159L11 1" stroke="#426156"
-            strokeWidth="2" />
+            strokeWidth={stroke} />
     </svg>
   )
 }
\ No newline at end of file
diff --git a/src/components/Menu/Menu.tsx b/src/components/Menu/Menu.tsx
index 10a3c01..d4dda37 100644
--- a/src/components/Menu/Menu.tsx
+++ b/src/components/Menu/Menu.tsx
@@ -8,6 +8,7 @@ import {Menu as MenuType, MenuItem as MenuItemType} from "./menu.types"
 import { Logo } from '@/components/Logo/Logo'
 import { useCallback, useState } from 'react'
 import { MegaMenu } from '@/components/MegaMenu/MegaMenu'
+import { CollapsibleArrow } from '@/components/CollapsibleArrow/CollapsibleArrow'
 
 type MenuItemProps = MenuItemType & {
   onItemClick?: () => void
@@ -34,7 +35,7 @@ const MenuItem = ({text, href, display = "normal", megaMenu, onItemClick}: MenuI
       onMouseLeave={() => setIsActive(false)}
     >
       <a className={className} href={href}>
-        {text}
+        {text} {megaMenu && <CollapsibleArrow direction={isActive ? "UP" : "DOWN"} stroke={1.5} /> }
       </a>
 
       {megaMenu &&
diff --git a/src/components/Menu/styles.module.scss b/src/components/Menu/styles.module.scss
index 0ac7288..733e45c 100644
--- a/src/components/Menu/styles.module.scss
+++ b/src/components/Menu/styles.module.scss
@@ -75,7 +75,7 @@
   max-height: 1000px;
 }
 
-@media screen and (max-width: 800px) {
+@media screen and (max-width: 1000px) {
   .nav {
     flex-direction: column;
     padding: 15px 15px;