#6 Allow minimizing sidebar

UniRegensburg · Aug 18, 2022 · dd4c9a3 · dd4c9a3
1 parent fafaf93
commit dd4c9a3
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 7 deletions.
diff --git a/src/components/sidebar/Sidebar.tsx b/src/components/sidebar/Sidebar.tsx
@@ -1,6 +1,7 @@
 import { useState } from "react";
 import { SidebarHeader } from "./SidebarHeader";
 import { SidebarNotes } from "./SidebarNotes";
+import cx from "classnames";
 
 const sidebars = [
   {
@@ -22,10 +23,22 @@ export const Sidebar = () => {
   const [sidebarOpen, setSidebarOpen] = useState<boolean>(true);
 
   return (
-    <aside className="w-[400px] h-full overflow-y-clip shadow-lg p-4 divide-y-[1px] divide-lightGrey">
-      <SidebarHeader setActiveSidebar={setActiveSidebar} />
+    <aside
+      className={cx(
+        "h-full overflow-y-clip shadow-lg divide-y-[1px] divide-lightGrey transition-width duration-300",
+        {
+          "w-[40px] pt-4 px-1 overflow-hidden": !sidebarOpen,
+          "w-[400px] p-4": sidebarOpen,
+        }
+      )}
+    >
+      <SidebarHeader
+        setActiveSidebar={setActiveSidebar}
+        setSidebarOpenForContent={setSidebarOpen}
+      />
       {sidebars.map(
-        (sidebar) => sidebar.name === activeSidebar && sidebar.jsxElem
+        (sidebar) =>
+          sidebar.name === activeSidebar && sidebarOpen && sidebar.jsxElem
       )}
     </aside>
   );

diff --git a/src/components/sidebar/SidebarHeader.tsx b/src/components/sidebar/SidebarHeader.tsx
@@ -5,6 +5,7 @@ import { Button } from "../Button";
 
 interface SidebarProps {
   setActiveSidebar: any;
+  setSidebarOpenForContent: any;
 }
 
 const buttons = [
@@ -22,7 +23,10 @@ const buttons = [
   },
 ];
 
-export const SidebarHeader: React.FC<SidebarProps> = ({ setActiveSidebar }) => {
+export const SidebarHeader: React.FC<SidebarProps> = ({
+  setActiveSidebar,
+  setSidebarOpenForContent,
+}) => {
   const [activeButton, setActiveButton] = useState<string>(buttons[0].name);
   const [sidebarOpen, setSidebarOpen] = useState<boolean>(true);
 
@@ -38,15 +42,18 @@ export const SidebarHeader: React.FC<SidebarProps> = ({ setActiveSidebar }) => {
           "rotate-90": sidebarOpen,
           "rotate-0": !sidebarOpen,
         })}
-        onClick={() => setSidebarOpen(!sidebarOpen)}
+        onClick={() => {
+          setSidebarOpen(!sidebarOpen);
+          setSidebarOpenForContent(!sidebarOpen);
+        }}
       >
         <Button
           key={"sidebarActive"}
           bgColor="transparent"
           size="sm"
           textColor="font-bold text-darkGrey"
           hasText={false}
-          alternativePadding="p-2"
+          alternativePadding="py-1.5 px-1.5"
           icon={<List size={18} />}
         />
       </div>

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -2,7 +2,11 @@
 module.exports = {
   content: ["./src/**/*.{js,jsx,ts,tsx}"],
   theme: {
-    extend: {},
+    extend: {
+      transitionProperty: {
+        'width': 'width'
+      }
+    },
     colors: {
       white: "#fff",
       offWhite: "#F5F5F5",