- {title &&
{title}}
- {button}
+
+ {title && (
+
+ {title}
+
+ )}
+ {button &&
{button}
}
{content}
diff --git a/src/components/PageLayout/pagelayout.module.scss b/src/components/PageLayout/pagelayout.module.scss
index 47d208fb..89c6c9d4 100644
--- a/src/components/PageLayout/pagelayout.module.scss
+++ b/src/components/PageLayout/pagelayout.module.scss
@@ -8,15 +8,26 @@
}
}
-.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;
+ }
}
}
@@ -24,7 +35,11 @@
display: flex;
flex-direction: column;
margin-top: -2rem;
- gap: 0.5rem;
+ gap: .25rem;
+
+ @media #{variables.$mobile} {
+ margin-top: 0;
+ }
}
.descriptionSpacing {
diff --git a/src/components/ProtectedRoute.tsx b/src/components/ProtectedRoute.tsx
index 698a1af1..0937b273 100644
--- a/src/components/ProtectedRoute.tsx
+++ b/src/components/ProtectedRoute.tsx
@@ -21,6 +21,7 @@ const ProtectedRoute = () => {
setIsAuthenticated(true)
} catch (error) {
console.error('Error occurred when updating userProfile data')
+ console.error(error)
}
}
setData()
diff --git a/src/components/SidebarModal/SidebarModal.tsx b/src/components/SidebarModal/SidebarModal.tsx
index 3fbf60bf..db4049fc 100644
--- a/src/components/SidebarModal/SidebarModal.tsx
+++ b/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 (
-
- {modalType}
-
-
-
{modalTitle}
-
-
+ {modalType &&
{modalType}}
+ {
{modalTitle}}
+ {modalDescription &&
{modalDescription}
}
)
}
-interface SidebarFooter {
- submitButtonText: string
- onClose?: () => void
- handleSubmit?: () => void
+const SidebarModalBody = ({ modalBodyTitle, modalBody }: SidebarBody): JSX.Element => {
+ return (
+
+
{modalBodyTitle}
+ {modalBody}
+
+ )
}
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
(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 (
-
-
-