rushilwiz/compass
1
0
Fork 0
mirror of https://github.com/cssgunc/compass.git synced 2025-04-20 18:40:17 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
compass/app/admin/layout.tsx
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 */}
<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 <Sidebar
setIsSidebarOpen={setIsSidebarOpen} setIsSidebarOpen={setIsSidebarOpen}
isSidebarOpen={isSidebarOpen}
name={user.username} name={user.username}
email={user.email} email={user.email}
isAdmin={user.role === Role.ADMIN} 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"

24
compass/app/home/layout.tsx
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 */}
<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 <Sidebar
name={user.username} name={user.username}
email={user.email} email={user.email}
setIsSidebarOpen={setIsSidebarOpen} setIsSidebarOpen={setIsSidebarOpen}
isSidebarOpen={isSidebarOpen}
isAdmin={user.role === Role.ADMIN} 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"

23
compass/app/resource/layout.tsx
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,26 +47,6 @@ export default function RootLayout({
<div className="flex-row"> <div className="flex-row">
{user ? ( {user ? (
<div> <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 <Sidebar
setIsSidebarOpen={setIsSidebarOpen} setIsSidebarOpen={setIsSidebarOpen}
isSidebarOpen={isSidebarOpen} isSidebarOpen={isSidebarOpen}
@ -75,7 +54,7 @@ export default function RootLayout({
email={user.email} email={user.email}
isAdmin={user.role === Role.ADMIN} isAdmin={user.role === Role.ADMIN}
/> />
{ /* </div>*/ } {/* </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 ${

24
compass/app/service/layout.tsx
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 */}
<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 <Sidebar
setIsSidebarOpen={setIsSidebarOpen} setIsSidebarOpen={setIsSidebarOpen}
isSidebarOpen={isSidebarOpen}
name={user.username} name={user.username}
email={user.email} email={user.email}
isAdmin={user.role === Role.ADMIN} 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"

28
compass/components/Sidebar/Sidebar.tsx
View File

@ -2,6 +2,7 @@ import React from "react";
import { import {
HomeIcon, HomeIcon,
ChevronDoubleLeftIcon, ChevronDoubleLeftIcon,
ChevronDoubleRightIcon,
BookmarkIcon, BookmarkIcon,
ClipboardIcon, ClipboardIcon,
BookOpenIcon, BookOpenIcon,
@ -26,10 +27,28 @@ 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)}
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"> <div className="flex justify-end">
<button <button
onClick={() => setIsSidebarOpen(false)} onClick={() => setIsSidebarOpen(false)}
@ -87,6 +106,7 @@ const Sidebar: React.FC<SidebarProps> = ({
</div> </div>
</div> </div>
</div> </div>
</>
); );
}; };