refactor: opprydning etter pr

fremtind · Feb 4, 2025 · da46ba5 · da46ba5
1 parent 03962cb
commit da46ba5
Show file tree

Hide file tree

Showing 13 changed files with 158 additions and 286 deletions.
diff --git a/.../(frontend)/komponenter/oversikt/page.tsx → ...l/src/app/(frontend)/komponenter/page.tsx b/.../(frontend)/komponenter/oversikt/page.tsx → ...l/src/app/(frontend)/komponenter/page.tsx
diff --git a/ny-portal/src/app/(frontend)/layout.tsx b/ny-portal/src/app/(frontend)/layout.tsx
@@ -1,8 +1,7 @@
 import Link from "next/link";
-import { Navigation } from "@/components/Navigation/Navigation";
+import { Navigation } from "@/components/navigation";
 import "./global.scss";
 import styles from "./layout.module.scss";
-import { CookieConsent } from "@/components/CookieConsent/CookieConsent";
 
 interface Props {
     children: React.ReactNode;
@@ -21,21 +20,20 @@ export default function PortalLayout({ children }: Props) {
                 </Link>
                 <div className={styles.layout}>
                     <Navigation />
-                    <CookieConsent>
-                        <main
-                            className={styles.layout__content}
-                            style={
-                                {
-                                    "--scrollbar-width": `${
-                                        /* scrollbarWidth */ 6
-                                    }px`,
-                                } as React.CSSProperties
-                            }
-                        >
-                            {children}
-                        </main>
-                        <div className={styles.layout__footer}>
-                            {/* <Footer
+                    <main
+                        className={styles.layout__content}
+                        style={
+                            {
+                                "--scrollbar-width": `${
+                                    /* scrollbarWidth */ 6
+                                }px`,
+                            } as React.CSSProperties
+                        }
+                    >
+                        {children}
+                    </main>
+                    <div className={styles.layout__footer}>
+                        {/* <Footer
                 heading="Jøkul er designsystemet til Fremtind Forsikring"
                 links={[
                   {
@@ -60,8 +58,7 @@ export default function PortalLayout({ children }: Props) {
                   },
                 ]}
               /> */}
-                        </div>
-                    </CookieConsent>
+                    </div>
                 </div>
             </body>
         </html>

diff --git a/ny-portal/src/components/CookieConsent/CookieConsent.tsx b/ny-portal/src/components/CookieConsent/CookieConsent.tsx
diff --git a/ny-portal/src/components/Navigation/Navigation.tsx b/ny-portal/src/components/Navigation/Navigation.tsx
@@ -2,29 +2,27 @@ import { Link } from "@fremtind/jokul";
 import { clsx } from "clsx";
 import styles from "./navigation.module.scss";
 import { NavigationMenu } from "./NavigationMenu";
-import { Search } from "./NavigationSearch";
+import { NavigationSearch } from "./NavigationSearch";
 
 export async function Navigation() {
     return (
-        <div className={clsx(styles.navigation)}>
-            <nav>
-                <header className={styles["navigation__header"]}>
-                    <div className={styles["navigation__headerColumn"]}>
-                        <Link className={styles["navigation__home"]} href="/">
-                            Jøkul
-                        </Link>
-                    </div>
-                </header>
+        <header className={styles["navigation__header"]}>
+            <nav className={clsx(styles.navigation)}>
+                <div className={styles["navigation__headerColumn"]}>
+                    <Link className={styles["navigation__home"]} href="/">
+                        Jøkul
+                    </Link>
+                </div>
                 <div
                     className={clsx(
                         styles.navigation__menu,
                         styles["navigation-menu"],
                     )}
                 >
-                    <Search />
+                    <NavigationSearch />
                     <NavigationMenu />
                 </div>
             </nav>
-        </div>
+        </header>
     );
 }
diff --git a/ny-portal/src/components/Navigation/NavigationMenu.tsx b/ny-portal/src/components/Navigation/NavigationMenu.tsx
@@ -1,5 +1,6 @@
 import { getPayload } from "payload";
 import { useId } from "react";
+import { NavigationMenuLink } from "./NavigationMenuLink";
 import { NavigationMenuNested } from "./NavigationMenuNested";
 import configPromise from "@/payload.config";
 
@@ -13,7 +14,7 @@ type NavItem = {
 
 export type NavChildItem = {
     title: string;
-    slug?: string | null;
+    slug: string;
 };
 
 const navItems: NavItem[] = [
@@ -26,7 +27,6 @@ const navItems: NavItem[] = [
 
 export const NavigationMenu = async () => {
     const navId = useId();
-    const burgerId = useId();
 
     const payload = await getPayload({
         config: configPromise,
@@ -44,14 +44,14 @@ export const NavigationMenu = async () => {
         komponenter: [
             {
                 title: "Oversikt",
-                slug: "oversikt",
+                slug: "",
             },
             ...components,
         ],
     };
 
     return (
-        <ul id={navId} aria-labelledby={burgerId} role="group">
+        <ul id={navId}>
             {navItems.map((item) => {
                 if (item.hasChildren) {
                     return (
@@ -64,7 +64,14 @@ export const NavigationMenu = async () => {
                     );
                 }
 
-                return <li key={item.title}></li>;
+                return (
+                    <li key={item.title}>
+                        <NavigationMenuLink
+                            label={item.title}
+                            path={item.rootPath}
+                        />
+                    </li>
+                );
             })}
         </ul>
     );

diff --git a/ny-portal/src/components/Navigation/NavigationMenuButton.tsx b/ny-portal/src/components/Navigation/NavigationMenuButton.tsx
@@ -1,20 +1,18 @@
 import { ChevronRightIcon } from "@fremtind/jokul";
-import cn from "classnames";
+import { clsx } from "clsx";
 import type { FC, HTMLAttributes } from "react";
 import styles from "./navigation-menu-item.module.scss";
 
 export interface NavigationMenuButtonProps
-    extends HTMLAttributes<HTMLButtonElement | HTMLAnchorElement> {
-    linkTo?: string;
-}
+    extends HTMLAttributes<HTMLButtonElement | HTMLAnchorElement> {}
 
 export const NavigationMenuButton: FC<NavigationMenuButtonProps> = (props) => {
-    const { className, children, linkTo, ...buttonProps } = props;
+    const { className, children, ...buttonProps } = props;
 
     return (
         <button
             {...buttonProps}
-            className={cn(styles["navigation-menu-item"], className)}
+            className={clsx(styles["navigation-menu-item"], className)}
         >
             {children}
             <ChevronRightIcon

diff --git a/ny-portal/src/components/Navigation/NavigationMenuLink.tsx b/ny-portal/src/components/Navigation/NavigationMenuLink.tsx
@@ -1,8 +1,9 @@
-import cn from "classnames";
+"use client";
+
+import { clsx } from "clsx";
 import Link from "next/link";
 import { useCallback, type FC, type HTMLAttributes } from "react";
 import styles from "./navigation-menu-item.module.scss";
-import { useNavigationMenu } from "./NavigationMenuContext";
 
 type NavigationMenuLinkProps = HTMLAttributes<HTMLAnchorElement> & {
     label: string;
@@ -18,22 +19,19 @@ export const NavigationMenuLink: FC<NavigationMenuLinkProps> = ({
     onClick,
     ...restProps
 }) => {
-    const { setOpen } = useNavigationMenu();
-
-    const href = `/${parentPath}/${path}`;
+    const href = parentPath ? `/${parentPath}/${path}` : `/${path}`;
 
     const handleClick = useCallback(
         (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
-            setOpen(false);
             onClick?.(e);
         },
-        [onClick, setOpen],
+        [onClick],
     );
 
     return (
         <Link
             href={href}
-            className={cn(styles["navigation-menu-item"], className)}
+            className={clsx(styles["navigation-menu-item"], className)}
             onClick={handleClick}
             {...restProps}
         >

diff --git a/ny-portal/src/components/Navigation/NavigationMenuNested.tsx b/ny-portal/src/components/Navigation/NavigationMenuNested.tsx
@@ -1,9 +1,9 @@
 "use client";
 
-import { useAnimatedHeight, useId } from "@fremtind/jokul";
-import cn from "clsx";
+import { useAnimatedHeight } from "@fremtind/jokul";
+import { clsx } from "clsx";
 import { usePathname } from "next/navigation";
-import { FC, Fragment, useState } from "react";
+import { FC, Fragment, useState, useId } from "react";
 import styles from "./navigation.module.scss";
 import { NavChildItem } from "./NavigationMenu";
 import { NavigationMenuButton } from "./NavigationMenuButton";
@@ -20,7 +20,7 @@ export const NavigationMenuNested: FC<NavigationMenuNestedProps> = ({
     parentPath,
     items,
 }) => {
-    const menuId = useId("navigation-menu-nested");
+    const menuId = `navigation-menu-nested-${useId()}`;
     const pathname = usePathname();
     const [isOpen, setIsOpen] = useState(
         items.some((item) => pathname === `/${parentPath}/${item.slug}`),
@@ -38,7 +38,7 @@ export const NavigationMenuNested: FC<NavigationMenuNestedProps> = ({
                 {title}
             </NavigationMenuButton>
             <div
-                className={cn(
+                className={clsx(
                     styles["navigation-menu"],
                     styles["navigation-menu--nested"],
                 )}
@@ -56,7 +56,7 @@ export const NavigationMenuNested: FC<NavigationMenuNestedProps> = ({
                             <li key={item.slug}>
                                 <NavigationMenuLink
                                     label={item.title}
-                                    path={item.slug ?? ""}
+                                    path={item.slug}
                                     parentPath={parentPath}
                                     data-has-active-child={hasActiveChild}
                                 />

diff --git a/ny-portal/src/components/Navigation/NavigationSearch.tsx b/ny-portal/src/components/Navigation/NavigationSearch.tsx
@@ -5,7 +5,7 @@ import styles from "./navigation.module.scss";
 
 const onOpenSearch = () => {};
 
-export const Search = () => {
+export const NavigationSearch = () => {
     return (
         <form
             className={styles.navigation__search}

diff --git a/ny-portal/src/components/Navigation/index.ts b/ny-portal/src/components/Navigation/index.ts
@@ -0,0 +1,15 @@
+import { Navigation } from "./Navigation";
+import { NavigationMenu } from "./NavigationMenu";
+import { NavigationMenuButton } from "./NavigationMenuButton";
+import { NavigationMenuLink } from "./NavigationMenuLink";
+import { NavigationMenuNested } from "./NavigationMenuNested";
+import { NavigationSearch } from "./NavigationSearch";
+
+export {
+    Navigation,
+    NavigationMenu,
+    NavigationSearch,
+    NavigationMenuButton,
+    NavigationMenuLink,
+    NavigationMenuNested,
+};