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

Refactor Sidebar.tsx (for /resource)

Browse Source 
Will look weird on other pages.
This commit is contained in:
Andy Chan 2024-10-15 20:19:38 -04:00
parent cb54c9829d
commit d9b56bb839
2 changed files with 10 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
compass/app/resource/layout.tsx
View File

@ -61,20 +61,21 @@ export default function RootLayout({
} }
</button> </button>
{/* sidebar */} {/* sidebar */}
<div {/* <div
className={`absolute inset-y-0 left-0 transform ${ className={`absolute inset-y-0 left-0 transform ${
isSidebarOpen isSidebarOpen
? "translate-x-0" ? "translate-x-0"
: "-translate-x-full" : "-translate-x-full"
} w-64 transition duration-300 ease-in-out`} } 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> { /* </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 ${

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

@ -12,6 +12,7 @@ import { UserProfile } from "../resource/UserProfile";
interface SidebarProps { interface SidebarProps {
setIsSidebarOpen: React.Dispatch<React.SetStateAction<boolean>>; setIsSidebarOpen: React.Dispatch<React.SetStateAction<boolean>>;
isSidebarOpen: boolean;
name: string; name: string;
email: string; email: string;
isAdmin: boolean; isAdmin: boolean;
@ -19,12 +20,15 @@ interface SidebarProps {
const Sidebar: React.FC<SidebarProps> = ({ const Sidebar: React.FC<SidebarProps> = ({
setIsSidebarOpen, setIsSidebarOpen,
isSidebarOpen,
name, name,
email, email,
isAdmin: admin, isAdmin: admin,
}) => { }) => {
return ( return (
<div className="w-64 h-full border border-gray-200 bg-gray-50 px-4"> <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 */} {/* button to close sidebar */}
<div className="flex justify-end"> <div className="flex justify-end">
<button <button