Merge pull request #2527 from navikt/modia-new-layout

Legg til dark mode & litt tweaks i personmeny

src/components/PersonLinje.tsx

@@ -5,7 +5,7 @@ export const PersonLinje = () => {
     const { data } = usePersonData();
 
     return (
-        <Box borderWidth="1" borderColor="border-subtle" padding="2">
+        <Box borderWidth="1" background="bg-default" borderColor="border-subtle" borderRadius="large" padding="2">
             {data.person.navn[0].fornavn} {data.person.navn[0].etternavn}
         </Box>
     );

src/components/PersonSidebar.css

@@ -8,4 +8,15 @@
     --ac-button-tertiary-active-hover-bg: var(--a-surface-alt-1);
     --ac-button-tertiary-active-hover-text: var(--a-text-on-alt-1);
     --ac-button-tertiary-active-text: var(--a-text-on-alt-1);
+
+    --ac-toggle-group-selected-bg: var(--a-surface-alt-1);
+    --ac-toggle-group-button-hover-bg: var(--a-surface-alt-1-subtle);
+}
+
+[data-theme="dark"] .person-sidebar {
+    --ac-button-tertiary-hover-bg: var(--a-surface-alt-1-moderate);
+    --ac-toggle-group-button-hover-bg: var(--a-surface-alt-1-moderate);
+
+    --ac-button-tertiary-hover-text: var(--a-text-on-alt-1);
+    --ac-toggle-group-button-hover-text: var(--a-text-on-alt-1);
 }

src/components/PersonSidebar.tsx

@@ -15,6 +15,7 @@ import { Link } from '@tanstack/react-router';
 import { type ComponentProps, useState } from 'react';
 import { twMerge } from 'tailwind-merge';
 import './PersonSidebar.css';
+import { ThemeToggle } from './theme/ThemeToggle';
 
 type MenuItem = {
     title: string;
@@ -69,52 +70,66 @@ export const PersonSidebarMenu = () => {
     const [expanded, setExpanded] = useState(true);
 
     return (
-        <Box background="surface-subtle" className="h-dvh" borderRadius="medium" margin="2">
-            <Box padding="2" className="flex">
-                <Button
-                    aria-hidden
-                    icon={
-                        expanded ? (
-                            <ArrowLeftIcon className="group-hover:-translate-x-1" />
-                        ) : (
-                            <ArrowRightIcon className="group-hover:translate-x-1" />
-                        )
-                    }
-                    variant="tertiary-neutral"
-                    size="small"
-                    onClick={() => setExpanded((v) => !v)}
-                    className="flex-1 justify-end group"
-                    iconPosition="right"
-                >
-                    {expanded && <span className="font-normal">Skjul</span>}
-                </Button>
-            </Box>
-            <VStack as="nav" aria-label="Person" padding="2" className="person-sidebar divide-y divide-border-divider">
-                {menuItems.map(({ title, href, Icon }) => (
-                    <Link key={title} to={href}>
-                        {({ isActive }) => (
-                            <Button
-                                aria-hidden
-                                icon={<Icon aria-hidden />}
-                                variant="tertiary"
-                                size="small"
-                                className={twMerge(
-                                    'my-1',
-                                    'font-normal',
-                                    expanded && ['justify-start', 'min-w-60'],
-                                    isActive && [
-                                        'bg-surface-alt-1',
-                                        'text-text-on-alt-1',
-                                        'hover:bg-surface-alt-1',
-                                        'hover:text-text-on-alt-1'
-                                    ]
+        <Box
+            className="person-sidebar "
+            background="bg-default"
+            borderRadius="large"
+            borderColor="border-subtle"
+            borderWidth="1"
+            flexGrow="1"
+        >
+            <VStack justify="space-between" height="100%">
+                <Box>
+                    <Box padding="2" className="flex">
+                        <Button
+                            aria-hidden
+                            icon={
+                                expanded ? (
+                                    <ArrowLeftIcon className="group-hover:-translate-x-1" />
+                                ) : (
+                                    <ArrowRightIcon className="group-hover:translate-x-1" />
+                                )
+                            }
+                            variant="tertiary-neutral"
+                            size="small"
+                            onClick={() => setExpanded((v) => !v)}
+                            className="flex-1 justify-end group"
+                            iconPosition="right"
+                        >
+                            {expanded && <span className="font-normal">Skjul</span>}
+                        </Button>
+                    </Box>
+                    <VStack as="nav" aria-label="Person" padding="2" className="divide-y divide-border-divider">
+                        {menuItems.map(({ title, href, Icon }) => (
+                            <Link key={title} to={href}>
+                                {({ isActive }) => (
+                                    <Button
+                                        aria-hidden
+                                        icon={<Icon aria-hidden />}
+                                        variant="tertiary"
+                                        size="small"
+                                        className={twMerge(
+                                            'my-1',
+                                            'font-normal',
+                                            expanded && ['justify-start', 'min-w-60'],
+                                            isActive && [
+                                                'bg-surface-alt-1',
+                                                'text-text-on-alt-1',
+                                                'hover:bg-surface-alt-1',
+                                                'hover:text-text-on-alt-1'
+                                            ]
+                                        )}
+                                    >
+                                        {expanded && <span className="font-normal">{title}</span>}
+                                    </Button>
                                 )}
-                            >
-                                {expanded && <span className="font-normal">{title}</span>}
-                            </Button>
-                        )}
-                    </Link>
-                ))}
+                            </Link>
+                        ))}
+                    </VStack>
+                </Box>
+                <Box padding="2" className={twMerge(!expanded && 'hidden')}>
+                    <ThemeToggle />
+                </Box>
             </VStack>
         </Box>
     );

src/components/theme/ThemeToggle.tsx

@@ -0,0 +1,31 @@
+import { LightBulbIcon, MoonIcon, SunIcon } from '@navikt/aksel-icons';
+import { HStack, Label, ToggleGroup } from '@navikt/ds-react';
+import { useAtom } from 'jotai';
+import { useCallback } from 'react';
+import { themeAtom } from 'src/lib/state/theme';
+
+export const ThemeToggle = () => {
+    const [theme, setTheme] = useAtom(themeAtom);
+
+    const changeTheme = useCallback(
+        (v: string) => {
+            if (v === 'light' || v === 'dark') {
+                setTheme(v);
+            }
+        },
+        [setTheme]
+    );
+
+    return (
+        <HStack justify="space-between">
+            <HStack align="center" gap="2">
+                <LightBulbIcon />
+                <Label size="small">Bytt modus</Label>
+            </HStack>
+            <ToggleGroup onChange={changeTheme} value={theme} size="small">
+                <ToggleGroup.Item icon={<SunIcon />} value="light" />
+                <ToggleGroup.Item icon={<MoonIcon />} value="dark" />
+            </ToggleGroup>
+        </HStack>
+    );
+};

src/index.css

@@ -3,3 +3,19 @@
 @import "@navikt/ds-css";
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
+
+:root {
+    --m-bg-inverted: #030b16;
+}
+
+[data-theme="dark"] {
+    --a-text-default: var(--a-text-on-inverted);
+    --a-text-on-alt-1: var(--a-text-subtle);
+    --a-bg-default: var(--a-surface-inverted);
+    --a-surface-subtle: var(--m-bg-inverted);
+    --a-surface-neutral-hover: var(--a-surface-neutral-subtle-hover);
+}
+
+.new-modia {
+    color: var(--a-text-default);
+}

src/lib/state/theme.ts

@@ -0,0 +1,19 @@
+import { atom, useAtom, useAtomValue } from 'jotai';
+import { type PropsWithChildren, useEffect } from 'react';
+
+const localTheme = localStorage.getItem('theme');
+
+export const themeAtom = atom<'light' | 'dark'>(localTheme === 'light' || localTheme === 'dark' ? localTheme : 'light');
+
+export const useTheme = () => useAtomValue(themeAtom);
+
+export const ThemeProvider = ({ children }: PropsWithChildren) => {
+    const [theme] = useAtom(themeAtom);
+
+    useEffect(() => {
+        document.documentElement.setAttribute('data-theme', theme);
+        localStorage.setItem('theme', theme);
+    }, [theme]);
+
+    return children;
+};

src/routes/__root.tsx

@@ -11,6 +11,7 @@ import ErrorBoundary from 'src/components/ErrorBoundary';
 import NotFound from 'src/components/NotFound';
 import { ValgtEnhetProvider } from 'src/context/valgtenhet-state';
 import { aktivEnhetAtom } from 'src/lib/state/context';
+import { ThemeProvider } from 'src/lib/state/theme';
 import { usePersistentWWLogin } from 'src/login/use-persistent-ww-login';
 import HandleLegacyUrls from 'src/utils/HandleLegacyUrls';
 import styled from 'styled-components';
@@ -58,16 +59,20 @@ function App({ children }: PropsWithChildren) {
 }
 
 const TanStackRouterDevtools = import.meta.env.DEV
-    ? lazy(() => import('@tanstack/router-devtools').then((res) => ({ default: res.TanStackRouterDevtools })))
+    ? lazy(() =>
+          import('@tanstack/router-devtools').then((res) => ({
+              default: res.TanStackRouterDevtools
+          }))
+      )
     : () => null;
 
 const AppStyle = styled.div`
-    height: 100vh;
-    @media print {
-        height: auto;
-    }
-    display: flex;
-    flex-flow: column nowrap;
+  height: 100vh;
+  @media print {
+    height: auto;
+  }
+  display: flex;
+  flex-flow: column nowrap;
 `;
 
 function RootLayout() {
@@ -76,6 +81,7 @@ function RootLayout() {
 
     return (
         <QueryClientProvider client={queryClient}>
+            <ThemeProvider />
             <ValgtEnhetProvider>
                 {isLanding ? (
                     <Outlet />
@@ -92,7 +98,7 @@ function RootLayout() {
                         </HandleLegacyUrls>
                     </AppStyle>
                 )}
-                <TanStackRouterDevtools />
+                <TanStackRouterDevtools position="bottom-right" />
             </ValgtEnhetProvider>
         </QueryClientProvider>
     );

src/routes/new/person.lazy.tsx

@@ -21,12 +21,14 @@ function PersonRoute() {
 
 function PersonLayout() {
     return (
-        <VStack className="w-full">
-            <PersonLinje />
-            <HStack>
+        <HStack className="bg-surface-subtle new-modia" gap="2" padding="2" flexGrow="1">
+            <VStack>
                 <PersonSidebarMenu />
+            </VStack>
+            <VStack flexGrow="1">
+                <PersonLinje />
                 <Outlet />
-            </HStack>
-        </VStack>
+            </VStack>
+        </HStack>
     );
 }

tailwind.config.js

@@ -3,8 +3,14 @@ import akselTw from '@navikt/ds-tailwind';
 /** @type {import('tailwindcss').Config} */
 export default {
     content: ['./index.html', './src/**/*.tsx'],
+    darkMode: ['selector', '[data-theme="dark"]'],
     theme: {
-        extend: {}
+        extend: {
+            colors: {
+                'bg-default': 'var(--a-bg-default)',
+                'surface-subtle': 'var(--a-surface-subtle)'
+            }
+        }
     },
     presets: [akselTw],
     plugins: []