Merge pull request #3553 from webkom/improve-page-sidebar

Improve page sidebar layout and design
webkom · Feb 13, 2023 · 90128e4 · 90128e4
2 parents 0aa7e9d + 9bbf237
commit 90128e4
Show file tree

Hide file tree

Showing 5 changed files with 87 additions and 58 deletions.
diff --git a/app/routes/pages/components/PageHierarchy.css b/app/routes/pages/components/PageHierarchy.css
@@ -3,6 +3,7 @@
 .sidebar {
   display: flex;
   flex-direction: column;
+  margin: 0;
 
   @media (--mobile-device) {
     margin-left: 1.5em;
@@ -11,23 +12,31 @@
 
 .pageList {
   text-align: left;
-  line-height: 18px;
-  width: 220px;
+  line-height: 16px;
 }
 
 .pageList a {
-  font-size: 18px;
+  font-size: 16px;
+  color: var(--lego-font-color);
 }
 
 .dropdownBtn {
   display: flex;
   flex-direction: row;
   align-items: center;
+  justify-content: space-between;
   font-size: var(--font-size-large);
   font-family: Inter, sans-serif;
-  font-weight: bold;
+  font-weight: 500;
   color: var(--lego-font-color);
   margin-bottom: 0.8em;
+  border-radius: 5px;
+  padding: 6px 8px;
+  width: 100%;
+}
+
+.dropdownBtn:hover {
+  background-color: rgba(255, 0, 0, var(--color-red-hover-alpha));
 }
 
 .back > i {
@@ -36,26 +45,42 @@
 }
 
 .links {
-  margin: 8px 0 10px 8px;
+  margin-left: 0.5em;
+  width: 93%;
+  border-radius: 6px;
+}
+
+.links:hover {
+  background-color: rgba(255, 0, 0, var(--color-red-hover-alpha));
 }
 
 .nonSelected {
   font-weight: normal;
+  padding: 8px;
+  margin-bottom: 10px;
+  border-radius: 6px;
 }
 
 .selected {
-  font-weight: bold;
-  margin-left: -16px;
-}
-
-.selected::before {
-  content: '\25CF ';
+  padding: 8px;
+  margin: 0 0 10px;
+  border-radius: 6px;
+  color: var(--color-absolute-white);
+  background-color: var(--color-red-3);
 }
 
 .dropdownContainer {
   display: block;
+  margin-bottom: 1em;
 }
 
 .dropdownIcon {
   padding-left: 8px;
+  transition: var(--easing-medium);
+}
+
+@media (--mobile-device) {
+  .dropdownBtn:hover {
+    background-color: transparent;
+  }
 }
diff --git a/app/routes/pages/components/PageHierarchy.tsx b/app/routes/pages/components/PageHierarchy.tsx
@@ -1,5 +1,5 @@
 import { Component } from 'react';
-import { Link } from 'react-router-dom';
+import { Link, useHistory } from 'react-router-dom';
 import Icon from 'app/components/Icon';
 import { readmeIfy } from 'app/components/ReadmeLogo';
 import styles from './PageHierarchy.css';
@@ -53,27 +53,31 @@ const HierarchySection = ({
   currentUrl: string;
   currentCategory: string;
   handleCloseSidebar: () => void;
-}) => (
-  <nav className={styles.pageList}>
-    {items.length > 0 && (
-      <AccordionContainer title={title} currentCategory={currentCategory}>
-        {items.map((item, key) => (
-          <div key={key} className={styles.links}>
-            <Link
-              onClick={handleCloseSidebar}
-              className={
-                item.url === currentUrl ? styles.selected : styles.nonSelected
-              }
-              to={item.url}
-            >
-              {readmeIfy(item.title)}
+}) => {
+  return (
+    <nav className={styles.pageList}>
+      {items.length > 0 && (
+        <AccordionContainer title={title} currentCategory={currentCategory}>
+          {items.map((item, key) => (
+            <Link to={item.url} key={key}>
+              <div className={styles.links} onClick={handleCloseSidebar}>
+                <div
+                  className={
+                    item.url === currentUrl
+                      ? styles.selected
+                      : styles.nonSelected
+                  }
+                >
+                  {readmeIfy(item.title)}
+                </div>
+              </div>
             </Link>
-          </div>
-        ))}
-      </AccordionContainer>
-    )}
-  </nav>
-);
+          ))}
+        </AccordionContainer>
+      )}
+    </nav>
+  );
+};
 
 type AccordionProps = {
   title: string;
@@ -103,13 +107,19 @@ class AccordionContainer extends Component<AccordionProps, AccordionState> {
       <div>
         <button className={styles.dropdownBtn} onClick={this.handleClick}>
           {title}{' '}
-          {this.state.isOpen ? (
-            <Icon name="arrow-down" className={styles.dropdownIcon} />
-          ) : (
-            <Icon name="arrow-forward" className={styles.dropdownIcon} />
-          )}
+          <Icon
+            name="chevron-up-outline"
+            className={styles.dropdownIcon}
+            style={
+              this.state.isOpen
+                ? { transform: 'rotateX(0deg)' }
+                : { transform: 'rotateX(180deg)' }
+            }
+          />
         </button>{' '}
-        {this.state.isOpen ? <div>{children}</div> : null}
+        {this.state.isOpen ? (
+          <div className={styles.dropdownContainer}>{children}</div>
+        ) : null}
       </div>
     );
   }

diff --git a/app/routes/pages/components/Sidebar.css b/app/routes/pages/components/Sidebar.css
@@ -5,35 +5,32 @@
   display: flex;
   justify-content: center;
   box-sizing: border-box;
-  border-right: 2px solid var(--lego-red-color);
+  background-color: rgba(var(--rgb-min), var(--rgb-min), var(--rgb-min), 2%);
   margin-bottom: 5em;
-  width: 270px;
+  width: 290px;
 }
 
 .sidebar {
-  min-width: 150px;
-  max-width: 230px;
-  margin: 0 1.5em;
+  margin: 0 1.1em;
+  width: 100%;
   padding-top: 20px;
   display: flex;
   flex-direction: column;
 
   @media (--mobile-device) {
     margin: 0;
+    padding-right: 1.5rem;
   }
 }
 
 .sidebarHeader {
-  font-size: 2em;
-  margin-bottom: -10px;
+  font-size: 1.8em;
   font-weight: 600;
-}
-
-.sidebarSubtitle {
-  margin-top: 0;
-  padding-top: 0;
-  font-size: 15px;
-  font-weight: bold;
+  margin-top: 20px;
+  width: 95%;
+  text-align: center;
+  border-bottom: 2px solid var(--border-gray);
+  padding-bottom: 0.6em;
 }
 
 .sidebarPicture {
@@ -51,7 +48,7 @@
 }
 
 .sidebarBottom {
-  margin-top: 1.5em;
+  margin-top: 2em;
 }
 
 .oldImg {
@@ -92,7 +89,7 @@
     display: block;
     position: absolute;
     z-index: 11;
-    width: 90%;
+    width: 100%;
     box-shadow: var(--shadow-lg);
     height: 100%;
   }

diff --git a/app/routes/pages/components/Sidebar.tsx b/app/routes/pages/components/Sidebar.tsx
@@ -45,9 +45,6 @@ class Sidebar extends Component<Props, State> {
                 <Icon name="close" size={50} />
               </button>
               <h3 className={styles.sidebarHeader}>Om Abakus</h3>
-              <h4 className={styles.sidebarSubtitle}>
-                {categorySelected ? categorySelected : 'Generelt'}
-              </h4>
             </div>
 
             <div className={styles.sidebarBottom}>

diff --git a/app/styles/variables.css b/app/styles/variables.css
@@ -38,7 +38,7 @@
   --color-white: var(--color-absolute-white);
   --color-black: #000;
 
-  --border-gray: var(--color-gray-3);
+  --border-gray: var(--color-gray-2);
 
   --rgb-max: 255;
   --rgb-min: 0;