[Aksel.nav.no] ✨ Highlights 'darkside' sections in sidebar

aksel.nav.no/website/components/layout/sidebar/Sidebar.module.css

@@ -0,0 +1,8 @@
+.menuSection {
+  padding: var(--a-spacing-2);
+  border-radius: var(--a-border-radius-medium);
+}
+
+.menuSection[data-type="darkside"] {
+  background-color: var(--ax-bg-brand-magenta-moderate);
+}

aksel.nav.no/website/components/layout/sidebar/Sidebar.tsx

@@ -3,6 +3,7 @@ import { Box, Show } from "@navikt/ds-react";
 import { SidebarT } from "@/types";
 import { StatusTag } from "@/web/StatusTag";
 import { Menu, MenuHeading, MenuLi, MenuLink, MenuUl } from "@/web/menu/Menu";
+import styles from "./Sidebar.module.css";
 
 const Sidebar = ({
   kategori,
@@ -21,7 +22,7 @@ const Sidebar = ({
         className="w-sidebar shrink-0 self-start"
       >
         <Menu loggingContext="meny" variant="action">
-          <ul className="space-y-6">
+          <ul className="space-y-4">
             {links.map((section) => (
               <Section key={section.value} section={section} />
             ))}
@@ -38,8 +39,12 @@ function Section({ section }: { section: SidebarT[number] }) {
   const isActive = (slug: string) => {
     return asPath.split("#")[0] === `/${slug}`;
   };
+
   return (
-    <li>
+    <li
+      className={styles.menuSection}
+      data-type={section.value === "darkside" ? "darkside" : undefined}
+    >
       <MenuHeading as="div">{section.title}</MenuHeading>
       <MenuUl>
         {section.pages.map((page) => (

aksel.nav.no/website/components/website-modules/menu/Menu.module.css

@@ -5,3 +5,39 @@
 .menuList .menuList .menuListItem {
   padding-inline-start: var(--a-spacing-5);
 }
+
+.menuListItem[data-type="action"][data-current="true"] {
+  color: var(--a-deepblue-700);
+}
+
+.menuListItem[data-type="action"][data-current="true"] > span {
+  background-color: var(--a-surface-selected);
+}
+
+.menuListItem[data-type="action"][data-current="true"]::before {
+  background-color: var(--a-deepblue-700);
+}
+
+.menuListItem[data-type="neutral"][data-current="true"] {
+  color: var(--a-text-default);
+}
+
+.menuListItem[data-type="neutral"][data-current="true"] > span {
+  background-color: var(--a-surface-neutral-subtle);
+}
+
+.menuListItem[data-type="neutral"][data-current="true"]::before {
+  background-color: var(--a-gray-700);
+}
+
+.menuListItem[data-type="darkside"][data-current="true"] {
+  color: var(--ax-text-brand-magenta);
+}
+
+.menuListItem[data-type="darkside"][data-current="true"]::before {
+  background-color: var(--ax-bg-brand-magenta-strong-pressed);
+}
+
+.menuListItem[data-type="darkside"][data-current="true"] > span {
+  background-color: var(--ax-bg-brand-magenta-moderate-pressedA);
+}

aksel.nav.no/website/components/website-modules/menu/Menu.tsx

@@ -1,6 +1,6 @@
 import cl from "clsx";
 import Link from "next/link";
-import { createContext, useContext } from "react";
+import { HTMLAttributes, createContext, useContext } from "react";
 import { BodyShort, Label } from "@navikt/ds-react";
 import { amplitudeLogNavigation } from "@/logging";
 import styles from "./Menu.module.css";
@@ -52,10 +52,10 @@ export function MenuUl({ children, id, className }: MenuListProps) {
 
 type MenuLiProps = {
   children: React.ReactNode;
-};
+} & HTMLAttributes<HTMLLIElement>;
 
-export function MenuLi({ children }: MenuLiProps) {
-  return <li className="group">{children}</li>;
+export function MenuLi(props: MenuLiProps) {
+  return <li className="group" {...props} />;
 }
 
 type MenuLinkProps = {
@@ -79,10 +79,13 @@ export function MenuLink({
     throw new Error("MenuListItem must be used inside a Menu component");
   }
 
+  const isDarksideOverride = href.includes("/darkside/");
+
   return (
     <div className="relative scroll-m-6 border-l border-border-subtle" id={id}>
       <BodyShort
-        data-type={ctx.variant}
+        data-type={isDarksideOverride ? "darkside" : ctx.variant}
+        data-current={selected}
         size="small"
         as={Link}
         prefetch={false}
@@ -102,24 +105,10 @@ export function MenuLink({
             "text-text-subtle before:w-0 before:bg-gray-400 before:duration-100 before:ease-linear hover:text-text-default hover:before:w-1":
               !selected,
             "before:w-1": selected,
-            "text-deepblue-700 before:bg-deepblue-700":
-              selected && ctx.variant === "action",
-            "text-text-default before:bg-gray-700":
-              selected && ctx.variant === "neutral",
           },
         )}
       >
-        <span
-          className={cl(
-            "w-full rounded px-2 py-1 transition-colors duration-100 ease-out",
-            {
-              "bg-surface-selected": selected && ctx.variant === "action",
-              "bg-surface-neutral-subtle":
-                selected && ctx.variant === "neutral",
-              "bg-transparent": !selected,
-            },
-          )}
-        >
+        <span className="w-full rounded px-2 py-1 transition-colors duration-100 ease-out">
           {children}
         </span>
       </BodyShort>

aksel.nav.no/website/pages/_app.tsx

@@ -1,5 +1,6 @@
 import { AppProps } from "next/app";
 import { useEffect } from "react";
+import "@navikt/ds-tokens/darkside-css";
 import { useCheckAuth } from "@/hooks/useCheckAuth";
 import { useHashScroll } from "@/hooks/useHashScroll";
 import { SanityDataContext } from "@/hooks/useSanityData";

aksel.nav.no/website/sanity/config.ts

@@ -53,6 +53,7 @@ export const grunnleggendeKategorier = [
   { title: "Introduksjon", value: "introduksjon" },
   { title: "Brand", value: "brand" },
   { title: "Styling", value: "styling" },
+  { title: "Darkside", value: "darkside" },
   { title: "Guider", value: "guider" },
   { title: "Kode", value: "kode" },
 ];