Sidebar modal adjustments

src/components/PageLayout/PageLayout.tsx

@@ -16,9 +16,13 @@ const PageLayout = ({ title, button, content }: PageLayoutProps) => {
       <Header />
       <main className={styles.container}>
         <Breadcrumb />
-        <div className={styles.title}>
-          {title && <Title size={1}>{title}</Title>}
-          {button}
+        <div className={styles.titleContainer}>
+          {title && (
+            <Title size={1} className={styles.title}>
+              {title}
+            </Title>
+          )}
+          {button && <div className={styles.button}>{button}</div>}
         </div>
         {content}
       </main>

src/components/PageLayout/pagelayout.module.scss

@@ -8,23 +8,38 @@
   }
 }
 
-.title {
+.titleContainer {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
+  align-items: center;
 
   margin-top: 1.5rem;
 
   @media #{variables.$mobile} {
     flex-direction: column;
+    align-items: start;
+    margin-bottom: 1rem;
+
+    .title {
+      margin: 0;
+    }
+
+    .button {
+      margin: 1.5rem 0 1rem;
+    }
   }
 }
 
 .description {
   display: flex;
   flex-direction: column;
   margin-top: -2rem;
-  gap: 0.5rem;
+  gap: .5rem;
+
+  @media #{variables.$mobile} {
+    margin-top: 0;
+  }
 }
 
 .descriptionSpacing {

src/components/SidebarModal/SidebarModal.tsx

@@ -1,34 +1,51 @@
 import styles from './sidebar.module.scss'
 
-import { Link, Button } from '@statisticsnorway/ssb-component-library'
+import { useRef, useEffect } from 'react'
+import { Title, Link, Button } from '@statisticsnorway/ssb-component-library'
 import { X } from 'react-feather'
 
 interface SidebarHeader {
-  modalType: string
+  modalType?: string
   modalTitle: string
-  modalDescription: string
+  modalDescription?: string
+}
+
+interface SidebarBody {
+  modalBodyTitle: string
+  modalBody: JSX.Element
+}
+
+interface SidebarFooter {
+  submitButtonText: string
+  onClose?: () => void
+  handleSubmit?: () => void
+}
+
+interface SidebarModal {
+  open: boolean
+  onClose: () => void
+  header: SidebarHeader
+  body: SidebarBody
+  footer: SidebarFooter
 }
 
 const SidebarModalHeader = ({ modalType, modalTitle, modalDescription }: SidebarHeader): JSX.Element => {
   return (
     <div className={styles.modalHeader}>
-      <div className={styles.modalType}>
-        <span>{modalType}</span>
-      </div>
-      <div className={styles.modalTitle}>
-        <h1>{modalTitle}</h1>
-      </div>
-      <div className={styles.modalDescription}>
-        <p>{modalDescription}</p>
-      </div>
+      {modalType && <span>{modalType}</span>}
+      {<Title size={1}>{modalTitle}</Title>}
+      {modalDescription && <p>{modalDescription}</p>}
     </div>
   )
 }
 
-interface SidebarFooter {
-  submitButtonText: string
-  onClose?: () => void
-  handleSubmit?: () => void
+const SidebarModalBody = ({ modalBodyTitle, modalBody }: SidebarBody): JSX.Element => {
+  return (
+    <div className={styles.modalBody}>
+      <Title size={2}>{modalBodyTitle}</Title>
+      {modalBody}
+    </div>
+  )
 }
 
 const SidebarModalFooter = ({ submitButtonText, onClose, handleSubmit }: SidebarFooter): JSX.Element => {
@@ -44,47 +61,30 @@ const SidebarModalFooter = ({ submitButtonText, onClose, handleSubmit }: Sidebar
   )
 }
 
-interface SidebarModal {
-  open: boolean
-  onClose: () => void
-  header: SidebarHeader
-  body: JSX.Element
-  footer: SidebarFooter
-}
-
 const SidebarModal = ({ open, onClose, header, footer, body }: SidebarModal) => {
-  /*
-  const [showScrollIndicator, setShowScrollIndicator] = useState(false);
-  const contentRef = useRef(null);
+  const sidebarModalRef = useRef<HTMLDivElement>(null)
 
-  const checkForOverflow = () => {
-    const element = contentRef.current;
-    if (!element) return
+  useEffect(() => {
+    const handleBackdropOnClick = (e: Event) => {
+      if (sidebarModalRef.current && !sidebarModalRef?.current?.contains(e.target as Node)) onClose()
+    }
 
-    // Check if the content is overflowing in the vertical direction
-    const hasOverflow = element.scrollHeight > element.clientHeight;
-    setShowScrollIndicator(hasOverflow);
-  };
+    window.addEventListener('mousedown', handleBackdropOnClick)
+    return () => {
+      window.removeEventListener('mousedown', handleBackdropOnClick)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
 
-  useEffect(() => {
-    if (!open) return
-
-    checkForOverflow();
-  }, [open]);
-  */
   return (
-    <div className={`${styles.container} ${open ? styles.open : ''}`}>
-      <div className={styles.header}>
-        <button onClick={onClose}>
+    <div className={`${styles.container} ${open ? styles.open : ''}`} ref={sidebarModalRef}>
+      <div>
+        <button className={styles.closeButton} onClick={onClose}>
           <X className={styles.xIcon} size={32} />
         </button>
       </div>
       <SidebarModalHeader {...header} />
-      {/*<div className={styles.body} ref={contentRef} onScroll={checkForOverflow}> */}
-      <div className={styles.body}>
-        {/* showScrollIndicator && <div className={styles.scroll}>↓ Scroll for å vise mer innhold</div> */}
-        {body}
-      </div>
+      <SidebarModalBody {...body} />
       <SidebarModalFooter {...footer} onClose={footer.onClose ? footer.onClose : onClose} />
     </div>
   )

src/components/SidebarModal/sidebar.module.scss

@@ -1,8 +1,7 @@
 @use '@statisticsnorway/ssb-component-library/src/style/variables' as variables;
 
-
 .container {
-    width: 20%;
+    width: 25%;
     height: 100%;
     position: fixed;
     display: flex;
@@ -16,95 +15,49 @@
     transition: transform 0.3s ease;
     transform: translateX(100%);
 
-    button {
-        background: none;
-        color: inherit;
-        border: none;
-        padding: 0;
-        font: inherit;
-        cursor: pointer;
-        outline: inherit;
-        float: right;
+    @media #{variables.$mobile} {
+        width: 100%;
     }
+}
 
-    .xIcon {
-        color: variables.$ssb-green-4;
-    }
+.closeButton {
+    background: none;
+    border: none;
+    cursor: pointer;
+    float: right;
+    padding: 1rem;
+}
 
-    .body {
-        background-color: variables.$ssb-green-1;
-        border-bottom: 1px solid #d4d4d4;
-        height: 80%;
-        overflow-y: auto;
-        > * {
-            padding: 1rem;
-        }
-        .scroll {
-            color: red;
-            position: fixed;
-            left: 50%;
-            width: 100%;
-            text-align: center;
-            transform: translateX(-50%);
-            z-index: 1000; 
-        }
-    }
+.xIcon {
+    color: variables.$ssb-green-4;
+}
 
-    .modalHeader {
-        width: 100%;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        margin-left: 1rem;
-        margin-bottom: 2rem;
-
-        button {
-            margin: 0;
-            padding: 0;
-            float: right;
-        }
-
-        > * > * {
-            padding: 0;
-            margin: 0;
-        }
-
-        .modalType {}
-        .modalTitle {}
-        .modalDescription {}
-      }
-
-      .modalFooter {
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
-        align-items: center;
-        margin-left: 2.5rem;
-        margin-right: 2.5rem;
-        padding-top: 1rem;
-        padding-bottom: 1rem;
-        height: auto;
-
-        .modalFooterButtonText {}
-      }
+.modalBody {
+    background-color: variables.$ssb-green-1;
+    border-bottom: 1px solid #d4d4d4;
+    height: 80%;
+    padding: 2rem 1.5rem 0;
+    overflow-y: auto;
+}
 
-    @media (max-width: 1500px) {
-        width: 30%;
-        .modalFooter {
-            flex-direction: column;
-            gap: 20px;
-            padding: 1rem;
-        }
+.modalHeader {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    margin: 0 0 2rem 1.5rem;
+
+    > * {
+        padding: 0;
+        margin: 0;
     }
+}
 
-    @media (max-width: 1050px) {
-        width: 100%;
-        .modalFooter {
-            flex-direction: column;
-            margin: 1rem 0;
-            gap: 1rem;
-        }
-    }
+.modalFooter {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    margin: 1rem 2.5rem;
 }
 
 .open {