Sidebar component

src/components/SidebarModal/SidebarModal.tsx

@@ -0,0 +1,93 @@
+import styles from './sidebar.module.scss'
+
+import { Link, Button } from '@statisticsnorway/ssb-component-library'
+import { X } from 'react-feather'
+
+interface SidebarHeader {
+  modalType: string
+  modalTitle: string
+  modalDescription: string
+}
+
+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>
+    </div>
+  )
+}
+
+interface SidebarFooter {
+  submitButtonText: string
+  onClose?: () => void
+  handleSubmit?: () => void
+}
+
+const SidebarModalFooter = ({ submitButtonText, onClose, handleSubmit }: SidebarFooter): JSX.Element => {
+  return (
+    <div className={styles.modalFooter}>
+      <Link onClick={onClose}>Avbryt</Link>
+      <div className={styles.modalFooterButtonText}>
+        <Button onClick={handleSubmit} primary>
+          {submitButtonText}
+        </Button>
+      </div>
+    </div>
+  )
+}
+
+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 checkForOverflow = () => {
+    const element = contentRef.current;
+    if (!element) return
+
+    // Check if the content is overflowing in the vertical direction
+    const hasOverflow = element.scrollHeight > element.clientHeight;
+    setShowScrollIndicator(hasOverflow);
+  };
+
+  useEffect(() => {
+    if (!open) return
+
+    checkForOverflow();
+  }, [open]);
+  */
+  return (
+    <div className={`${styles.container} ${open ? styles.open : ''}`}>
+      <div className={styles.header}>
+        <button 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>
+      <SidebarModalFooter {...footer} onClose={footer.onClose ? footer.onClose : onClose} />
+    </div>
+  )
+}
+
+export default SidebarModal

src/components/SidebarModal/sidebar.module.scss

@@ -0,0 +1,112 @@
+@use '@statisticsnorway/ssb-component-library/src/style/variables' as variables;
+
+
+.container {
+    width: 20%;
+    height: 100%;
+    position: fixed;
+    display: flex;
+    flex-direction: column;
+    background-color: variables.$ssb-white;
+    border-left: 1px solid variables.$ssb-dark-2;
+    top: 0;
+    right: 0;
+    z-index: 1;
+    overflow-x: hidden;
+    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;
+    }
+
+    .xIcon {
+        color: variables.$ssb-green-4;
+    }
+
+    .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; 
+        }
+    }
+
+    .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 {}
+      }
+
+    @media (max-width: 1500px) {
+        width: 30%;
+        .modalFooter {
+            flex-direction: column;
+            gap: 20px;
+            padding: 1rem;
+        }
+    }
+
+    @media (max-width: 1050px) {
+        width: 100%;
+        .modalFooter {
+            flex-direction: column;
+            margin: 1rem 0;
+            gap: 1rem;
+        }
+    }
+}
+
+.open {
+    transform: translateX(0);
+}

tsconfig.json

@@ -16,12 +16,12 @@
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true,
+    "noFallthroughCasesInSwitch": true
   },
   "include": ["src"],
   "references": [
     {
-      "path": "./tsconfig.node.json",
-    },
-  ],
+      "path": "./tsconfig.node.json"
+    }
+  ]
 }