Merge pull request #4019 from webkom/refactor-sidebar

Refactor Sidebar

app/routes/pages/components/Sidebar.css

@@ -1,108 +1,49 @@
 @import url('~app/styles/variables.css');
 
-.side {
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  box-sizing: border-box;
-  background-color: rgba(var(--rgb-min), var(--rgb-min), var(--rgb-min), 2%);
-  margin-bottom: 5em;
-  width: 290px;
-}
-
 .sidebar {
-  margin: 0 1.1em;
-  width: 100%;
-  padding-top: 20px;
   display: flex;
   flex-direction: column;
-
-  @media (--mobile-device) {
-    margin: 0;
-    padding-right: 1.5rem;
-  }
+  width: 290px;
+  flex-shrink: 0;
+  padding: 1.1em;
+  padding-bottom: 4.4em;
+  background-color: rgba(var(--rgb-min), var(--rgb-min), var(--rgb-min), 2%);
+  border-radius: var(--border-radius-lg) 0 0 var(--border-radius-lg);
+  z-index: 11;
 }
 
 .sidebarHeader {
-  margin-top: 20px;
-  width: 95%;
+  margin: 1em 0 1.4em;
+  align-self: center;
   text-align: center;
-  border-bottom: 2px solid var(--border-gray);
   padding-bottom: 0.6em;
+  width: 93%;
+  border-bottom: 2px solid var(--border-gray);
 }
 
-.sidebarPicture {
-  margin-top: 30px;
-  display: none;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: center;
-}
-
-.sidebarTop {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-.sidebarBottom {
-  margin-top: 2em;
-}
-
-.oldImg {
-  filter: grayscale(100%);
-}
-
-.pictureInfo {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-.sidebarCloseBtn {
-  width: 40px;
-  height: 25px;
+.sidebarCloseButton {
   display: none;
-  align-items: right;
-  justify-content: flex-end;
-  color: var(--lego-font-color);
-  z-index: 10;
-
-  @media (--mobile-device) {
-    display: inline-block;
-    position: absolute;
-    right: 0.7em;
-    top: 0.5em;
-  }
 }
 
 @media (--mobile-device) {
-  .side,
-  .sidebarPicture {
-    display: none;
-  }
-
-  .side.isOpen {
-    display: block;
-    position: absolute;
-    z-index: 11;
-    width: 100%;
-    box-shadow: var(--shadow-lg);
-    height: 100%;
-  }
-
   .sidebar {
+    position: fixed;
+    top: 0;
     width: 100%;
-    max-width: 100%;
+    height: 100vh;
+    border-radius: 0;
     background-color: var(--lego-card-color);
-    height: 100%;
+    overflow-y: auto;
+    overscroll-behavior: none;
   }
 
-  .sidebarWrapper {
-    width: 100%;
-    position: absolute;
-    height: 100%;
-    background-color: rgba(var(--rgb-min), var(--rgb-min), var(--rgb-min), 7%);
-    z-index: 10;
+  .sidebarClosed {
+    display: none;
+  }
+
+  .sidebarCloseButton {
+    display: flex;
+    align-self: flex-end;
+    color: var(--lego-font-color);
   }
 }

app/routes/pages/components/Sidebar.tsx

@@ -1,13 +1,9 @@
 import cx from 'classnames';
-import { Component } from 'react';
 import Icon from 'app/components/Icon';
 import PageHierarchy from './PageHierarchy';
 import styles from './Sidebar.css';
 import type { HierarchySectionEntity } from './PageHierarchy';
 
-type State = {
-  isOpen: boolean;
-};
 type Props = {
   categorySelected: string;
   currentUrl: string;
@@ -16,49 +12,27 @@ type Props = {
   handleClose: () => void;
 };
 
-class Sidebar extends Component<Props, State> {
-  render() {
-    const {
-      categorySelected,
-      currentUrl,
-      pageHierarchy,
-      isOpen,
-      handleClose,
-    }: Props = this.props;
-    // const pictureLabel = 'Hemmelig bilde';
-    return (
-      <div
-        className={isOpen ? styles.sidebarWrapper : undefined}
-        onClick={handleClose}
-      >
-        <div
-          className={cx(styles.side, isOpen && styles.isOpen)}
-          onClick={(event) => {
-            // Just werkz
-            event.stopPropagation();
-          }}
-        >
-          <aside className={styles.sidebar}>
-            <div className={styles.sidebarTop}>
-              <button className={styles.sidebarCloseBtn} onClick={handleClose}>
-                <Icon name="close" size={50} />
-              </button>
-              <h2 className={styles.sidebarHeader}>Om Abakus</h2>
-            </div>
-
-            <div className={styles.sidebarBottom}>
-              <PageHierarchy
-                pageHierarchy={pageHierarchy}
-                currentUrl={currentUrl}
-                currentCategory={categorySelected}
-                handleCloseSidebar={handleClose}
-              />
-            </div>
-          </aside>
-        </div>
-      </div>
-    );
-  }
-}
+const Sidebar = ({
+  categorySelected,
+  currentUrl,
+  pageHierarchy,
+  isOpen,
+  handleClose,
+}: Props) => {
+  return (
+    <div className={cx(styles.sidebar, isOpen || styles.sidebarClosed)}>
+      <button className={styles.sidebarCloseButton} onClick={handleClose}>
+        <Icon name="close" size={30} />
+      </button>
+      <h2 className={styles.sidebarHeader}>Om Abakus</h2>
+      <PageHierarchy
+        pageHierarchy={pageHierarchy}
+        currentUrl={currentUrl}
+        currentCategory={categorySelected}
+        handleCloseSidebar={handleClose}
+      />
+    </div>
+  );
+};
 
 export default Sidebar;