Implement the collapsable sidebar (#344)

* Implement the collapsable sidebar * Use classNames and useCallback to improve the layout code
trento-project · Apr 13, 2022 · a075f67 · a075f67
1 parent 6b472cc
commit a075f67
Showing 1 changed file with 24 additions and 4 deletions.
diff --git a/assets/js/components/Layout/Layout.jsx b/assets/js/components/Layout/Layout.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState, useCallback } from 'react';
 import { Link, Outlet, useLocation } from 'react-router-dom';
 
 import {
@@ -14,6 +14,8 @@ import {
 import TrentoLogo from '../../../static/trento-logo-stacked.svg';
 import HammeringStefano from '../../../static/hammering_stefano.png';
 
+import classNames from 'classnames';
+
 const navigation = [
   { name: 'Dashboard', href: '/', icon: EOS_HOME_OUTLINED },
   {
@@ -47,12 +49,27 @@ const navigation = [
 const Layout = () => {
   const { pathname } = useLocation();
   const isCurrentRoute = (route) => pathname === route;
+  const [isCollapsed, setCollapsed] = useState(
+    localStorage.getItem('sidebar-collapsed')
+  );
+
+  const handleSidebar = useCallback(() => {
+    setCollapsed(!isCollapsed);
+    isCollapsed
+      ? localStorage.removeItem('sidebar-collapsed')
+      : localStorage.setItem('sidebar-collapsed', true);
+  }, [isCollapsed]);
 
   return (
     <>
       <main className="bg-gray-100 dark:bg-gray-800 h-screen overflow-hidden relative">
         <div className="flex items-start justify-between">
-          <div className="h-screen hidden lg:block shadow-lg relative w-64 flex-shrink-0">
+          <div
+            className={classNames(
+              'h-screen block shadow-lg relative w-64 flex-shrink-0',
+              { hidden: isCollapsed }
+            )}
+          >
             <div className="bg-white h-full dark:bg-gray-700">
               <div className="flex items-center justify-center pt-6">
                 <div className="self-center">
@@ -87,8 +104,11 @@ const Layout = () => {
           </div>
           <div className="flex flex-col w-full md:space-y-4">
             <header className="w-full h-16 z-40 flex items-center justify-between">
-              <div className="block lg:hidden ml-6">
-                <button className="flex p-2 items-center rounded-full bg-white shadow text-gray-500 text-md">
+              <div className="block ml-6">
+                <button
+                  className="flex p-2 items-center rounded-full bg-white shadow text-gray-500 text-md"
+                  onClick={handleSidebar}
+                >
                   <svg
                     width="20"
                     height="20"