Keep Sidebar fixed + refactor Sidebar.tsx (#38)

* Refactor Sidebar.tsx (for /resource)

Will look weird on other pages.

* Move sidebar open button into Sidebar.tsx, apply to other pages

Significantly reduces boilerplate of sidebar on pages where it is used.

* Set sidebar to be open by default

* Minor code formatting

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";
@@ -14,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>();
 
@@ -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}
+                        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 ${
                             isSidebarOpen ? "ml-64" : "ml-0"

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";
@@ -13,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();
 
@@ -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}
+                        isSidebarOpen={isSidebarOpen}
                         isAdmin={user.role === Role.ADMIN}
                     />
-                    </div>
-                    {/* page ui  */}
                     <div
                         className={`flex-1 transition duration-300 ease-in-out ${
                             isSidebarOpen ? "ml-64" : "ml-0"

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";
@@ -14,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>();
 
@@ -48,33 +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>
+                    {/* </div>*/}
                     {/* page ui  */}
                     <div
                         className={`flex-1 transition duration-300 ease-in-out ${

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";
@@ -14,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>();
 
@@ -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}
+                        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 ${
                             isSidebarOpen ? "ml-64" : "ml-0"

compass/components/Sidebar/Sidebar.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import {
     HomeIcon,
     ChevronDoubleLeftIcon,
+    ChevronDoubleRightIcon,
     BookmarkIcon,
     ClipboardIcon,
     BookOpenIcon,
@@ -12,6 +13,7 @@ import { UserProfile } from "../resource/UserProfile";
 
 interface SidebarProps {
     setIsSidebarOpen: React.Dispatch<React.SetStateAction<boolean>>;
+    isSidebarOpen: boolean;
     name: string;
     email: string;
     isAdmin: boolean;
@@ -19,13 +21,37 @@ 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  */}
+            {/* 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" // Open
+                        : "-translate-x-full opacity-25") + // Closed
+                    " transition duration-300 ease-out" // More animation properties
+                }
+            >
+                {/* Button to close sidebar  */}
                 <div className="flex justify-end">
                     <button
                         onClick={() => setIsSidebarOpen(false)}
@@ -35,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 ">
@@ -83,6 +110,7 @@ const Sidebar: React.FC<SidebarProps> = ({
                     </div>
                 </div>
             </div>
+        </>
     );
 };