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 (
<div className="flex h-full w-[280px] flex-col border-l border-gray-300 bg-gray-100 p-4">
<h2 className="mb-4 text-lg font-semibold text-gray-800">메뉴</h2>
<div className="flex flex-col gap-2">
{menuItems.map((item) => (
<button
key={item.label}
className={cn(
'cursor-pointer rounded-md px-3 py-2 text-left text-gray-700 hover:bg-gray-200',
'transition-colors focus:bg-gray-300 focus:outline-none'
)}
onClick={() => navigate(item.path)}
>
{item.label}
</button>
))}
<div className="flex h-full w-[280px] flex-col justify-between border-l border-gray-300 bg-gray-100">
<div className="flex flex-col gap-2.5">
<header className="subheading flex w-full items-center gap-2 px-5 py-2.5">
<h2 className="w-full overflow-hidden text-ellipsis whitespace-nowrap">메뉴</h2>
</header>
<div className="flex flex-col gap-1 px-2.5">
{menuItems.map((item) => (
<button
key={item.label}
className={cn(
'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'
)}
onClick={() => navigate(item.path)}
>
{item.label}
</button>
))}
</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}
maxSize={35}
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">
<h1 className="w-full overflow-hidden text-ellipsis whitespace-nowrap text-xl font-bold text-gray-900">
<header className="flex w-full items-center justify-between gap-2 border-b border-gray-200 p-4">
<h1 className="heading w-full overflow-hidden text-ellipsis whitespace-nowrap text-xl font-bold text-gray-900">
{workspaceName}
</h1>
<button>
<button className="p-2">
<SquarePen size={16} />
</button>
<Button
@ -40,7 +40,7 @@ export default function AdminProjectSidebar({ workspaceName, projects }: AdminPr
{projects.map((project) => (
<button
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}`)}
>
{project.name}