New dropdown menu

app/(root)/arrangement/eventCardPaginated.tsx

@@ -70,7 +70,7 @@ const EventCardPaginated: Component<EventCardPaginatedProps> = ({
             className={"w-full sm:w-[550px]"}
             bottom={
                 showButton ? (
-                    <ButtonAndProgress loading={loading} onClick={fetchMoreEvents} />
+                    <ButtonAndProgress loading={loading} onPress={fetchMoreEvents} />
                 ) : undefined
             }
             {...props}>
@@ -81,15 +81,15 @@ const EventCardPaginated: Component<EventCardPaginatedProps> = ({
 
 export default EventCardPaginated
 
-const ButtonAndProgress: Component<{ loading: boolean; onClick: VoidFunction }> = ({
+const ButtonAndProgress: Component<{ loading: boolean; onPress: VoidFunction }> = ({
     loading,
-    onClick,
+    onPress,
 }) => {
     if (loading) {
         return <CircularProgressIndicator aria-label={"Laster inn flere arrangementer"} />
     }
     return (
-        <Button className={"w-fit"} onClick={onClick}>
+        <Button className={"w-fit"} onPress={onPress}>
             Se mer
         </Button>
     )

app/(root)/bedrifter/page.tsx

@@ -0,0 +1,25 @@
+import InfoPageContent from "@/components/omOss/InfoPageContent"
+import { getInfoSiderBySlug } from "@/sanity/queries/infoSider"
+import { type Metadata } from "next"
+
+export const metadata: Metadata = {
+    title: "For bedrifter | Root Linjeforening",
+    description: "Informasjon for bedrifter om Root Linjeforening",
+}
+
+export const revalidate = 30 // 30 sek
+
+/**
+ * Viser diverse informasjon om Root Linjeforeningen. Samt anne informasjon som er relevant for linjeforeningen.
+ */
+const BedrifterPage: AsyncPage = async () => {
+    const BedrifterPage = await getInfoSiderBySlug("for-bedrifter")
+
+    if (!BedrifterPage) {
+        return <div className="p-10 text-center">Fant ikke siden &quot;For bedrifter&quot;.</div>
+    }
+
+    return <InfoPageContent infoSider={[BedrifterPage]} />
+}
+
+export default BedrifterPage

app/(root)/globals.css

@@ -68,13 +68,13 @@ p:empty + p:empty {
     @apply min-h-[1px];
 }
 
-ul {
+/* ul {
     @apply list-disc pl-3.5;
-}
+} */
 
-ol {
+/* ol {
     @apply list-decimal pl-3.5;
-}
+} */
 
 br {
     @apply my-2 block;

app/(root)/globals.d.ts

@@ -64,7 +64,7 @@ interface ChildProps extends DefaultProps {
 }
 
 interface ButtonProps extends ChildProps {
-    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void
+    onPress?: (event: React.MouseEvent<HTMLButtonElement>) => void
     type?: "button" | "submit" | "reset"
     disabled?: boolean
     endContent?: React.ReactNode

app/(root)/om-root/page.tsx

@@ -0,0 +1,25 @@
+import InfoPageContent from "@/components/omOss/InfoPageContent"
+import { getInfoSiderBySlug } from "@/sanity/queries/infoSider"
+import { type Metadata } from "next"
+
+export const metadata: Metadata = {
+    title: "Om Root | Root Linjeforening",
+    description: "Informasjon om Root Linjeforening",
+}
+
+export const revalidate = 30 // 30 sek
+
+/**
+ * Viser diverse informasjon om Root Linjeforeningen. Samt anne informasjon som er relevant for linjeforeningen.
+ */
+const OmRootPage: AsyncPage = async () => {
+    const omRootPage = await getInfoSiderBySlug("om-root")
+
+    if (!omRootPage) {
+        return <div className="p-10 text-center">Fant ikke siden &quot;Om Root&quot;.</div>
+    }
+
+    return <InfoPageContent infoSider={[omRootPage]} />
+}
+
+export default OmRootPage

app/(root)/soundboks-utleie/page.tsx

@@ -0,0 +1,25 @@
+import InfoPageContent from "@/components/omOss/InfoPageContent"
+import { getInfoSiderBySlug } from "@/sanity/queries/infoSider"
+import { type Metadata } from "next"
+
+export const metadata: Metadata = {
+    title: "Soundboks utleie | Root Linjeforening",
+    description: "Utleie av soundboksen til Root Linjeforening",
+}
+
+export const revalidate = 30 // 30 sek
+
+/**
+ * Viser diverse informasjon om Root Linjeforeningen. Samt anne informasjon som er relevant for linjeforeningen.
+ */
+const SoundboksUtleiePage: AsyncPage = async () => {
+    const SoundboksUtleiePage = await getInfoSiderBySlug("soundboks-utleie")
+
+    if (!SoundboksUtleiePage) {
+        return <div className="p-10 text-center">Fant ikke siden &quot;Soundboks utleie&quot;.</div>
+    }
+
+    return <InfoPageContent infoSider={[SoundboksUtleiePage]} />
+}
+
+export default SoundboksUtleiePage

app/(root)/styret/page.tsx

@@ -0,0 +1,25 @@
+import InfoPageContent from "@/components/omOss/InfoPageContent"
+import { getInfoSiderBySlug } from "@/sanity/queries/infoSider"
+import { type Metadata } from "next"
+
+export const metadata: Metadata = {
+    title: "Styret | Root Linjeforening",
+    description: "Informasjon om styret til Root Linjeforening",
+}
+
+export const revalidate = 30 // 30 sek
+
+/**
+ * Viser diverse informasjon om Root Linjeforeningen. Samt anne informasjon som er relevant for linjeforeningen.
+ */
+const StyretPage: AsyncPage = async () => {
+    const StyretPage = await getInfoSiderBySlug("styret")
+
+    if (!StyretPage) {
+        return <div className="p-10 text-center">Fant ikke siden &quot;Styret&quot;.</div>
+    }
+
+    return <InfoPageContent infoSider={[StyretPage]} />
+}
+
+export default StyretPage

components/buttons/button.tsx

@@ -1,5 +1,5 @@
 "use client"
-import { Button as _Button, Link } from "@heroui/react"
+import { Button as _Button, Link, type ButtonProps as HeroUIButtonProps, type PressEvent } from "@heroui/react"
 import { LinkIcon } from "@heroicons/react/24/outline"
 import { defaultIconSize } from "@/components/icons/icon"
 
@@ -11,7 +11,12 @@ const buttonClassNames = "min-w-[100px] bg-root-primary p-3 text-white"
  * @param className CSS-klassen til knappen
  * @param props Props som skal sendes til button-elementet, blant annet onClick, disabled, etc.
  */
-export const Button: Component<ButtonProps> = ({ children, className, ...props }) => (
+
+type RootButtonProps = HeroUIButtonProps & {
+    onPress?: (e: PressEvent) => void
+}
+
+export const Button: Component<RootButtonProps> = ({ children, className, ...props }) => (
     <_Button radius={"lg"} className={`${buttonClassNames} ${className}`} {...props}>
         {children}
     </_Button>

components/buttons/darkModeToggle.tsx

@@ -29,7 +29,7 @@ const DarkModeToggle = () => {
             {buttons.map(({ text, theme, icon }) => (
                 <Button
                     key={theme}
-                    onClick={() => setTheme(theme)}
+                    onPress={() => setTheme(theme)}
                     size="sm"
                     aria-label={text}
                     className={selectedTheme === theme ? "bg-root-primary text-white" : undefined}>

components/buttons/icsButton.tsx

@@ -31,7 +31,7 @@ const IcsButton: Component<IcsButtonProps> = ({
     }
 
     return (
-        <Button onClick={download} {...props}>
+        <Button onPress={download} {...props}>
             Legg til i kalender
             <ArrowDownOnSquareIcon width={defaultIconSize} />
         </Button>

components/dropdown/dropdown.tsx

@@ -6,6 +6,7 @@ import {
     DropdownMenu,
     DropdownItem,
     Button,
+    type ButtonProps as HeroUIButtonProps,
 } from "@heroui/react"
 
 export type Key = string | number
@@ -16,7 +17,7 @@ interface DropdownProps extends DefaultProps {
     items?: Item[]
     label?: string
     onAction?: (key: Key) => void
-    buttonProps?: ButtonProps
+    buttonProps?: HeroUIButtonProps
 }
 
 const Dropdown: Component<DropdownProps> = ({

components/floatingMenu.tsx

@@ -17,15 +17,15 @@ const FloatingMenu: Component<ChildProps> = ({ children, className, ...props })
     const menuRef = useRef<HTMLDivElement>(null)
 
     useEffect(() => {
-        function onClick(e: MouseEvent): void {
+        function onPress(e: MouseEvent): void {
             if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
                 toggleMenu(false)
             }
         }
 
-        document.addEventListener("click", onClick)
-        return () => document.removeEventListener("click", onClick)
-    }, [])
+        document.addEventListener("click", onPress)
+        return () => document.removeEventListener("click", onPress)
+    }, [toggleMenu])
 
     return (
         <div ref={menuRef} className={`fixed left-0 z-50 ${className}`} {...props}>

components/header/header.tsx

@@ -8,6 +8,11 @@ import {
     NavbarMenuToggle,
     NavbarMenu,
     NavbarMenuItem,
+    Dropdown,
+    DropdownTrigger,
+    DropdownMenu,
+    DropdownItem,
+    Button as HeroUIButton
 } from "@heroui/react"
 import { useEffect, useState } from "react"
 import Image from "next/image"
@@ -66,18 +71,46 @@ const Header: Component = () => {
             </NavbarBrand>
             {/*Vanlig meny - Vises ikke på små skjermer*/}
             <NavbarContent className={"hidden gap-4 md:flex"} justify={"end"}>
-                {paths.map(item => (
-                    <NavbarItem key={item.path} isActive={item.path === currentPath}>
-                        <Link
-                            className={`${
-                                item.path === currentPath && "before:content-['/']"
-                            } w-full rounded-xl bg-gray-700/20 p-2 !text-white hover:text-white focus:!outline-white`}
-                            href={item.path}
-                            size={"lg"}>
-                            {item.name}
-                        </Link>
-                    </NavbarItem>
-                ))}
+                {paths.map((item, index) => {
+                    if (item.subpaths === undefined) {
+                        return <NavbarItem key={`${item}-${index}`} isActive={item.path === currentPath}>
+                                <Link
+                                    className={`${
+                                        item.path === currentPath && "before:content-['/']"
+                                    } w-full rounded-xl bg-gray-700/20 p-2 !text-white hover:text-white focus:!outline-white`}
+                                    href={item.path}
+                                    size={"lg"}>
+                                    {item.name}
+                                </Link>
+                            </NavbarItem>
+                    } else {
+                        // eslint-disable-next-line react/jsx-key
+                        return <Dropdown key={`${item}-${index}`}>
+                                    <NavbarItem>
+                                        <DropdownTrigger className="cursor-pointer">
+                                            <Link
+                                                className={"w-full rounded-xl bg-gray-700/20 p-2 !text-white hover:text-white focus:!outline-white"}
+                                                size={"lg"}>
+                                                {item.name}
+                                            </Link>
+                                        </DropdownTrigger>
+                                    </NavbarItem>
+                                    <DropdownMenu>
+                                        {item.subpaths.map(subitem =>
+                                            <DropdownItem
+                                                key={subitem.name}
+                                                description={subitem.description}
+                                                as={Link}
+                                                href={subitem.path}
+                                                className="w-full rounded-xl  bg-gray-700/20 p-2 !text-white hover:text-white focus:!outline-white"
+                                            >
+                                                {subitem.name}
+                                            </DropdownItem>
+                                        )}
+                                    </DropdownMenu>
+                                </Dropdown>
+                    }
+                })}
             </NavbarContent>
             {/*Hamburgermeny - Vises bare på små skjermer*/}
             <NavbarContent className={"md:hidden"} justify={"end"} as={"div"}>
@@ -104,7 +137,7 @@ const Header: Component = () => {
                     ))}
                 </div>
 
-                <Button className={"mx-auto w-fit"} onClick={() => setIsMenuOpen(false)}>
+                <Button className={"mx-auto w-fit"} onPress={() => setIsMenuOpen(false)}>
                     Lukk
                 </Button>
             </NavbarMenu>