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

Significantly reduces boilerplate of sidebar on pages where it is used.
This commit is contained in:
Andy Chan 2024-10-22 00:17:34 -04:00
parent d9b56bb839
commit 722f61364e
5 changed files with 106 additions and 173 deletions

View File

@ -2,7 +2,6 @@
import Sidebar from "@/components/Sidebar/Sidebar"; import Sidebar from "@/components/Sidebar/Sidebar";
import React, { useState } from "react"; import React, { useState } from "react";
import { ChevronDoubleRightIcon } from "@heroicons/react/24/outline";
import { createClient } from "@/utils/supabase/client"; import { createClient } from "@/utils/supabase/client";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
import { useEffect } from "react"; import { useEffect } from "react";
@ -56,34 +55,13 @@ export default function RootLayout({
<div className="flex-row"> <div className="flex-row">
{user ? ( {user ? (
<div> <div>
{/* button to open sidebar */} <Sidebar
<button setIsSidebarOpen={setIsSidebarOpen}
onClick={() => setIsSidebarOpen(!isSidebarOpen)} isSidebarOpen={isSidebarOpen}
className={`fixed z-20 p-2 text-gray-500 hover:text-gray-800 left-0`} name={user.username}
aria-label={"Open sidebar"} email={user.email}
> isAdmin={user.role === Role.ADMIN}
{ />
!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 */}
<div <div
className={`flex-1 transition duration-300 ease-in-out ${ className={`flex-1 transition duration-300 ease-in-out ${
isSidebarOpen ? "ml-64" : "ml-0" isSidebarOpen ? "ml-64" : "ml-0"

View File

@ -1,7 +1,6 @@
"use client"; "use client";
import Sidebar from "@/components/Sidebar/Sidebar"; import Sidebar from "@/components/Sidebar/Sidebar";
import React, { useState } from "react"; import React, { useState } from "react";
import { ChevronDoubleRightIcon } from "@heroicons/react/24/outline";
import { createClient } from "@/utils/supabase/client"; import { createClient } from "@/utils/supabase/client";
import { useEffect } from "react"; import { useEffect } from "react";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
@ -45,34 +44,13 @@ export default function RootLayout({
<div className="flex-row"> <div className="flex-row">
{user ? ( {user ? (
<div> <div>
{/* button to open sidebar */} <Sidebar
<button name={user.username}
onClick={() => setIsSidebarOpen(!isSidebarOpen)} email={user.email}
className={`fixed z-20 p-2 text-gray-500 hover:text-gray-800 left-0`} setIsSidebarOpen={setIsSidebarOpen}
aria-label={"Open sidebar"} isSidebarOpen={isSidebarOpen}
> isAdmin={user.role === Role.ADMIN}
{ />
!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 */}
<div <div
className={`flex-1 transition duration-300 ease-in-out ${ className={`flex-1 transition duration-300 ease-in-out ${
isSidebarOpen ? "ml-64" : "ml-0" isSidebarOpen ? "ml-64" : "ml-0"

View File

@ -2,7 +2,6 @@
import Sidebar from "@/components/Sidebar/Sidebar"; import Sidebar from "@/components/Sidebar/Sidebar";
import React, { useState } from "react"; import React, { useState } from "react";
import { ChevronDoubleRightIcon } from "@heroicons/react/24/outline";
import { createClient } from "@/utils/supabase/client"; import { createClient } from "@/utils/supabase/client";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
import { useEffect } from "react"; import { useEffect } from "react";
@ -48,34 +47,14 @@ export default function RootLayout({
<div className="flex-row"> <div className="flex-row">
{user ? ( {user ? (
<div> <div>
{/* button to open sidebar */} <Sidebar
<button setIsSidebarOpen={setIsSidebarOpen}
onClick={() => setIsSidebarOpen(!isSidebarOpen)} isSidebarOpen={isSidebarOpen}
className={`fixed z-20 p-2 text-gray-500 hover:text-gray-800 left-0`} name={user.username}
aria-label={"Open sidebar"} email={user.email}
> isAdmin={user.role === Role.ADMIN}
{ />
!isSidebarOpen && ( {/* </div>*/}
<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 */} {/* page ui */}
<div <div
className={`flex-1 transition duration-300 ease-in-out ${ className={`flex-1 transition duration-300 ease-in-out ${

View File

@ -2,7 +2,6 @@
import Sidebar from "@/components/Sidebar/Sidebar"; import Sidebar from "@/components/Sidebar/Sidebar";
import React, { useState } from "react"; import React, { useState } from "react";
import { ChevronDoubleRightIcon } from "@heroicons/react/24/outline";
import { createClient } from "@/utils/supabase/client"; import { createClient } from "@/utils/supabase/client";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
import { useEffect } from "react"; import { useEffect } from "react";
@ -48,34 +47,13 @@ export default function RootLayout({
<div className="flex-row"> <div className="flex-row">
{user ? ( {user ? (
<div> <div>
{/* button to open sidebar */} <Sidebar
<button setIsSidebarOpen={setIsSidebarOpen}
onClick={() => setIsSidebarOpen(!isSidebarOpen)} isSidebarOpen={isSidebarOpen}
className={`fixed z-20 p-2 text-gray-500 hover:text-gray-800 left-0`} name={user.username}
aria-label={"Open sidebar"} email={user.email}
> isAdmin={user.role === Role.ADMIN}
{ />
!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 */}
<div <div
className={`flex-1 transition duration-300 ease-in-out ${ className={`flex-1 transition duration-300 ease-in-out ${
isSidebarOpen ? "ml-64" : "ml-0" isSidebarOpen ? "ml-64" : "ml-0"

View File

@ -2,6 +2,7 @@ import React from "react";
import { import {
HomeIcon, HomeIcon,
ChevronDoubleLeftIcon, ChevronDoubleLeftIcon,
ChevronDoubleRightIcon,
BookmarkIcon, BookmarkIcon,
ClipboardIcon, ClipboardIcon,
BookOpenIcon, BookOpenIcon,
@ -26,67 +27,86 @@ const Sidebar: React.FC<SidebarProps> = ({
isAdmin: admin, isAdmin: admin,
}) => { }) => {
return ( 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") {/* Button to open the sidebar. */}
+ " transition duration-300 ease-out"}> <button
{/* button to close sidebar */} onClick={() => setIsSidebarOpen(true)}
<div className="flex justify-end"> className={`fixed z-20 p-2 text-gray-500 hover:text-gray-800 left-0`}
<button aria-label={"Open sidebar"}
onClick={() => setIsSidebarOpen(false)} >
className="py-2 text-gray-500 hover:text-gray-800" {!isSidebarOpen && (
aria-label="Close sidebar" <ChevronDoubleRightIcon className="h-5 w-5" />
> )}
<ChevronDoubleLeftIcon className="h-5 w-5" /> </button>
</button> {/* The sidebar itself. */}
</div> <div
<div className="flex flex-col space-y-8"> className={
{/* user + logout button */} "fixed left-0 w-64 h-full border border-gray-200 bg-gray-50 px-4 " +
<div className="flex items-center p-4 space-x-2 border border-gray-200 rounded-md "> (isSidebarOpen
<UserProfile name={name} email={email} /> ? "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> </div>
{/* navigation menu */} <div className="flex flex-col space-y-8">
<div className="flex flex-col space-y-2"> {/* user + logout button */}
<h4 className="text-xs font-semibold text-gray-500"> <div className="flex items-center p-4 space-x-2 border border-gray-200 rounded-md ">
Pages <UserProfile name={name} email={email} />
</h4> </div>
<nav className="flex flex-col"> {/* navigation menu */}
{admin && ( <div className="flex flex-col space-y-2">
<SidebarItem <h4 className="text-xs font-semibold text-gray-500">
icon={<LockClosedIcon />} Pages
text="Admin" </h4>
active={true} <nav className="flex flex-col">
redirect="/admin" {admin && (
/> <SidebarItem
)} icon={<LockClosedIcon />}
text="Admin"
active={true}
redirect="/admin"
/>
)}
<SidebarItem <SidebarItem
icon={<HomeIcon />} icon={<HomeIcon />}
text="Home" text="Home"
active={true} active={true}
redirect="/home" redirect="/home"
/> />
<SidebarItem <SidebarItem
icon={<BookmarkIcon />} icon={<BookmarkIcon />}
text="Resources" text="Resources"
active={true} active={true}
redirect="/resource" redirect="/resource"
/> />
<SidebarItem <SidebarItem
icon={<ClipboardIcon />} icon={<ClipboardIcon />}
text="Services" text="Services"
active={true} active={true}
redirect="/service" redirect="/service"
/> />
<SidebarItem <SidebarItem
icon={<BookOpenIcon />} icon={<BookOpenIcon />}
text="Training Manuals" text="Training Manuals"
active={true} active={true}
redirect="/training-manuals" redirect="/training-manuals"
/> />
</nav> </nav>
</div>
</div> </div>
</div> </div>
</div> </>
); );
}; };