diff --git a/compass/app/admin/layout.tsx b/compass/app/admin/layout.tsx
index 78bf6a6..490f601 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";
@@ -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}
- 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..236616e 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";
@@ -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}
- 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 9d1dbd8..af2980c 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";
@@ -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}
- 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..7213fa0 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";
@@ -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}
- 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 2208035..d82ab69 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,
@@ -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,70 +21,96 @@ 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="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} />
- </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"
- />
- )}
+ <>
+ {/* 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>
- <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>
+ {/* 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)}
+ 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} />
+ </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>
+ </div>
</div>
</div>
- </div>
+ </>
);
};