From d9b56bb83957f98ef662290b79fa0eff91ad49fe Mon Sep 17 00:00:00 2001
From: Andy Chan <andy@12beesinatrenchco.at>
Date: Tue, 15 Oct 2024 20:19:38 -0400
Subject: [PATCH 1/4] Refactor Sidebar.tsx (for /resource)

Will look weird on other pages.
---
 compass/app/resource/layout.tsx        | 7 ++++---
 compass/components/Sidebar/Sidebar.tsx | 8 ++++++--
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/compass/app/resource/layout.tsx b/compass/app/resource/layout.tsx
index 9d1dbd8..4bbb960 100644
--- a/compass/app/resource/layout.tsx
+++ b/compass/app/resource/layout.tsx
@@ -61,20 +61,21 @@ export default function RootLayout({
                         }
                     </button>
                     {/* sidebar  */}
-                    <div
+                    {/* <div
                         className={`absolute inset-y-0 left-0 transform ${
                             isSidebarOpen
                                 ? "translate-x-0"
                                 : "-translate-x-full"
                         } w-64 transition duration-300 ease-in-out`}
-                    >
+                    > */}
                         <Sidebar
                             setIsSidebarOpen={setIsSidebarOpen}
+                            isSidebarOpen={isSidebarOpen}
                             name={user.username}
                             email={user.email}
                             isAdmin={user.role === Role.ADMIN}
                         />
-                    </div>
+                    { /* </div>*/ }
                     {/* page ui  */}
                     <div
                         className={`flex-1 transition duration-300 ease-in-out ${
diff --git a/compass/components/Sidebar/Sidebar.tsx b/compass/components/Sidebar/Sidebar.tsx
index 2208035..ab87cf0 100644
--- a/compass/components/Sidebar/Sidebar.tsx
+++ b/compass/components/Sidebar/Sidebar.tsx
@@ -12,6 +12,7 @@ import { UserProfile } from "../resource/UserProfile";
 
 interface SidebarProps {
     setIsSidebarOpen: React.Dispatch<React.SetStateAction<boolean>>;
+    isSidebarOpen: boolean;
     name: string;
     email: string;
     isAdmin: boolean;
@@ -19,13 +20,16 @@ interface SidebarProps {
 
 const Sidebar: React.FC<SidebarProps> = ({
     setIsSidebarOpen,
+    isSidebarOpen,
     name,
     email,
     isAdmin: admin,
 }) => {
     return (
-        <div className="w-64 h-full border border-gray-200 bg-gray-50 px-4">
-            {/* button to close sidebar  */}
+        <div className={"fixed left-0 w-64 h-full border border-gray-200 bg-gray-50 px-4 "
+            + (isSidebarOpen ? "translate-x-0" : "-translate-x-full opacity-25")
+            + " transition duration-300 ease-out"}>
+        {/* button to close sidebar  */}
             <div className="flex justify-end">
                 <button
                     onClick={() => setIsSidebarOpen(false)}

From 722f61364eac3d5a9790167464680354321dc98a Mon Sep 17 00:00:00 2001
From: Andy Chan <andy@12beesinatrenchco.at>
Date: Tue, 22 Oct 2024 00:17:34 -0400
Subject: [PATCH 2/4] Move sidebar open button into Sidebar.tsx, apply to other
 pages

Significantly reduces boilerplate of sidebar on pages where it is used.
---
 compass/app/admin/layout.tsx           |  36 ++-----
 compass/app/home/layout.tsx            |  36 ++-----
 compass/app/resource/layout.tsx        |  37 ++-----
 compass/app/service/layout.tsx         |  36 ++-----
 compass/components/Sidebar/Sidebar.tsx | 134 ++++++++++++++-----------
 5 files changed, 106 insertions(+), 173 deletions(-)

diff --git a/compass/app/admin/layout.tsx b/compass/app/admin/layout.tsx
index 78bf6a6..21994d4 100644
--- a/compass/app/admin/layout.tsx
+++ b/compass/app/admin/layout.tsx
@@ -2,7 +2,6 @@
 
 import Sidebar from "@/components/Sidebar/Sidebar";
 import React, { useState } from "react";
-import { ChevronDoubleRightIcon } from "@heroicons/react/24/outline";
 import { createClient } from "@/utils/supabase/client";
 import { useRouter } from "next/navigation";
 import { useEffect } from "react";
@@ -56,34 +55,13 @@ export default function RootLayout({
         <div className="flex-row">
             {user ? (
                 <div>
-                    {/* button to open sidebar */}
-                    <button
-                        onClick={() => setIsSidebarOpen(!isSidebarOpen)}
-                        className={`fixed z-20 p-2 text-gray-500 hover:text-gray-800 left-0`}
-                        aria-label={"Open sidebar"}
-                    >
-                        {
-                            !isSidebarOpen && (
-                                <ChevronDoubleRightIcon className="h-5 w-5" />
-                            ) // Icon for closing the sidebar
-                        }
-                    </button>
-                    {/* sidebar  */}
-                    <div
-                        className={`absolute inset-y-0 left-0 transform ${
-                            isSidebarOpen
-                                ? "translate-x-0"
-                                : "-translate-x-full"
-                        } w-64 transition duration-300 ease-in-out`}
-                    >
-                        <Sidebar
-                            setIsSidebarOpen={setIsSidebarOpen}
-                            name={user.username}
-                            email={user.email}
-                            isAdmin={user.role === Role.ADMIN}
-                        />
-                    </div>
-                    {/* page ui  */}
+                    <Sidebar
+                        setIsSidebarOpen={setIsSidebarOpen}
+                        isSidebarOpen={isSidebarOpen}
+                        name={user.username}
+                        email={user.email}
+                        isAdmin={user.role === Role.ADMIN}
+                    />
                     <div
                         className={`flex-1 transition duration-300 ease-in-out ${
                             isSidebarOpen ? "ml-64" : "ml-0"
diff --git a/compass/app/home/layout.tsx b/compass/app/home/layout.tsx
index eb054de..d868f8d 100644
--- a/compass/app/home/layout.tsx
+++ b/compass/app/home/layout.tsx
@@ -1,7 +1,6 @@
 "use client";
 import Sidebar from "@/components/Sidebar/Sidebar";
 import React, { useState } from "react";
-import { ChevronDoubleRightIcon } from "@heroicons/react/24/outline";
 import { createClient } from "@/utils/supabase/client";
 import { useEffect } from "react";
 import { useRouter } from "next/navigation";
@@ -45,34 +44,13 @@ export default function RootLayout({
         <div className="flex-row">
             {user ? (
                 <div>
-                    {/* button to open sidebar */}
-                    <button
-                        onClick={() => setIsSidebarOpen(!isSidebarOpen)}
-                        className={`fixed z-20 p-2 text-gray-500 hover:text-gray-800 left-0`}
-                        aria-label={"Open sidebar"}
-                    >
-                        {
-                            !isSidebarOpen && (
-                                <ChevronDoubleRightIcon className="h-5 w-5" />
-                            ) // Icon for closing the sidebar
-                        }
-                    </button>
-                    {/* sidebar  */}
-                    <div
-                        className={`absolute inset-y-0 left-0 transform ${
-                            isSidebarOpen
-                                ? "translate-x-0"
-                                : "-translate-x-full"
-                        } w-64 transition duration-300 ease-in-out`}
-                    >
-                        <Sidebar
-                            name={user.username}
-                            email={user.email}
-                            setIsSidebarOpen={setIsSidebarOpen}
-                            isAdmin={user.role === Role.ADMIN}
-                        />
-                    </div>
-                    {/* page ui  */}
+                    <Sidebar
+                        name={user.username}
+                        email={user.email}
+                        setIsSidebarOpen={setIsSidebarOpen}
+                        isSidebarOpen={isSidebarOpen}
+                        isAdmin={user.role === Role.ADMIN}
+                    />
                     <div
                         className={`flex-1 transition duration-300 ease-in-out ${
                             isSidebarOpen ? "ml-64" : "ml-0"
diff --git a/compass/app/resource/layout.tsx b/compass/app/resource/layout.tsx
index 4bbb960..1481164 100644
--- a/compass/app/resource/layout.tsx
+++ b/compass/app/resource/layout.tsx
@@ -2,7 +2,6 @@
 
 import Sidebar from "@/components/Sidebar/Sidebar";
 import React, { useState } from "react";
-import { ChevronDoubleRightIcon } from "@heroicons/react/24/outline";
 import { createClient } from "@/utils/supabase/client";
 import { useRouter } from "next/navigation";
 import { useEffect } from "react";
@@ -48,34 +47,14 @@ export default function RootLayout({
         <div className="flex-row">
             {user ? (
                 <div>
-                    {/* button to open sidebar */}
-                    <button
-                        onClick={() => setIsSidebarOpen(!isSidebarOpen)}
-                        className={`fixed z-20 p-2 text-gray-500 hover:text-gray-800 left-0`}
-                        aria-label={"Open sidebar"}
-                    >
-                        {
-                            !isSidebarOpen && (
-                                <ChevronDoubleRightIcon className="h-5 w-5" />
-                            ) // Icon for closing the sidebar
-                        }
-                    </button>
-                    {/* sidebar  */}
-                    {/* <div
-                        className={`absolute inset-y-0 left-0 transform ${
-                            isSidebarOpen
-                                ? "translate-x-0"
-                                : "-translate-x-full"
-                        } w-64 transition duration-300 ease-in-out`}
-                    > */}
-                        <Sidebar
-                            setIsSidebarOpen={setIsSidebarOpen}
-                            isSidebarOpen={isSidebarOpen}
-                            name={user.username}
-                            email={user.email}
-                            isAdmin={user.role === Role.ADMIN}
-                        />
-                    { /* </div>*/ }
+                    <Sidebar
+                        setIsSidebarOpen={setIsSidebarOpen}
+                        isSidebarOpen={isSidebarOpen}
+                        name={user.username}
+                        email={user.email}
+                        isAdmin={user.role === Role.ADMIN}
+                    />
+                    {/* </div>*/}
                     {/* page ui  */}
                     <div
                         className={`flex-1 transition duration-300 ease-in-out ${
diff --git a/compass/app/service/layout.tsx b/compass/app/service/layout.tsx
index 1fff740..5815cc7 100644
--- a/compass/app/service/layout.tsx
+++ b/compass/app/service/layout.tsx
@@ -2,7 +2,6 @@
 
 import Sidebar from "@/components/Sidebar/Sidebar";
 import React, { useState } from "react";
-import { ChevronDoubleRightIcon } from "@heroicons/react/24/outline";
 import { createClient } from "@/utils/supabase/client";
 import { useRouter } from "next/navigation";
 import { useEffect } from "react";
@@ -48,34 +47,13 @@ export default function RootLayout({
         <div className="flex-row">
             {user ? (
                 <div>
-                    {/* button to open sidebar */}
-                    <button
-                        onClick={() => setIsSidebarOpen(!isSidebarOpen)}
-                        className={`fixed z-20 p-2 text-gray-500 hover:text-gray-800 left-0`}
-                        aria-label={"Open sidebar"}
-                    >
-                        {
-                            !isSidebarOpen && (
-                                <ChevronDoubleRightIcon className="h-5 w-5" />
-                            ) // Icon for closing the sidebar
-                        }
-                    </button>
-                    {/* sidebar  */}
-                    <div
-                        className={`absolute inset-y-0 left-0 transform ${
-                            isSidebarOpen
-                                ? "translate-x-0"
-                                : "-translate-x-full"
-                        } w-64 transition duration-300 ease-in-out`}
-                    >
-                        <Sidebar
-                            setIsSidebarOpen={setIsSidebarOpen}
-                            name={user.username}
-                            email={user.email}
-                            isAdmin={user.role === Role.ADMIN}
-                        />
-                    </div>
-                    {/* page ui  */}
+                    <Sidebar
+                        setIsSidebarOpen={setIsSidebarOpen}
+                        isSidebarOpen={isSidebarOpen}
+                        name={user.username}
+                        email={user.email}
+                        isAdmin={user.role === Role.ADMIN}
+                    />
                     <div
                         className={`flex-1 transition duration-300 ease-in-out ${
                             isSidebarOpen ? "ml-64" : "ml-0"
diff --git a/compass/components/Sidebar/Sidebar.tsx b/compass/components/Sidebar/Sidebar.tsx
index ab87cf0..934d8e1 100644
--- a/compass/components/Sidebar/Sidebar.tsx
+++ b/compass/components/Sidebar/Sidebar.tsx
@@ -2,6 +2,7 @@ import React from "react";
 import {
     HomeIcon,
     ChevronDoubleLeftIcon,
+    ChevronDoubleRightIcon,
     BookmarkIcon,
     ClipboardIcon,
     BookOpenIcon,
@@ -26,67 +27,86 @@ const Sidebar: React.FC<SidebarProps> = ({
     isAdmin: admin,
 }) => {
     return (
-        <div className={"fixed left-0 w-64 h-full border border-gray-200 bg-gray-50 px-4 "
-            + (isSidebarOpen ? "translate-x-0" : "-translate-x-full opacity-25")
-            + " transition duration-300 ease-out"}>
-        {/* button to close sidebar  */}
-            <div className="flex justify-end">
-                <button
-                    onClick={() => setIsSidebarOpen(false)}
-                    className="py-2 text-gray-500 hover:text-gray-800"
-                    aria-label="Close sidebar"
-                >
-                    <ChevronDoubleLeftIcon className="h-5 w-5" />
-                </button>
-            </div>
-            <div className="flex flex-col space-y-8">
-                {/* user + logout button  */}
-                <div className="flex items-center p-4 space-x-2 border border-gray-200 rounded-md ">
-                    <UserProfile name={name} email={email} />
+        <>
+            {/* Button to open the sidebar. */}
+            <button
+                onClick={() => setIsSidebarOpen(true)}
+                className={`fixed z-20 p-2 text-gray-500 hover:text-gray-800 left-0`}
+                aria-label={"Open sidebar"}
+            >
+                {!isSidebarOpen && (
+                    <ChevronDoubleRightIcon className="h-5 w-5" />
+                )}
+            </button>
+            {/* The sidebar itself. */}
+            <div
+                className={
+                    "fixed left-0 w-64 h-full border border-gray-200 bg-gray-50 px-4 " +
+                    (isSidebarOpen
+                        ? "translate-x-0"
+                        : "-translate-x-full opacity-25") +
+                    " transition duration-300 ease-in-out"
+                }
+            >
+                {/* Button to close sidebar  */}
+                <div className="flex justify-end">
+                    <button
+                        onClick={() => setIsSidebarOpen(false)}
+                        className="py-2 text-gray-500 hover:text-gray-800"
+                        aria-label="Close sidebar"
+                    >
+                        <ChevronDoubleLeftIcon className="h-5 w-5" />
+                    </button>
                 </div>
-                {/* navigation menu  */}
-                <div className="flex flex-col space-y-2">
-                    <h4 className="text-xs font-semibold text-gray-500">
-                        Pages
-                    </h4>
-                    <nav className="flex flex-col">
-                        {admin && (
-                            <SidebarItem
-                                icon={<LockClosedIcon />}
-                                text="Admin"
-                                active={true}
-                                redirect="/admin"
-                            />
-                        )}
+                <div className="flex flex-col space-y-8">
+                    {/* user + logout button  */}
+                    <div className="flex items-center p-4 space-x-2 border border-gray-200 rounded-md ">
+                        <UserProfile name={name} email={email} />
+                    </div>
+                    {/* navigation menu  */}
+                    <div className="flex flex-col space-y-2">
+                        <h4 className="text-xs font-semibold text-gray-500">
+                            Pages
+                        </h4>
+                        <nav className="flex flex-col">
+                            {admin && (
+                                <SidebarItem
+                                    icon={<LockClosedIcon />}
+                                    text="Admin"
+                                    active={true}
+                                    redirect="/admin"
+                                />
+                            )}
 
-                        <SidebarItem
-                            icon={<HomeIcon />}
-                            text="Home"
-                            active={true}
-                            redirect="/home"
-                        />
-                        <SidebarItem
-                            icon={<BookmarkIcon />}
-                            text="Resources"
-                            active={true}
-                            redirect="/resource"
-                        />
-                        <SidebarItem
-                            icon={<ClipboardIcon />}
-                            text="Services"
-                            active={true}
-                            redirect="/service"
-                        />
-                        <SidebarItem
-                            icon={<BookOpenIcon />}
-                            text="Training Manuals"
-                            active={true}
-                            redirect="/training-manuals"
-                        />
-                    </nav>
+                            <SidebarItem
+                                icon={<HomeIcon />}
+                                text="Home"
+                                active={true}
+                                redirect="/home"
+                            />
+                            <SidebarItem
+                                icon={<BookmarkIcon />}
+                                text="Resources"
+                                active={true}
+                                redirect="/resource"
+                            />
+                            <SidebarItem
+                                icon={<ClipboardIcon />}
+                                text="Services"
+                                active={true}
+                                redirect="/service"
+                            />
+                            <SidebarItem
+                                icon={<BookOpenIcon />}
+                                text="Training Manuals"
+                                active={true}
+                                redirect="/training-manuals"
+                            />
+                        </nav>
+                    </div>
                 </div>
             </div>
-        </div>
+        </>
     );
 };
 

From f78973e974a5a8f7f43fa6725d680e40f6670468 Mon Sep 17 00:00:00 2001
From: Andy Chan <andy@12beesinatrenchco.at>
Date: Tue, 22 Oct 2024 00:18:31 -0400
Subject: [PATCH 3/4] Set sidebar to be open by default

---
 compass/app/admin/layout.tsx    | 2 +-
 compass/app/home/layout.tsx     | 2 +-
 compass/app/resource/layout.tsx | 2 +-
 compass/app/service/layout.tsx  | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/compass/app/admin/layout.tsx b/compass/app/admin/layout.tsx
index 21994d4..490f601 100644
--- a/compass/app/admin/layout.tsx
+++ b/compass/app/admin/layout.tsx
@@ -13,7 +13,7 @@ export default function RootLayout({
 }: {
     children: React.ReactNode;
 }) {
-    const [isSidebarOpen, setIsSidebarOpen] = useState(false);
+    const [isSidebarOpen, setIsSidebarOpen] = useState(true);
     const router = useRouter();
     const [user, setUser] = useState<User>();
 
diff --git a/compass/app/home/layout.tsx b/compass/app/home/layout.tsx
index d868f8d..236616e 100644
--- a/compass/app/home/layout.tsx
+++ b/compass/app/home/layout.tsx
@@ -12,7 +12,7 @@ export default function RootLayout({
 }: {
     children: React.ReactNode;
 }) {
-    const [isSidebarOpen, setIsSidebarOpen] = useState(false);
+    const [isSidebarOpen, setIsSidebarOpen] = useState(true);
     const [user, setUser] = useState<User>();
     const router = useRouter();
 
diff --git a/compass/app/resource/layout.tsx b/compass/app/resource/layout.tsx
index 1481164..af2980c 100644
--- a/compass/app/resource/layout.tsx
+++ b/compass/app/resource/layout.tsx
@@ -13,7 +13,7 @@ export default function RootLayout({
 }: {
     children: React.ReactNode;
 }) {
-    const [isSidebarOpen, setIsSidebarOpen] = useState(false);
+    const [isSidebarOpen, setIsSidebarOpen] = useState(true);
     const router = useRouter();
     const [user, setUser] = useState<User>();
 
diff --git a/compass/app/service/layout.tsx b/compass/app/service/layout.tsx
index 5815cc7..7213fa0 100644
--- a/compass/app/service/layout.tsx
+++ b/compass/app/service/layout.tsx
@@ -13,7 +13,7 @@ export default function RootLayout({
 }: {
     children: React.ReactNode;
 }) {
-    const [isSidebarOpen, setIsSidebarOpen] = useState(false);
+    const [isSidebarOpen, setIsSidebarOpen] = useState(true);
     const router = useRouter();
     const [user, setUser] = useState<User>();
 

From b15c8b9e57dc76ae2a4ae0c796ac13fb4826bb9a Mon Sep 17 00:00:00 2001
From: Andy Chan <andy@12beesinatrenchco.at>
Date: Tue, 22 Oct 2024 00:26:41 -0400
Subject: [PATCH 4/4] Minor code formatting

---
 compass/components/Sidebar/Sidebar.tsx | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/compass/components/Sidebar/Sidebar.tsx b/compass/components/Sidebar/Sidebar.tsx
index 934d8e1..d82ab69 100644
--- a/compass/components/Sidebar/Sidebar.tsx
+++ b/compass/components/Sidebar/Sidebar.tsx
@@ -31,21 +31,24 @@ const Sidebar: React.FC<SidebarProps> = ({
             {/* Button to open the sidebar. */}
             <button
                 onClick={() => setIsSidebarOpen(true)}
-                className={`fixed z-20 p-2 text-gray-500 hover:text-gray-800 left-0`}
+                className={
+                    "fixed z-20 p-2 text-gray-500 hover:text-gray-800 left-0"
+                }
                 aria-label={"Open sidebar"}
             >
                 {!isSidebarOpen && (
                     <ChevronDoubleRightIcon className="h-5 w-5" />
                 )}
             </button>
+
             {/* The sidebar itself. */}
             <div
                 className={
                     "fixed left-0 w-64 h-full border border-gray-200 bg-gray-50 px-4 " +
                     (isSidebarOpen
-                        ? "translate-x-0"
-                        : "-translate-x-full opacity-25") +
-                    " transition duration-300 ease-in-out"
+                        ? "translate-x-0" // Open
+                        : "-translate-x-full opacity-25") + // Closed
+                    " transition duration-300 ease-out" // More animation properties
                 }
             >
                 {/* Button to close sidebar  */}
@@ -58,6 +61,7 @@ const Sidebar: React.FC<SidebarProps> = ({
                         <ChevronDoubleLeftIcon className="h-5 w-5" />
                     </button>
                 </div>
+
                 <div className="flex flex-col space-y-8">
                     {/* user + logout button  */}
                     <div className="flex items-center p-4 space-x-2 border border-gray-200 rounded-md ">