bennot/church-website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

fix: menu

Browse source
This commit is contained in:
Benno Tielen 2024-12-11 14:21:45 +01:00
parent a5366a19ee
commit b7d5258597
4 changed files with 8 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/app/layout.tsx
View file

@ -170,8 +170,8 @@ export default function RootLayout({
text: 'Liebe leben', text: 'Liebe leben',
megaMenu: { megaMenu: {
text: { text: {
quote: '', quote: 'Die Liebe ist langmütig, die Liebe ist gütig.',
source: '' source: '1. Kor 13-4'
}, },
groups: [ groups: [
{ {

5
src/components/CollapsibleArrow/CollapsibleArrow.tsx
View file

@ -4,10 +4,11 @@ import classNames from 'classnames'
type CollapsibleArrowProps = { type CollapsibleArrowProps = {
direction: "UP" | "DOWN", direction: "UP" | "DOWN",
onClick?: () => void, onClick?: () => void,
stroke?: number
} }
export const CollapsibleArrow = ({direction, onClick}: CollapsibleArrowProps) => { export const CollapsibleArrow = ({direction, onClick, stroke}: CollapsibleArrowProps) => {
const style = classNames({ const style = classNames({
[styles.arrow]: true, [styles.arrow]: true,
@ -24,7 +25,7 @@ export const CollapsibleArrow = ({direction, onClick}: CollapsibleArrowProps) =>
onClick={onClick} onClick={onClick}
> >
<path d="M1 1L5.28326 8.50159C5.6627 9.16614 6.3373 9.16614 6.71674 8.50159L11 1" stroke="#426156" <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> </svg>
) )
} }

3
src/components/Menu/Menu.tsx
View file

@ -8,6 +8,7 @@ import {Menu as MenuType, MenuItem as MenuItemType} from "./menu.types"
import { Logo } from '@/components/Logo/Logo' import { Logo } from '@/components/Logo/Logo'
import { useCallback, useState } from 'react' import { useCallback, useState } from 'react'
import { MegaMenu } from '@/components/MegaMenu/MegaMenu' import { MegaMenu } from '@/components/MegaMenu/MegaMenu'
import { CollapsibleArrow } from '@/components/CollapsibleArrow/CollapsibleArrow'
type MenuItemProps = MenuItemType & { type MenuItemProps = MenuItemType & {
onItemClick?: () => void onItemClick?: () => void
@ -34,7 +35,7 @@ const MenuItem = ({text, href, display = "normal", megaMenu, onItemClick}: MenuI
onMouseLeave={() => setIsActive(false)} onMouseLeave={() => setIsActive(false)}
> >
<a className={className} href={href}> <a className={className} href={href}>
{text} {text} {megaMenu && <CollapsibleArrow direction={isActive ? "UP" : "DOWN"} stroke={1.5} /> }
</a> </a>
{megaMenu && {megaMenu &&

2
src/components/Menu/styles.module.scss
View file

@ -75,7 +75,7 @@
max-height: 1000px; max-height: 1000px;
} }
@media screen and (max-width: 800px) { @media screen and (max-width: 1000px) {
.nav { .nav {
flex-direction: column; flex-direction: column;
padding: 15px 15px; padding: 15px 15px;