add modal

digdir · Mar 4, 2025 · 5abc74e · 5abc74e
1 parent d5d085e
commit 5abc74e
Show file tree

Hide file tree

Showing 2 changed files with 118 additions and 40 deletions.
diff --git a/apps/theme/components/Sidebar/Sidebar.module.css b/apps/theme/components/Sidebar/Sidebar.module.css
@@ -94,3 +94,31 @@
     right: 440px;
   }
 }
+
+.modal {
+  /* --dsc-dialog-spacing: var(--ds-size-2); */
+
+  min-height: 90vh;
+  flex-direction: column;
+
+  & .modalBottom {
+    margin-top: auto;
+    padding: var(--ds-size-7);
+  }
+
+  & .tabsWrapper {
+    display: flex;
+    flex-direction: column;
+    height: 80vh;
+    padding: 0;
+  }
+
+  & .tabContent {
+    overflow-x: none;
+    overflow-y: none;
+  }
+
+  /* & .tabPanel {
+    padding: var(--ds-size-4) 0;
+  } */
+}
diff --git a/apps/theme/components/Sidebar/Sidebar.tsx b/apps/theme/components/Sidebar/Sidebar.tsx
@@ -3,7 +3,12 @@ import { useEffect, useState } from 'react';
 
 import { useThemeStore } from '../../store';
 
-import { Tabs } from '@digdir/designsystemet-react';
+import {
+  Dialog,
+  Heading,
+  Tabs,
+  useMediaQuery,
+} from '@digdir/designsystemet-react';
 import { CogIcon } from '@navikt/aksel-icons';
 import { BorderRadiusInput } from '../BorderRadiusInput/BorderRadiusInput';
 import { TokenModal } from '../TokenModal/TokenModal';
@@ -14,6 +19,9 @@ export const Sidebar = () => {
   const activePage = useThemeStore((state) => state.activePage);
   const setActivePage = useThemeStore((state) => state.setActivePage);
 
+  const isMobile = useMediaQuery('(max-width: 768px)');
+  const [modalOpen, setModalOpen] = useState(false);
+
   const [isSticky, setSticky] = useState(false);
   const [showSidebar, setShowSidebar] = useState(false);
 
@@ -29,49 +37,91 @@ export const Sidebar = () => {
   }, []);
 
   return (
-    <div>
-      <button
-        className={cl(
-          classes.toggle,
-          showSidebar && classes.toggleOpen,
-          'ds-focus-visible',
-        )}
-        onClick={() => setShowSidebar(!showSidebar)}
-        aria-label='Toggle sidebar'
-      >
-        <CogIcon title='tannhjul' fontSize='1.5rem' />
-      </button>
-      <div
-        className={cl(
-          classes.sidebar,
-          isSticky && classes.sticky,
-          showSidebar && classes.showSidebar,
-        )}
-      >
-        <Tabs
-          value={activePage}
-          onChange={(value) => setActivePage(value as 'colors' | 'dimensions')}
+    <>
+      <div>
+        <button
+          className={cl(
+            classes.toggle,
+            showSidebar && classes.toggleOpen,
+            'ds-focus-visible',
+          )}
+          onClick={() => {
+            !isMobile && setShowSidebar(!showSidebar);
+            isMobile && setModalOpen(true);
+          }}
+          aria-label='Toggle sidebar'
         >
-          <Tabs.List>
-            <Tabs.Tab value='colors'>Farger</Tabs.Tab>
-            <Tabs.Tab value='dimensions'>Dimensjoner</Tabs.Tab>
-          </Tabs.List>
-          <div className={classes.tabContent}>
-            <Tabs.Panel className={classes.tabPanel} value='colors'>
-              <ColorPage />
-            </Tabs.Panel>
-            <Tabs.Panel className={classes.tabPanel} value='dimensions'>
-              <BorderRadiusInput />
-            </Tabs.Panel>
-          </div>
-        </Tabs>
+          <CogIcon title='tannhjul' fontSize='1.5rem' />
+        </button>
+        <div
+          className={cl(
+            classes.sidebar,
+            isSticky && classes.sticky,
+            showSidebar && classes.showSidebar,
+          )}
+        >
+          <Tabs
+            value={activePage}
+            onChange={(value) =>
+              setActivePage(value as 'colors' | 'dimensions')
+            }
+          >
+            <Tabs.List>
+              <Tabs.Tab value='colors'>Farger</Tabs.Tab>
+              <Tabs.Tab value='dimensions'>Dimensjoner</Tabs.Tab>
+            </Tabs.List>
+            <div className={classes.tabContent}>
+              <Tabs.Panel className={classes.tabPanel} value='colors'>
+                <ColorPage />
+              </Tabs.Panel>
+              <Tabs.Panel className={classes.tabPanel} value='dimensions'>
+                <BorderRadiusInput />
+              </Tabs.Panel>
+            </div>
+          </Tabs>
 
-        <div className={classes.bottom} data-size='sm'>
-          <div>
-            <TokenModal />
+          <div className={classes.bottom} data-size='sm'>
+            <div>
+              <TokenModal />
+            </div>
           </div>
         </div>
       </div>
-    </div>
+      {isMobile && (
+        <Dialog
+          open={modalOpen}
+          className={classes.modal}
+          onClose={() => setModalOpen(false)}
+        >
+          <Dialog.Block>
+            <Heading>Tema</Heading>
+          </Dialog.Block>
+          <Dialog.Block className={classes.tabsWrapper}>
+            <Tabs
+              value={activePage}
+              onChange={(value) =>
+                setActivePage(value as 'colors' | 'dimensions')
+              }
+            >
+              <Tabs.List>
+                <Tabs.Tab value='colors'>Farger</Tabs.Tab>
+                <Tabs.Tab value='dimensions'>Dimensjoner</Tabs.Tab>
+              </Tabs.List>
+
+              <Tabs.Panel className={classes.tabPanel} value='colors'>
+                <ColorPage />
+              </Tabs.Panel>
+              <Tabs.Panel className={classes.tabPanel} value='dimensions'>
+                <BorderRadiusInput />
+              </Tabs.Panel>
+            </Tabs>
+
+            <div className={classes.modalBottom}>
+              <TokenModal />
+            </div>
+          </Dialog.Block>
+        </Dialog>
+      )}
+    </>
   );
 };