Skip to content

Commit d2bd360

Browse files
mathiasunnelandmathiasunneland
authored
Merge pull request #234 from Project-insert-name/dropdown-fix
Fix dropdown for mobile in header.tsx
2 parents b2f6a57 + c078bb0 commit d2bd360

1 file changed

Lines changed: 85 additions & 39 deletions

File tree

‎components/header/header.tsx‎

Lines changed: 85 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import {
1212
DropdownTrigger,
1313
DropdownMenu,
1414
DropdownItem,
15-
Button as HeroUIButton
15+
Button as HeroUIButton,
1616
} from "@heroui/react"
1717
import { useEffect, useState } from "react"
1818
import Image from "next/image"
@@ -73,7 +73,10 @@ const Header: Component = () => {
7373
<NavbarContent className={"hidden gap-4 md:flex"} justify={"end"}>
7474
{paths.map((item, index) => {
7575
if (item.subpaths === undefined) {
76-
return <NavbarItem key={`${item}-${index}`} isActive={item.path === currentPath}>
76+
return (
77+
<NavbarItem
78+
key={`${item}-${index}`}
79+
isActive={item.path === currentPath}>
7780
<Link
7881
className={`${
7982
item.path === currentPath && "before:content-['/']"
@@ -83,32 +86,36 @@ const Header: Component = () => {
8386
{item.name}
8487
</Link>
8588
</NavbarItem>
89+
)
8690
} else {
8791
// eslint-disable-next-line react/jsx-key
88-
return <Dropdown key={`${item}-${index}`}>
89-
<NavbarItem>
90-
<DropdownTrigger className="cursor-pointer">
91-
<Link
92-
className={"w-full rounded-xl bg-gray-700/20 p-2 !text-white hover:text-white focus:!outline-white"}
93-
size={"lg"}>
94-
{item.name}
95-
</Link>
96-
</DropdownTrigger>
97-
</NavbarItem>
98-
<DropdownMenu>
99-
{item.subpaths.map(subitem =>
100-
<DropdownItem
101-
key={subitem.name}
102-
description={subitem.description}
103-
as={Link}
104-
href={subitem.path}
105-
className="w-full rounded-xl bg-gray-700/20 p-2 !text-white hover:text-white focus:!outline-white"
106-
>
107-
{subitem.name}
108-
</DropdownItem>
109-
)}
110-
</DropdownMenu>
111-
</Dropdown>
92+
return (
93+
<Dropdown key={`${item}-${index}`}>
94+
<NavbarItem>
95+
<DropdownTrigger className="cursor-pointer">
96+
<Link
97+
className={
98+
"w-full rounded-xl bg-gray-700/20 p-2 !text-white hover:text-white focus:!outline-white"
99+
}
100+
size={"lg"}>
101+
{item.name}
102+
</Link>
103+
</DropdownTrigger>
104+
</NavbarItem>
105+
<DropdownMenu>
106+
{item.subpaths.map(subitem => (
107+
<DropdownItem
108+
key={subitem.name}
109+
description={subitem.description}
110+
as={Link}
111+
href={subitem.path}
112+
className="w-full rounded-xl bg-gray-700/20 p-2 !text-white hover:text-white focus:!outline-white">
113+
{subitem.name}
114+
</DropdownItem>
115+
))}
116+
</DropdownMenu>
117+
</Dropdown>
118+
)
112119
}
113120
})}
114121
</NavbarContent>
@@ -121,20 +128,59 @@ const Header: Component = () => {
121128
</NavbarContent>
122129
{/*Innholdet i hamburgermeny - Vises bare på små skjermer*/}
123130
<NavbarMenu className={"z-101 flex h-3/4 flex-col justify-between py-20"}>
124-
<div>
125-
{paths.map((item, index) => (
126-
<NavbarMenuItem key={`${item}-${index}`} className={"my-1 w-fit list-none"}>
127-
<Link
128-
color={item.path === currentPath ? "primary" : "foreground"}
129-
className={"flex w-full items-center gap-2 text-2xl"}
130-
href={item.path}
131-
size={"lg"}>
132-
{item.icon}
131+
<div className="flex flex-col gap-2 px-4">
132+
{paths.map((item, index) => {
133+
if (!item.subpaths) {
134+
return (
135+
<NavbarMenuItem key={`${item.name}-${index}`} className="my-1">
136+
<Link
137+
href={item.path}
138+
className="flex w-full items-center gap-2 text-2xl text-white hover:text-root-primary"
139+
onPress={() => setIsMenuOpen(false)}>
140+
{item.icon}
141+
{item.name}
142+
</Link>
143+
</NavbarMenuItem>
144+
)
145+
}
146+
return (
147+
<div key={`${item.name}-${index}`} className="my-1">
148+
<details className="group [&_summary::-webkit-details-marker]:hidden">
149+
<summary className="flex cursor-pointer items-center justify-between text-2xl font-semibold text-white hover:text-root-primary">
150+
<span className="flex items-center gap-2">
151+
{item.icon}
152+
{item.name}
153+
</span>
154+
<svg
155+
className="h-5 w-5 transform transition-transform group-open:rotate-180"
156+
xmlns="http://www.w3.org/2000/svg"
157+
fill="none"
158+
viewBox="0 0 24 24"
159+
stroke="currentColor">
160+
<path
161+
strokeLinecap="round"
162+
strokeLinejoin="round"
163+
strokeWidth={2}
164+
d="M19 9l-7 7-7-7"
165+
/>
166+
</svg>
167+
</summary>
133168

134-
{item.name}
135-
</Link>
136-
</NavbarMenuItem>
137-
))}
169+
<div className="ml-6 mt-2 flex flex-col gap-1">
170+
{item.subpaths.map(subitem => (
171+
<Link
172+
key={subitem.name}
173+
href={subitem.path}
174+
className="text-lg text-gray-300 hover:text-white"
175+
onPress={() => setIsMenuOpen(false)}>
176+
{subitem.name}
177+
</Link>
178+
))}
179+
</div>
180+
</details>
181+
</div>
182+
)
183+
})}
138184
</div>
139185

140186
<Button className={"mx-auto w-fit"} onPress={() => setIsMenuOpen(false)}>

0 commit comments

Comments
 (0)