remove sidebar, replace with hook

packages/frontend/package.json

@@ -21,7 +21,7 @@
     "i18n:sort": "tsx ./src/i18n/check.ts --sort"
   },
   "dependencies": {
-    "@altinn/altinn-components": "^0.1.0",
+    "@altinn/altinn-components": "^0.6.8",
     "@digdir/designsystemet-css": "0.11.0-next.10",
     "@digdir/designsystemet-react": "1.0.0-next.15",
     "@digdir/designsystemet-theme": "1.0.0-next.14",

packages/frontend/src/App.tsx

@@ -1,5 +1,5 @@
 import { Navigate, Route, Routes } from 'react-router-dom';
-import { ProtectedPageLayout } from './components/PageLayout/PageLayout.tsx';
+import { ProtectedPageLayout } from './components/PageLayout/PageLayoutArbeidsFlate.tsx';
 import { Inbox } from './pages/Inbox';
 import { Routes as AppRoutes } from './pages/Inbox/Inbox.tsx';
 import { InboxItemPage } from './pages/InboxItemPage';

packages/frontend/src/api/useDialogs.tsx

@@ -20,11 +20,10 @@ import { getOrganization } from './organizations.ts';
 import { graphQLSDK } from './queries.ts';
 
 export type InboxViewType = 'inbox' | 'drafts' | 'sent' | 'archive' | 'bin';
+export type DialogsByView = { [key in InboxViewType]: InboxItemInput[] };
 interface UseDialogsOutput {
   dialogs: InboxItemInput[];
-  dialogsByView: {
-    [key in InboxViewType]: InboxItemInput[];
-  };
+  dialogsByView: DialogsByView;
   isSuccess: boolean;
   isLoading: boolean;
 }

packages/frontend/src/components/PageLayout/PageLayoutArbeidsFlate.tsx

@@ -0,0 +1,169 @@
+import { type FooterProps, type HeaderProps, Layout, type LayoutProps, RootProvider } from '@altinn/altinn-components';
+import { useQueryClient } from '@tanstack/react-query';
+import cx from 'classnames';
+import { type ChangeEvent, useEffect, useState } from 'react';
+import { Outlet, useLocation, useSearchParams } from 'react-router-dom';
+import { useDialogs } from '../../api/useDialogs.tsx';
+import { useParties } from '../../api/useParties.ts';
+import { getSearchStringFromQueryParams } from '../../pages/Inbox/queryParams.ts';
+import { useSavedSearches } from '../../pages/SavedSearches/useSavedSearches.ts';
+import { useProfile } from '../../profile';
+import { BetaBanner } from '../BetaBanner/BetaBanner';
+import { useSearchString } from '../Header';
+import { useAuth } from '../Login/AuthContext.tsx';
+import { useSidebarMenu } from '../Sidebar/useSidebarMenu.tsx';
+import { useSelectedDialogs } from './SelectedDialogs';
+import styles from './pageLayout.module.css';
+
+export const useUpdateOnLocationChange = (fn: () => void) => {
+  const location = useLocation();
+  // biome-ignore lint/correctness/useExhaustiveDependencies: Full control of what triggers this code is needed
+  useEffect(() => {
+    fn();
+  }, [location, fn]);
+};
+
+const Background: React.FC<{ children: React.ReactNode; isCompany: boolean }> = ({ children, isCompany }) => {
+  const { inSelectionMode } = useSelectedDialogs();
+  return (
+    <div
+      data-testid="pageLayout-background"
+      className={cx(styles.background, {
+        isCompany: isCompany,
+        [styles.inSelectionMode]: inSelectionMode,
+      })}
+    >
+      {children}
+    </div>
+  );
+};
+
+export const ProtectedPageLayout = () => {
+  const { isAuthenticated } = useAuth();
+  if (!isAuthenticated) {
+    return null;
+  }
+  return <PageLayoutArbeidsFlate />;
+};
+
+const footerLinks = [
+  {
+    href: 'https://info.altinn.no/om-altinn/',
+    resourceId: 'footer.nav.about_altinn',
+  },
+  {
+    href: 'https://info.altinn.no/om-altinn/driftsmeldinger/',
+    resourceId: 'footer.nav.service_messages',
+  },
+  {
+    href: 'https://info.altinn.no/om-altinn/personvern/',
+    resourceId: 'footer.nav.privacy_policy',
+  },
+  {
+    href: 'https://info.altinn.no/om-altinn/tilgjengelighet/',
+    resourceId: 'footer.nav.accessibility',
+  },
+];
+
+export const PageLayoutArbeidsFlate: React.FC = () => {
+  const [searchParams] = useSearchParams();
+  const [searchValue, setSearchValue] = useState<string>('');
+  const queryClient = useQueryClient();
+  const { setSearchString } = useSearchString();
+  const { selectedProfile, selectedParties, parties, selectedPartyIds } = useParties();
+  const { currentPartySavedSearches } = useSavedSearches(selectedPartyIds);
+  const { dialogsByView } = useDialogs(selectedParties);
+  const itemsPerViewCount = {
+    inbox: dialogsByView.inbox.filter((item) => !item.isSeenByEndUser).length,
+    drafts: dialogsByView.drafts.length,
+    sent: dialogsByView.sent.length,
+    'saved-searches': currentPartySavedSearches?.length ?? 0,
+    archive: dialogsByView.archive.length,
+    bin: dialogsByView.bin.length,
+  };
+
+  const sidebarMenu = useSidebarMenu({ itemsPerViewCount });
+
+  useProfile();
+
+  useUpdateOnLocationChange(() => {
+    const searchString = getSearchStringFromQueryParams(searchParams);
+    queryClient.setQueryData(['search'], () => searchString || '');
+  });
+
+  interface AccountMenuItem {
+    type: 'person' | 'company';
+    name: string;
+    id: string;
+    groupId?: string;
+    selected?: boolean;
+  }
+
+  const currentEndUser = selectedParties.find((party) => party.isCurrentEndUser);
+  const accounts: AccountMenuItem[] = parties.map((party) => ({
+    id: party.party,
+    name: party.name,
+    type: party.partyType.toLowerCase() as AccountMenuItem['type'],
+  }));
+
+  const endUserAccount = currentEndUser
+    ? { id: currentEndUser.party, name: currentEndUser.name, type: 'person' }
+    : {
+        id: '',
+        name: '',
+        type: 'person',
+      };
+
+  const headerProps: HeaderProps = {
+    currentAccount: endUserAccount as HeaderProps['currentAccount'],
+    menu: {
+      menuLabel: 'Meny',
+      items: [],
+      accounts,
+      changeLabel: 'Endre konto',
+      backLabel: 'Tilbake',
+    },
+    search: {
+      expanded: false,
+      name: 'search',
+      placeholder: 'Søk',
+      value: searchValue,
+      onClear: () => setSearchValue(''),
+      onChange: (event: ChangeEvent<HTMLInputElement>) => setSearchValue(event.target.value),
+      onEnter: () => setSearchString(searchValue),
+    },
+  };
+
+  const footerProps: FooterProps = {
+    address: 'Altinn AS, Postboks 6783 St. Olavs plass, 0130 Oslo',
+    menu: {
+      items: footerLinks.map((link) => ({
+        id: link.resourceId,
+        href: link.href,
+        text: link.resourceId,
+      })),
+    },
+  };
+
+  const layoutProps: LayoutProps = {
+    theme: selectedProfile,
+    header: headerProps,
+    footer: footerProps,
+    sidebar: {
+      theme: selectedProfile,
+      menu: sidebarMenu,
+    },
+    children: undefined,
+  };
+
+  return (
+    <Background isCompany={selectedProfile === 'company'}>
+      <BetaBanner />
+      <RootProvider>
+        <Layout theme={selectedProfile} {...layoutProps}>
+          <Outlet />
+        </Layout>
+      </RootProvider>
+    </Background>
+  );
+};

packages/frontend/src/components/PageLayout/index.ts

@@ -1,2 +1,2 @@
-export { PageLayout } from './PageLayout';
+export { PageLayoutArbeidsFlate } from './PageLayoutArbeidsFlate.tsx';
 export * from './SelectedDialogs';

packages/frontend/src/components/PageLayout/pageLayout.module.css

@@ -1,45 +1,5 @@
-.pageLayout {
-  display: grid;
-  grid-template-areas: "sidebar main";
-  grid-template-columns: 226px 3fr;
-  grid-template-rows: auto 1fr auto;
-  grid-gap: 2rem;
-  max-width: calc(1280px - 2rem);
-  margin: 0 auto;
-  padding-left: 1rem;
-  padding-right: 1rem;
-}
-
 .background {
   min-height: 100vh;
   background: var(--background-color);
   overflow: auto;
 }
-
-.inSelectionMode.background {
-  background: var(--grey);
-}
-
-.pageLayout > header {
-  grid-area: header;
-}
-
-.pageLayout > main {
-  grid-area: main;
-  padding: 0;
-  width: 100%;
-  margin-right: auto;
-}
-
-.pageLayout > footer {
-  grid-area: footer;
-}
-
-@media (max-width: 1024px) {
-  .pageLayout {
-    grid-template-areas: "main main";
-    grid-template-columns: 1fr 3fr;
-    padding-left: 0;
-    padding-right: 0;
-  }
-}

packages/frontend/src/components/PartyDropdown/PartyDropdown.tsx

@@ -1,12 +1,12 @@
 import { ChevronUpDownIcon } from '@navikt/aksel-icons';
 import { type Ref, forwardRef, useImperativeHandle, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useParties } from '../../api/useParties.ts';
+import { useParties } from '../../api/useParties';
 import { Backdrop } from '../Backdrop';
 import { DropdownList, DropdownMobileHeader } from '../DropdownMenu';
 import { ProfileButton } from '../ProfileButton';
-import type { SideBarView } from '../Sidebar';
-import { PartyListContainer } from './PartyListContainer.tsx';
+import type { SideBarView } from '../Sidebar/useSidebarMenu';
+import { PartyListContainer } from './PartyListContainer';
 
 interface PartyDropdownRef {
   openPartyDropdown: () => void;

packages/frontend/src/components/PartyDropdown/PartyListContainer.tsx

@@ -3,10 +3,10 @@ import { useMemo } from 'react';
 import { useDialogs } from '../../api/useDialogs.tsx';
 import { useParties } from '../../api/useParties.ts';
 import { QUERY_KEYS } from '../../constants/queryKeys.ts';
-import { useSavedSearches } from '../../pages/SavedSearches/useSavedSearches.ts';
-import type { SideBarView } from '../Sidebar';
+import { useSavedSearches } from '../../pages/SavedSearches/useSavedSearches';
+import type { SideBarView } from '../Sidebar/useSidebarMenu';
 import { PartyList } from './PartyList.tsx';
-import { type PartyOptionGroup, getOptionsGroups } from './mapToPartyOption.ts';
+import { type PartyOptionGroup, getOptionsGroups } from './mapToPartyOption';
 
 interface PartyListAdapterProps {
   counterContext?: SideBarView;