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

Initiell layout for nye personsider

package.json

@@ -112,6 +112,7 @@
         "redux": "^4.2.1",
         "redux-thunk": "^2.4.2",
         "styled-components": "^6.1.13",
+        "tailwind-merge": "^2.5.5",
         "vite": "^6.0.3",
         "vite-plugin-svgr": "^4.3.0",
         "zod": "^3.24.1"

src/components/PersonLinje.tsx

@@ -0,0 +1,12 @@
+import { Box } from '@navikt/ds-react';
+import { usePersonData } from 'src/lib/clients/modiapersonoversikt-api';
+
+export const PersonLinje = () => {
+    const { data } = usePersonData();
+
+    return (
+        <Box borderWidth="1" borderColor="border-subtle" padding="2">
+            {data.person.navn[0].fornavn} {data.person.navn[0].etternavn}
+        </Box>
+    );
+};

src/components/PersonSidebar.css

@@ -0,0 +1,11 @@
+.person-sidebar {
+    --ac-button-tertiary-text: var(--a-text-default);
+
+    --ac-button-tertiary-hover-bg: var(--a-surface-alt-1-subtle);
+    --ac-button-tertiary-hover-text: var(--a-text-default);
+
+    --ac-button-tertiary-active-bg: var(--a-surface-alt-1);
+    --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);
+}

src/components/PersonSidebar.tsx

@@ -0,0 +1,121 @@
+import {
+    ArrowLeftIcon,
+    ArrowRightIcon,
+    BellIcon,
+    BriefcaseIcon,
+    ChatIcon,
+    FaceSmileIcon,
+    FileIcon,
+    HandShakeHeartIcon,
+    PersonGroupIcon,
+    PiggybankIcon
+} from '@navikt/aksel-icons';
+import { Box, Button, VStack } from '@navikt/ds-react';
+import { Link } from '@tanstack/react-router';
+import { type ComponentProps, useState } from 'react';
+import { twMerge } from 'tailwind-merge';
+import './PersonSidebar.css';
+
+type MenuItem = {
+    title: string;
+    href: ComponentProps<typeof Link>['to'];
+    Icon: React.ExoticComponent;
+};
+
+const menuItems = [
+    {
+        title: 'Oversikt',
+        href: '/new/person/oversikt',
+        Icon: FaceSmileIcon
+    },
+    {
+        title: 'Oppfølging',
+        href: '/new/person/oppfolging',
+        Icon: PersonGroupIcon
+    },
+    {
+        title: 'Kommunikasjon',
+        href: '/new/person/meldinger',
+        Icon: ChatIcon
+    },
+    {
+        title: 'Arbeid',
+        href: '/new/person/oppfolging',
+        Icon: BriefcaseIcon
+    },
+    {
+        title: 'Utbetaling',
+        href: '/new/person/utbetaling',
+        Icon: PiggybankIcon
+    },
+    {
+        title: 'Ytelser',
+        href: '/new/person/ytelser',
+        Icon: HandShakeHeartIcon
+    },
+    {
+        title: 'Dokumenter',
+        href: '/new/person/saker',
+        Icon: FileIcon
+    },
+    {
+        title: 'Varsler',
+        href: '/new/person/varsler',
+        Icon: BellIcon
+    }
+] as const satisfies MenuItem[];
+
+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'
+                                    ]
+                                )}
+                            >
+                                {expanded && <span className="font-normal">{title}</span>}
+                            </Button>
+                        )}
+                    </Link>
+                ))}
+            </VStack>
+        </Box>
+    );
+};

src/lib/clients/modiapersonoversikt-api.ts

@@ -1,10 +1,9 @@
-import { useAtomValue } from 'jotai';
 import createFetchClient from 'openapi-fetch';
 import createClient from 'openapi-react-query';
 import { FetchError } from 'src/api/api';
 import { apiBaseUriWithoutRest } from 'src/api/config';
 import type { paths } from 'src/generated/modiapersonoversikt-api';
-import { aktivBrukerAtom } from 'src/lib/state/context';
+import { usePersonAtomValue } from 'src/lib/state/context';
 
 export const personoversiktApiClient = createFetchClient<paths>({
     baseUrl: apiBaseUriWithoutRest,
@@ -40,6 +39,8 @@ personoversiktApiClient.use({
 export const $api = createClient(personoversiktApiClient);
 
 export const usePersonData = () => {
-    const aktivBruker = useAtomValue(aktivBrukerAtom);
-    return $api.useSuspenseQuery('post', '/rest/v3/person', { body: { fnr: aktivBruker ?? '' } });
+    const aktivBruker = usePersonAtomValue();
+    return $api.useSuspenseQuery('post', '/rest/v3/person', {
+        body: { fnr: aktivBruker }
+    });
 };

src/lib/state/context.ts

@@ -1,5 +1,11 @@
-import { atom } from 'jotai';
+import { atom, useAtomValue } from 'jotai';
 
 export const aktivBrukerAtom = atom<string>();
 export const aktivBrukerLastetAtom = atom<boolean>(false);
 export const aktivEnhetAtom = atom<string>();
+
+const definedAktivBrukerAtom = atom((get) => get(aktivBrukerAtom) ?? 'invalid value');
+
+export const usePersonAtomValue = () => {
+    return useAtomValue(definedAktivBrukerAtom);
+};

src/routes/new/person.lazy.tsx

@@ -0,0 +1,32 @@
+import { HStack, VStack } from '@navikt/ds-react';
+import { Navigate, Outlet, createLazyFileRoute } from '@tanstack/react-router';
+import { useAtomValue } from 'jotai';
+import { PersonLinje } from 'src/components/PersonLinje';
+import { PersonSidebarMenu } from 'src/components/PersonSidebar';
+import { aktivBrukerAtom } from 'src/lib/state/context';
+
+export const Route = createLazyFileRoute('/new/person')({
+    component: PersonRoute
+});
+
+function PersonRoute() {
+    const aktivBruker = useAtomValue(aktivBrukerAtom);
+
+    if (!aktivBruker) {
+        return <Navigate to="/" />;
+    }
+
+    return <PersonLayout />;
+}
+
+function PersonLayout() {
+    return (
+        <VStack className="w-full">
+            <PersonLinje />
+            <HStack>
+                <PersonSidebarMenu />
+                <Outlet />
+            </HStack>
+        </VStack>
+    );
+}

src/routes/new/person/meldinger.lazy.tsx

@@ -0,0 +1,9 @@
+import { createLazyFileRoute } from '@tanstack/react-router';
+
+export const Route = createLazyFileRoute('/new/person/meldinger')({
+    component: RouteComponent
+});
+
+function RouteComponent() {
+    return <div>Hello "/new/person/meldinger"!</div>;
+}

src/routes/new/person/oppfolging.lazy.tsx

@@ -0,0 +1,9 @@
+import { createLazyFileRoute } from '@tanstack/react-router';
+
+export const Route = createLazyFileRoute('/new/person/oppfolging')({
+    component: RouteComponent
+});
+
+function RouteComponent() {
+    return <div>Hello "/new/person/oppfolging"!</div>;
+}

src/routes/new/person/oversikt.lazy.tsx

@@ -0,0 +1,9 @@
+import { createLazyFileRoute } from '@tanstack/react-router';
+
+export const Route = createLazyFileRoute('/new/person/oversikt')({
+    component: RouteComponent
+});
+
+function RouteComponent() {
+    return <div>Hello "/new/person/oversikt"!</div>;
+}

src/routes/new/person/saker.lazy.tsx

@@ -0,0 +1,9 @@
+import { createLazyFileRoute } from '@tanstack/react-router';
+
+export const Route = createLazyFileRoute('/new/person/saker')({
+    component: RouteComponent
+});
+
+function RouteComponent() {
+    return <div>Hello "/new/person/saker"!</div>;
+}

src/routes/new/person/utbetaling.lazy.tsx

@@ -0,0 +1,9 @@
+import { createLazyFileRoute } from '@tanstack/react-router';
+
+export const Route = createLazyFileRoute('/new/person/utbetaling')({
+    component: RouteComponent
+});
+
+function RouteComponent() {
+    return <div>Hello "/new/person/utbetaling"!</div>;
+}

src/routes/new/person/varsler.lazy.tsx

@@ -0,0 +1,9 @@
+import { createLazyFileRoute } from '@tanstack/react-router';
+
+export const Route = createLazyFileRoute('/new/person/varsler')({
+    component: RouteComponent
+});
+
+function RouteComponent() {
+    return <div>Hello "/new/person/varsler"!</div>;
+}

src/routes/new/person/ytelser.lazy.tsx

@@ -0,0 +1,9 @@
+import { createLazyFileRoute } from '@tanstack/react-router';
+
+export const Route = createLazyFileRoute('/new/person/ytelser')({
+    component: RouteComponent
+});
+
+function RouteComponent() {
+    return <div>Hello "/new/person/ytelser"!</div>;
+}

src/utils/customHooks.ts

@@ -99,6 +99,7 @@ export function useSettAktivBruker() {
         if (
             redirect &&
             ![
+                '/new/person',
                 paths.personUri,
                 paths.sakerFullscreen,
                 paths.saksdokumentEgetVindu,

vite.config.ts

@@ -28,7 +28,9 @@ const modiaFrontendCompat = (): {
         name: 'modia-frontend-html-transform',
         transformIndexHtml(html, ctx) {
             if (ctx.server) {
-                return html.replace(/<slot environment="prod">((.|\s)*?)<\/slot>/, '');
+                const removed = html.replace(/<slot environment="prod">((.|\s)*?)<\/slot>/, '');
+                const content = removed.match(/<slot not-environment="prod">((.|\s)*?)<\/slot>/)[1];
+                return removed.replace(/<slot not-environment="prod">((.|\s)*?)<\/slot>/, content);
             }
             return html;
         }