@conduction/components 1.0.7 → 1.0.10

package/lib/components/denhaag-wrappers/paginations/Paginations.css

@@ -0,0 +1,10 @@
+.denhaag-pagination {
+  display: flex;
+  justify-content: center;
+  padding: var(--nlportal-space-inline-md);
+}
+
+.denhaag-pagination__link {
+  padding-right: var(--nlportal-space-inline-md);
+  text-decoration: none;
+}

package/lib/components/denhaag-wrappers/paginations/Paginations.d.ts

@@ -0,0 +1,20 @@
+/**
+ * This is a wrapper element based on https://nl-design-system.github.io/denhaag/?path=/docs/css-navigation-pagination--default-story
+ *
+ * IMPORTANT: DO NOT MAKE CHANGES TO THIS FILE, AS ALL CHANGES WILL BE LOST UPON PACKAGE IMPLEMENTATION
+ *
+ * Note: we do not use css modules here due to this component being a wrapper
+ */
+import * as React from "react";
+import "./Paginations.css";
+interface PaginationsProps {
+    pages: {
+        ariaLabel: string;
+        label: string;
+        href: string;
+    }[];
+    nextPageHref: string;
+    previousPageHref: string;
+}
+export declare const Paginations: React.FC<PaginationsProps>;
+export {};

package/lib/components/denhaag-wrappers/paginations/Paginations.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "./Paginations.css";
+import { Link } from "gatsby";
+export const Paginations = ({ pages, previousPageHref, nextPageHref }) => {
+    return (_jsxs("nav", { className: "denhaag-pagination", children: [_jsx(PreviousPage, { href: previousPageHref }), _jsx("span", { className: "denhaag-pagination__links", role: "group", children: pages.map((page) => {
+                    return (_jsx(Link, { "aria-label": page.ariaLabel, className: "denhaag-pagination__link", to: page.href, children: page.label }));
+                }) }), _jsx(NextPage, { href: nextPageHref })] }));
+};
+const PreviousPage = ({ href }) => (_jsx(Link, { "aria-label": "Previous page", className: "denhaag-pagination__link denhaag-pagination__link--arrow", to: href, rel: "prev", children: _jsx("svg", { "aria-hidden": "true", className: "denhaag-icon", fill: "none", height: "1em", viewBox: "0 0 7 12", width: "1em", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M4.9921 10.8143C5.36382 11.1914 5.97222 11.1914 6.34393 10.8143C6.7079 10.4451 6.70822 9.8521 6.34466 9.48248L3.36315 6.45123C2.98039 6.06209 2.98039 5.43791 3.36315 5.04877L6.34466 2.01752C6.70822 1.6479 6.7079 1.05492 6.34394 0.685696C5.97222 0.308599 5.36382 0.308599 4.9921 0.685695L0.692003 5.04799C0.308224 5.43732 0.308224 6.06268 0.692003 6.45201L4.9921 10.8143Z", fill: "currentColor" }) }) }));
+const NextPage = ({ href }) => (_jsx(Link, { "aria-label": "Next page", className: "denhaag-pagination__link denhaag-pagination__link--arrow", to: href, rel: "next", children: _jsx("svg", { "aria-hidden": "true", className: "denhaag-icon", fill: "none", height: "1em", viewBox: "0 0 7 12", width: "1em", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M2.0079 1.1857C1.63618 0.8086 1.02778 0.8086 0.656065 1.18569V1.18569C0.292103 1.55492 0.291779 2.1479 0.655339 2.51752L3.63685 5.54877C4.01961 5.93791 4.01961 6.56209 3.63686 6.95123L0.655339 9.98248C0.291779 10.3521 0.292102 10.9451 0.656065 11.3143V11.3143C1.02778 11.6914 1.63618 11.6914 2.0079 11.3143L6.308 6.95201C6.69178 6.56268 6.69178 5.93732 6.308 5.54799L2.0079 1.1857Z", fill: "currentColor" }) }) }));

package/lib/components/formFields/select/select.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+import { IReactHookFormProps } from "../types";
+export interface ISelectValue {
+    label: string;
+    value: string;
+}
+interface ISelectProps {
+    control: any;
+    options: ISelectValue[];
+    name: string;
+    defaultValue?: any;
+    disabled?: boolean;
+}
+export declare const SelectMultiple: React.FC<ISelectProps & IReactHookFormProps>;
+export declare const SelectSingle: React.FC<ISelectProps & IReactHookFormProps>;
+export {};

package/lib/components/formFields/select/select.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as styles from "./select.module.css";
+import { Controller } from "react-hook-form";
+import ReactSelect from "react-select";
+export const SelectMultiple = ({ name, options, errors, control, validation, defaultValue, disabled, }) => {
+    return (_jsx(Controller, { ...{ control, name }, rules: validation, render: ({ field: { onChange, value } }) => {
+            return (_jsx(ReactSelect, { className: styles.select, isMulti: true, isDisabled: disabled, ...{ options, value, onChange, errors, defaultValue } }));
+        } }));
+};
+export const SelectSingle = ({ name, options, errors, control, validation, }) => {
+    return (_jsx(Controller, { ...{ control, name }, rules: validation, render: ({ field: { onChange, value } }) => {
+            return _jsx(ReactSelect, { className: styles.select, ...{ options, onChange, value, errors }, isClearable: true });
+        } }));
+};

package/lib/components/formFields/select/select.module.css

@@ -0,0 +1,65 @@
+.select > div {
+  background-color: var(
+    --utrecht-textbox-background-color,
+    var(--utrecht-form-input-background-color)
+  );
+  border-width: var(
+    --utrecht-textbox-border-width,
+    var(--utrecht-form-input-border-width)
+  );
+  border-bottom-width: var(
+    --utrecht-textbox-border-bottom-width,
+    var(--utrecht-textbox-border-width, var(--utrecht-form-input-border-width))
+  );
+  border-color: var(
+    --utrecht-textbox-border-color,
+    var(--utrecht-form-input-border-color)
+  );
+  border-radius: var(
+    --utrecht-textbox-border-radius,
+    var(--utrecht-form-input-border-radius, 0)
+  );
+  border-style: solid;
+  box-sizing: border-box;
+  color: var(--utrecht-textbox-color, var(--utrecht-form-input-color));
+  font-family: var(
+    --utrecht-textbox-font-family,
+    var(--utrecht-form-input-font-family)
+  );
+  font-size: var(
+    --utrecht-textbox-font-size,
+    var(--utrecht-form-input-font-size, 1em)
+  );
+  max-inline-size: var(
+    --utrecht-textbox-max-inline-size,
+    var(--utrecht-form-input-max-inline-size)
+  );
+
+  padding-block-start: 6.5px;
+  padding-block-end: 6.5px;
+}
+
+.select > div:hover {
+  border-color: var(
+    --utrecht-textbox-border-color,
+    var(--utrecht-form-input-border-color)
+  );
+}
+
+.select > div:focus-within {
+  outline: none;
+  box-shadow: none;
+}
+
+.select > div:focus-within::after {
+  pointer-events: none;
+  border: var(--denhaag-focus-border);
+  border-radius: var(--denhaag-border-radius);
+  bottom: -3px;
+  content: "";
+  display: block;
+  left: -3px;
+  position: absolute;
+  right: -3px;
+  top: -3px;
+}

package/lib/components/modals/NotificationModal.d.ts

@@ -0,0 +1,25 @@
+import * as React from "react";
+export interface ModalProps {
+    title: string;
+    description: string;
+    isShown: boolean;
+    hide: () => void;
+    layoutClassName: string;
+    primaryButton: {
+        label: string;
+        handleClick(): any;
+    };
+    closeButton?: {
+        label: string;
+    };
+    infoLink?: {
+        label: string;
+        link: string;
+    };
+}
+export declare const NotificationModal: React.FC<ModalProps>;
+export declare const toggleNotificationModal: () => {
+    isShown: boolean;
+    show: () => void;
+    hide: () => void;
+};

package/lib/components/modals/NotificationModal.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import * as styles from "./NotificationModal.module.css";
+import ReactDOM from "react-dom";
+import { Button, Heading3, Link, Paragraph } from "@gemeente-denhaag/components-react";
+import clsx from "clsx";
+import { CloseIcon, ArrowRightIcon } from "@gemeente-denhaag/icons";
+export const NotificationModal = ({ title, description, isShown, hide, primaryButton, closeButton, infoLink, layoutClassName, }) => {
+    const [fadeOut, setFadeOut] = React.useState(true);
+    const stylesContainer = document.getElementById("stylesContainer");
+    const animationDurationToken = getComputedStyle(document.documentElement).getPropertyValue("--conduction-notification-animation-duration");
+    const animationDurationString = animationDurationToken.replace(/\D/g, "");
+    const animationDuration = parseInt(animationDurationString);
+    const handleClick = (clickFunction) => {
+        setFadeOut(!setFadeOut);
+        clickFunction && clickFunction();
+        setTimeout(() => {
+            hide();
+            setFadeOut(true);
+        }, animationDuration);
+    };
+    const modal = (_jsx("div", { className: clsx(styles.cssanimation, fadeOut ? styles.fadeInBottom : styles.fadeOutBottom, layoutClassName), children: _jsxs("div", { className: styles.modal, children: [_jsx(Heading3, { children: title }), _jsx("div", { children: _jsxs(Paragraph, { children: [description, " ", infoLink ? _jsx(Link, { href: infoLink.link, children: infoLink.label }) : _jsx(_Fragment, {})] }) }), _jsxs("div", { className: styles.buttons, children: [closeButton ? (_jsx("div", { onClick: () => handleClick(), children: _jsx(Link, { icon: _jsx(CloseIcon, {}), iconAlign: "start", children: closeButton.label }) })) : (_jsx(_Fragment, {})), _jsx(Button, { icon: _jsx(ArrowRightIcon, {}), onClick: () => handleClick(primaryButton.handleClick), children: primaryButton.label })] })] }) }));
+    return isShown ? ReactDOM.createPortal(modal, stylesContainer) : null;
+};
+export const toggleNotificationModal = () => {
+    const [isShown, setIsShown] = React.useState(false);
+    const show = () => setIsShown(true);
+    const hide = () => setIsShown(false);
+    return {
+        isShown,
+        show,
+        hide,
+    };
+};

package/lib/components/modals/NotificationModal.module.css

@@ -0,0 +1,56 @@
+.modal {
+  background: var(--denhaag-color-warmgrey-1);
+  padding-inline-start: var(--nlportal-space-inline-lg);
+  padding-inline-end: var(--nlportal-space-inline-lg);
+  padding-block-start: var(--nlportal-space-block-lg);
+  padding-block-end: var(--nlportal-space-block-lg);
+  box-shadow: var(--conduction-notification-box-shadow);
+  border-radius: var(--nlportal-document-border-radius);
+}
+
+.modal > *:not(:last-child) {
+  margin-block-end: var(--nlportal-space-block-md);
+}
+
+.buttons {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+
+.buttons > *:not(:last-child) {
+  margin-inline-end: var(--nlportal-space-inline-md);
+}
+
+.cssanimation {
+  animation-duration: var(--conduction-notification-animation-duration);
+  animation-fill-mode: both;
+}
+
+.fadeInBottom {
+  animation-name: fadeInBottom;
+}
+
+@keyframes fadeInBottom {
+  from {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.fadeOutBottom {
+  animation-name: fadeOutBottom;
+}
+
+@keyframes fadeOutBottom {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+}

package/lib/components/privateRoute/PrivateRoute.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 interface PrivateRouteProps {
-    isLoggedIn?: boolean;
+    authenticated: boolean;
 }
 export declare const PrivateRoute: React.FC<PrivateRouteProps>;
 export {};

package/lib/components/privateRoute/PrivateRoute.js

@@ -1,15 +1,15 @@
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
 import { navigate } from "gatsby";
-export const PrivateRoute = ({ children, isLoggedIn }) => {
-    const [authenticated, setAuthenticated] = React.useState(false);
+export const PrivateRoute = ({ children, authenticated }) => {
+    const [_authenticated, setAuthenticated] = React.useState(false);
     React.useEffect(() => {
-        if (!isLoggedIn && window.location.pathname !== "/login") {
+        if (!authenticated && window.location.pathname !== "/login") {
             navigate("/login");
         }
-        isLoggedIn && setAuthenticated(true);
-    }, [isLoggedIn]);
-    if (!authenticated)
+        authenticated && setAuthenticated(true);
+    }, [authenticated]);
+    if (!_authenticated)
         return _jsx(_Fragment, {});
     return _jsx(_Fragment, { children: children });
 };

package/lib/components/topNav/TopNav.d.ts

@@ -1,12 +1,12 @@
 import * as React from "react";
-export interface ITopNavItem {
-    label: string;
-    href: string;
-    icon?: JSX.Element;
+interface TopNavProps {
+    items: {
+        label: string;
+        icon?: JSX.Element;
+        handleClick: () => any;
+    }[];
+    layoutClassName?: string;
 }
-interface TopNavItemsProps {
-    items: ITopNavItem[];
-}
-export declare const PrimaryTopNav: React.FC<TopNavItemsProps>;
-export declare const SecondaryTopNav: React.FC<TopNavItemsProps>;
+export declare const PrimaryTopNav: React.FC<TopNavProps>;
+export declare const SecondaryTopNav: React.FC<TopNavProps>;
 export {};

package/lib/components/topNav/TopNav.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import * as styles from "./TopNav.module.css";
 import { Link } from "@gemeente-denhaag/components-react";
-import { navigate } from "gatsby";
-export const PrimaryTopNav = ({ items }) => {
-    return (_jsx("nav", { className: styles.primary, children: _jsx("ul", { className: styles.ul, children: items.map(({ label, href, icon }, idx) => (_jsx("li", { className: styles.li, onClick: () => navigate(href), children: _jsx(Link, { icon: icon, iconAlign: "start", children: label }) }, idx))) }) }));
+import * as styles from "./TopNav.module.css";
+import clsx from "clsx";
+export const PrimaryTopNav = ({ items, layoutClassName }) => {
+    return (_jsx("div", { className: clsx(styles.primary, layoutClassName && layoutClassName), children: _jsx("nav", { className: styles.primary, children: _jsx("ul", { className: styles.ul, children: items.map(({ label, icon, handleClick }, idx) => (_jsx("li", { className: styles.li, onClick: handleClick, children: _jsx(Link, { className: styles.link, icon: icon, iconAlign: "start", children: label }) }, idx))) }) }) }));
 };
-export const SecondaryTopNav = ({ items }) => {
-    return (_jsx("nav", { children: _jsx("ul", { className: styles.ul, children: items.map(({ label, href, icon }, idx) => (_jsx("li", { className: styles.li, onClick: () => navigate(href), children: _jsx(Link, { icon: icon, iconAlign: "start", children: label }) }, idx))) }) }));
+export const SecondaryTopNav = ({ items, layoutClassName }) => {
+    return (_jsx("div", { className: clsx(styles.secondary, layoutClassName && layoutClassName), children: _jsx("nav", { children: _jsx("ul", { className: styles.ul, children: items.map(({ label, icon, handleClick }, idx) => (_jsx("li", { className: styles.li, onClick: handleClick, children: _jsx(Link, { className: styles.link, icon: icon, iconAlign: "start", children: label }) }, idx))) }) }) }));
 };

package/lib/components/topNav/TopNav.module.css

@@ -1,22 +1,76 @@
-.ul {
-  display: flex;
+:root {
+  --conduction-top-nav-space-inline-lg: 1.25rem;
+
+  --conduction-top-nav-color-primary: #ffffff;
+  --conduction-top-nav-background-color-primary: #084f70;
+  --conduction-top-nav-background-color-primary-hover: rgba(0, 0, 0, 0.2);
+
+  --conduction-top-nav-font-size-secondary: 16px;
+  --conduction-top-nav-color-secondary: #ffffff;
+  --conduction-top-nav-background-color-secondary: #0b71a1;
+  --conduction-top-nav-background-color-secondary-hover: rgba(
+    255,
+    255,
+    255,
+    0.2
+  );
 }
 
-.ul > * {
-  flex: 1;
+/*
+ * Global
+*/
+.primary:hover,
+.secondary:hover {
+  cursor: pointer;
+}
+
+.ul {
+  margin: unset;
+  display: flex;
+  padding-inline-start: unset;
+  align-items: center;
 }
 
 .li {
   list-style-type: none;
-  padding-block-start: var(--conduction-navbar-padding);
-  padding-block-end: var(--conduction-navbar-padding);
+  display: block;
+  padding-inline-start: var(--conduction-top-nav-space-inline-lg);
+  padding-inline-end: var(--conduction-top-nav-space-inline-lg);
+  padding-block-start: var(--conduction-top-nav-space-inline-lg);
+  padding-block-end: var(--conduction-top-nav-space-inline-lg);
+}
+
+/* 
+ * Primary Top Navigation
+*/
+.primary {
+  font-weight: 500;
+  width: fit-content;
+  background-color: var(--conduction-top-nav-background-color-primary);
 }
 
-.li > * {
-  text-decoration: none;
-  color: var(--conduction-navbar-color);
+.primary .link {
+  color: var(--conduction-top-nav-color-primary);
 }
 
-.primary {
-  font-weight: bold;
+.primary .li:hover {
+  background-color: var(--conduction-top-nav-background-color-primary-hover);
+}
+
+/* 
+ * Secondary Top Navigation
+*/
+.secondary {
+  font-weight: 100;
+  width: fit-content;
+  font-size: var(--conduction-top-nav-font-size-secondary);
+  background-color: var(--conduction-top-nav-background-color-secondary);
+}
+
+.secondary .link {
+  color: var(--conduction-top-nav-color-secondary);
+}
+
+.secondary .li:hover {
+  background-color: var(--conduction-top-nav-background-color-secondary-hover);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/components",
-  "version": "1.0.7",
+  "version": "1.0.10",
   "description": "React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)",
   "main": "lib/index.js",
   "scripts": {

package/src/components/container/Container.module.css

@@ -1,5 +1,9 @@
+:root{
+ --condution-container-max-width:  1024px;
+}
+
 .container {
   width: 100%;
   margin-inline: auto;
-  max-width: var(--nlportal-max-page-width);
+  max-width: var(--condution-container-max-width);
 }

package/src/components/container/Container.tsx

@@ -1,4 +1,11 @@
 import * as React from "react";
 import * as styles from "./Container.module.css";
+import clsx from "clsx";
 
-export const Container: React.FC = ({ children }) => <div className={styles.container}>{children}</div>;
+interface ContainerProps {
+  layoutClassName?: string;
+}
+
+export const Container: React.FC<ContainerProps> = ({ children, layoutClassName }) => (
+  <div className={clsx(styles.container, [layoutClassName && layoutClassName])}>{children}</div>
+);

package/src/components/privateRoute/PrivateRoute.tsx

@@ -2,21 +2,21 @@ import React from "react";
 import { navigate } from "gatsby";
 
 interface PrivateRouteProps {
-  isLoggedIn?: boolean;
+  authenticated: boolean;
 }
 
-export const PrivateRoute: React.FC<PrivateRouteProps> = ({ children, isLoggedIn }) => {
-  const [authenticated, setAuthenticated] = React.useState<boolean>(false);
+export const PrivateRoute: React.FC<PrivateRouteProps> = ({ children, authenticated }) => {
+  const [_authenticated, setAuthenticated] = React.useState<boolean>(false);
 
   React.useEffect(() => {
-    if (!isLoggedIn && window.location.pathname !== "/login") {
+    if (!authenticated && window.location.pathname !== "/login") {
       navigate("/login");
     }
 
-    isLoggedIn && setAuthenticated(true);
-  }, [isLoggedIn]);
+    authenticated && setAuthenticated(true);
+  }, [authenticated]);
 
-  if (!authenticated) return <></>;
+  if (!_authenticated) return <></>;
 
   return <>{children}</>;
 };

package/src/components/topNav/TopNav.module.css

@@ -1,22 +1,76 @@
-.ul {
-  display: flex;
+:root {
+  --conduction-top-nav-space-inline-lg: 1.25rem;
+
+  --conduction-top-nav-color-primary: #ffffff;
+  --conduction-top-nav-background-color-primary: #084f70;
+  --conduction-top-nav-background-color-primary-hover: rgba(0, 0, 0, 0.2);
+
+  --conduction-top-nav-font-size-secondary: 16px;
+  --conduction-top-nav-color-secondary: #ffffff;
+  --conduction-top-nav-background-color-secondary: #0b71a1;
+  --conduction-top-nav-background-color-secondary-hover: rgba(
+    255,
+    255,
+    255,
+    0.2
+  );
 }
 
-.ul > * {
-  flex: 1;
+/*
+ * Global
+*/
+.primary:hover,
+.secondary:hover {
+  cursor: pointer;
+}
+
+.ul {
+  margin: unset;
+  display: flex;
+  padding-inline-start: unset;
+  align-items: center;
 }
 
 .li {
   list-style-type: none;
-  padding-block-start: var(--conduction-navbar-padding);
-  padding-block-end: var(--conduction-navbar-padding);
+  display: block;
+  padding-inline-start: var(--conduction-top-nav-space-inline-lg);
+  padding-inline-end: var(--conduction-top-nav-space-inline-lg);
+  padding-block-start: var(--conduction-top-nav-space-inline-lg);
+  padding-block-end: var(--conduction-top-nav-space-inline-lg);
+}
+
+/* 
+ * Primary Top Navigation
+*/
+.primary {
+  font-weight: 500;
+  width: fit-content;
+  background-color: var(--conduction-top-nav-background-color-primary);
 }
 
-.li > * {
-  text-decoration: none;
-  color: var(--conduction-navbar-color);
+.primary .link {
+  color: var(--conduction-top-nav-color-primary);
 }
 
-.primary {
-  font-weight: bold;
+.primary .li:hover {
+  background-color: var(--conduction-top-nav-background-color-primary-hover);
+}
+
+/* 
+ * Secondary Top Navigation
+*/
+.secondary {
+  font-weight: 100;
+  width: fit-content;
+  font-size: var(--conduction-top-nav-font-size-secondary);
+  background-color: var(--conduction-top-nav-background-color-secondary);
+}
+
+.secondary .link {
+  color: var(--conduction-top-nav-color-secondary);
+}
+
+.secondary .li:hover {
+  background-color: var(--conduction-top-nav-background-color-secondary-hover);
 }

package/src/components/topNav/TopNav.tsx

@@ -1,46 +1,45 @@
 import * as React from "react";
-import * as styles from "./TopNav.module.css";
 import { Link } from "@gemeente-denhaag/components-react";
-import { navigate } from "gatsby";
-
-export interface ITopNavItem {
-  label: string;
-  href: string;
-  icon?: JSX.Element;
-}
+import * as styles from "./TopNav.module.css";
+import clsx from "clsx";
 
-interface TopNavItemsProps {
-  items: ITopNavItem[];
+interface TopNavProps {
+  items: { label: string; icon?: JSX.Element; handleClick: () => any }[];
+  layoutClassName?: string;
 }
 
-export const PrimaryTopNav: React.FC<TopNavItemsProps> = ({ items }) => {
+export const PrimaryTopNav: React.FC<TopNavProps> = ({ items, layoutClassName }) => {
   return (
-    <nav className={styles.primary}>
-      <ul className={styles.ul}>
-        {items.map(({ label, href, icon }, idx) => (
-          <li className={styles.li} key={idx} onClick={() => navigate(href)}>
-            <Link icon={icon} iconAlign="start">
-              {label}
-            </Link>
-          </li>
-        ))}
-      </ul>
-    </nav>
+    <div className={clsx(styles.primary, layoutClassName && layoutClassName)}>
+      <nav className={styles.primary}>
+        <ul className={styles.ul}>
+          {items.map(({ label, icon, handleClick }, idx) => (
+            <li className={styles.li} key={idx} onClick={handleClick}>
+              <Link className={styles.link} icon={icon} iconAlign="start">
+                {label}
+              </Link>
+            </li>
+          ))}
+        </ul>
+      </nav>
+    </div>
   );
 };
 
-export const SecondaryTopNav: React.FC<TopNavItemsProps> = ({ items }) => {
+export const SecondaryTopNav: React.FC<TopNavProps> = ({ items, layoutClassName }) => {
   return (
-    <nav>
-      <ul className={styles.ul}>
-        {items.map(({ label, href, icon }, idx) => (
-          <li className={styles.li} key={idx} onClick={() => navigate(href)}>
-            <Link icon={icon} iconAlign="start">
-              {label}
-            </Link>
-          </li>
-        ))}
-      </ul>
-    </nav>
+    <div className={clsx(styles.secondary, layoutClassName && layoutClassName)}>
+      <nav>
+        <ul className={styles.ul}>
+          {items.map(({ label, icon, handleClick }, idx) => (
+            <li className={styles.li} key={idx} onClick={handleClick}>
+              <Link className={styles.link} icon={icon} iconAlign="start">
+                {label}
+              </Link>
+            </li>
+          ))}
+        </ul>
+      </nav>
+    </div>
   );
 };