jhynsoo/worlabel
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Design: admin-page side bar 수정

Browse Source
This commit is contained in:
정현조 2024-09-09 08:37:11 +09:00
parent d0951d0ede
commit 6719bc0823
2 changed files with 24 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
frontend/src/components/AdminMenuSidebar/index.tsx
View File

@ -11,21 +11,25 @@ export default function AdminMenuSidebar() {
]; ];
return ( return (
<div className="flex h-full w-[280px] flex-col border-l border-gray-300 bg-gray-100 p-4"> <div className="flex h-full w-[280px] flex-col justify-between border-l border-gray-300 bg-gray-100">
<h2 className="mb-4 text-lg font-semibold text-gray-800">메뉴</h2> <div className="flex flex-col gap-2.5">
<div className="flex flex-col gap-2"> <header className="subheading flex w-full items-center gap-2 px-5 py-2.5">
{menuItems.map((item) => ( <h2 className="w-full overflow-hidden text-ellipsis whitespace-nowrap">메뉴</h2>
<button </header>
key={item.label} <div className="flex flex-col gap-1 px-2.5">
className={cn( {menuItems.map((item) => (
'cursor-pointer rounded-md px-3 py-2 text-left text-gray-700 hover:bg-gray-200', <button
'transition-colors focus:bg-gray-300 focus:outline-none' key={item.label}
)} className={cn(
onClick={() => navigate(item.path)} 'body cursor-pointer rounded-md px-3 py-2 text-left text-gray-800 hover:bg-gray-200',
> 'transition-colors focus:bg-gray-300 focus:outline-none'
{item.label} )}
</button> onClick={() => navigate(item.path)}
))} >
{item.label}
</button>
))}
</div>
</div> </div>
</div> </div>
); );

10
frontend/src/components/AdminProjectSidebar/index.tsx
View File

@ -18,13 +18,13 @@ export default function AdminProjectSidebar({ workspaceName, projects }: AdminPr
minSize={15} minSize={15}
maxSize={35} maxSize={35}
defaultSize={20} defaultSize={20}
className="flex h-full flex-col bg-gray-100" className="flex h-full flex-col border-r border-gray-200 bg-gray-100"
> >
<header className="body flex w-full items-center gap-2 p-2"> <header className="flex w-full items-center justify-between gap-2 border-b border-gray-200 p-4">
<h1 className="w-full overflow-hidden text-ellipsis whitespace-nowrap text-xl font-bold text-gray-900"> <h1 className="heading w-full overflow-hidden text-ellipsis whitespace-nowrap text-xl font-bold text-gray-900">
{workspaceName} {workspaceName}
</h1> </h1>
<button> <button className="p-2">
<SquarePen size={16} /> <SquarePen size={16} />
</button> </button>
<Button <Button
@ -40,7 +40,7 @@ export default function AdminProjectSidebar({ workspaceName, projects }: AdminPr
{projects.map((project) => ( {projects.map((project) => (
<button <button
key={project.id} key={project.id}
className="rounded-md px-3 py-2 text-left hover:bg-gray-200" className="body cursor-pointer rounded-md px-3 py-2 text-left hover:bg-gray-200"
onClick={() => navigate(`/project/${project.id}`)} onClick={() => navigate(`/project/${project.id}`)}
> >
{project.name} {project.name}