💄 Knowledge Base is now responsive!

BerkeAras · Feb 16, 2022 · 02f79b6 · 02f79b6 · vercel · Feb 16, 2022
2 parents 8d60f5d + ee2f76f
commit 02f79b6
Show file tree

Hide file tree

Showing 7 changed files with 94 additions and 5 deletions.
diff --git a/src/components/Header/Header/style.scss b/src/components/Header/Header/style.scss
@@ -177,7 +177,7 @@ body {
     }
 }
 
-@media (max-width: 600px) {
+@media (max-width: 650px) {
     .nav-header {
         .header__menu-items {
             display: none;

diff --git a/src/components/KnowledgeBase/KnowledgeBaseHeader/style.scss b/src/components/KnowledgeBase/KnowledgeBaseHeader/style.scss
@@ -13,6 +13,7 @@
     .checkbox {
         float: right;
         padding-top: 5px;
+        z-index: 0;
     }
 
     button {
@@ -21,4 +22,14 @@
     a {
         outline: none;
     }
+
+    @media (max-width: 768px) {
+        overflow-y: none;
+        overflow-x: auto;
+        white-space: nowrap;
+
+        div.checkbox {
+            float: none;
+        }
+    }
 }
diff --git a/src/components/KnowledgeBase/KnowledgeBaseSidebar/index.jsx b/src/components/KnowledgeBase/KnowledgeBaseSidebar/index.jsx
@@ -1,12 +1,13 @@
 import React, { useState, useEffect } from 'react'
 import { NavLink } from 'react-router-dom'
 import './style.scss'
-import { Folder, Home } from 'react-feather'
+import { Folder, Home, ChevronRight } from 'react-feather'
 import PropTypes from 'prop-types'
 import { Loader } from 'semantic-ui-react'
 
 function KnowledgeBaseSidebar(props) {
     const [folders, setFolders] = useState([])
+    const [sidebarOpen, setSidebarOpen] = useState(false)
 
     useEffect(() => {
         let tokenHeaders = new Headers()
@@ -29,15 +30,26 @@ function KnowledgeBaseSidebar(props) {
     }, [])
 
     return (
-        <div className="KnowledgeBaseSidebar">
+        <div className={`KnowledgeBaseSidebar ${sidebarOpen && `KnowledgeBaseSidebar--mobile-open`}`}>
             {props.isLoading ? (
                 <div className="loader">
                     <Loader active size="medium" content=" " />
                 </div>
             ) : (
                 <>
+                    <a
+                        href="#"
+                        onClick={(e) => {
+                            e.preventDefault()
+                            setSidebarOpen(!sidebarOpen)
+                        }}
+                        className="KnowledgeBaseSidebar-mobile-button"
+                    >
+                        <ChevronRight />
+                    </a>
                     <NavLink
                         end
+                        onClick={() => setSidebarOpen(false)}
                         key="KnowledgeBaseSidebar-home"
                         className={({ isActive }) => (!isActive ? 'KnowledgeBaseSidebar-item' : 'KnowledgeBaseSidebar-item KnowledgeBaseSidebar-item--active')}
                         to="/app/knowledgebase"
@@ -51,6 +63,7 @@ function KnowledgeBaseSidebar(props) {
                         return (
                             <NavLink
                                 key={index}
+                                onClick={() => setSidebarOpen(false)}
                                 title={folder.knowledge_base_folder_description}
                                 className={({ isActive }) => (!isActive ? 'KnowledgeBaseSidebar-item' : 'KnowledgeBaseSidebar-item KnowledgeBaseSidebar-item--active')}
                                 to={'/app/knowledgebase/' + folder.id}

diff --git a/src/components/KnowledgeBase/KnowledgeBaseSidebar/style.scss b/src/components/KnowledgeBase/KnowledgeBaseSidebar/style.scss
@@ -11,6 +11,8 @@
     z-index: 0;
     padding: 65px 10px 10px;
     overflow: auto;
+    z-index: 1;
+    transition: all 0.2s;
 
     hr {
         height: 1px;
@@ -55,4 +57,61 @@
             margin-bottom: 0 !important;
         }
     }
+
+    &-mobile-button {
+        display: none;
+        height: 40px;
+        width: 40px;
+        border-radius: 100px;
+        background: #f7f7f7;
+        text-align: center;
+        cursor: pointer;
+        transition: all 0.2s;
+        margin-bottom: 15px;
+        position: relative;
+
+        svg {
+            margin: 8px;
+            transform: none;
+            transition: all 0.2s;
+        }
+
+        &:hover {
+            color: #2185d0;
+            background-color: #eeeeee;
+            transform: scale(0.98);
+        }
+        &:active {
+            transform: scale(0.93);
+            outline: none !important;
+        }
+    }
+
+    &--mobile-open {
+        width: 90% !important;
+        max-width: 400px !important;
+
+        .KnowledgeBaseSidebar-mobile-button {
+            svg {
+                transform: rotate(180deg) !important;
+            }
+        }
+    }
+
+    @media (max-width: 768px) {
+        width: 50px;
+        padding: 65px 5px 5px;
+
+        &:not(&--mobile-open) {
+            *:not(.KnowledgeBaseSidebar-mobile-button):not(.KnowledgeBaseSidebar-mobile-button *) {
+                opacity: 0;
+                pointer-events: none;
+                touch-action: none;
+            }
+        }
+
+        &-mobile-button {
+            display: inline-block;
+        }
+    }
 }
diff --git a/src/scss/style.scss b/src/scss/style.scss
@@ -2,6 +2,8 @@
 @import 'variables.scss';
 * {
     box-sizing: border-box;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    -webkit-tap-highlight-color: transparent;
 }
 
 html,

diff --git a/src/views/KnowledgeBase/style.scss b/src/views/KnowledgeBase/style.scss
@@ -5,7 +5,7 @@ body {
 }
 
 .main_content--knowledge-base {
-    padding: 20px;
+    padding: 20px !important;
     position: absolute;
     top: 51px;
     right: 0;
@@ -76,4 +76,8 @@ body {
             margin-top: 0;
         }
     }
+
+    @media (max-width: 768px) {
+        width: calc(100% - 50px) !important;
+    }
 }
diff --git a/src/views/auth/SignIn/style.scss b/src/views/auth/SignIn/style.scss
@@ -58,7 +58,7 @@ body {
     background: #fdfdfd !important;
 }
 
-@media (max-width: 600px) {
+@media (max-width: 650px) {
     .loginContainer {
         width: 100% !important;
     }