Skip to content

feat(security-ui): security domain local nav as left LNB sidebar (shell parity) #945

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
seonghobae wants to merge 1 commit into
base: develop
Choose a base branch
from
Open

feat(security-ui): security domain local nav as left LNB sidebar (shell parity) #945

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
73 changes: 50 additions & 23 deletions frontend/src/components/SecurityLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -685,31 +685,57 @@ export function SecurityLayout() {
}, [activeTab, data, error, loading]);

return (
<div className="flex h-full min-h-0 min-w-0 flex-col overflow-x-hidden bg-background text-foreground">
<header className="flex h-20 shrink-0 items-center overflow-hidden border-b border-border bg-card px-4 md:px-8">
<h1 className="flex shrink-0 items-center gap-3 text-xl font-bold md:text-2xl">
<ShieldCheck className="size-6 text-primary" />
<span className="hidden sm:inline">보안과 관리자</span>
<div className="flex h-full min-h-0 min-w-0 overflow-x-hidden bg-background text-foreground">
{/* Local navigation (LNB): desktop left sidebar for the security domain's areas */}
<nav
aria-label="보안 로컬 탐색"
className="hidden w-60 shrink-0 flex-col gap-1 border-r border-border bg-card p-4 lg:flex"
>
<h1 className="mb-2 flex items-center gap-2 px-2 text-lg font-bold">
<ShieldCheck className="size-5 text-primary" aria-hidden="true" />
<span>보안과 관리자</span>
</h1>
<p className="sr-only">관리자 경계</p>
<div className="ml-4 flex min-w-0 flex-1 gap-2 overflow-x-auto pb-1 md:ml-8">
{tabs.map((tab) => (
<button type="button"
key={tab}
onClick={() => setActiveTab(tab)}
className={`shrink-0 whitespace-nowrap rounded-md px-3 py-2 text-sm font-bold transition-colors md:px-4 ${
activeTab === tab
? 'bg-primary text-primary-foreground'
: 'text-muted-foreground hover:bg-secondary'
}`}
>
{tab}
</button>
))}
</div>
</header>
{tabs.map((tab) => (
<button
type="button"
key={tab}
aria-current={activeTab === tab ? 'page' : undefined}
onClick={() => setActiveTab(tab)}
className={`rounded-lg px-3 py-2 text-left text-sm font-bold transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40 ${
activeTab === tab
? 'bg-primary text-primary-foreground'
: 'text-muted-foreground hover:bg-secondary'
}`}
>
{tab}
</button>
))}
</nav>

<div className="flex min-w-0 flex-1 flex-col overflow-hidden">
{/* Mobile local tabs: the LNB collapses to a horizontal tab strip below the desktop breakpoint */}
<header className="flex h-16 shrink-0 items-center overflow-hidden border-b border-border bg-card px-4 lg:hidden">
<h1 className="sr-only">보안과 관리자</h1>
<div className="flex min-w-0 flex-1 gap-2 overflow-x-auto pb-1">
{tabs.map((tab) => (
<button
type="button"
key={tab}
aria-current={activeTab === tab ? 'page' : undefined}
onClick={() => setActiveTab(tab)}
className={`shrink-0 whitespace-nowrap rounded-md px-3 py-2 text-sm font-bold transition-colors ${
activeTab === tab
? 'bg-primary text-primary-foreground'
: 'text-muted-foreground hover:bg-secondary'
}`}
>
{tab}
</button>
))}
</div>
</header>

<main className="min-w-0 flex-1 overflow-y-auto overflow-x-hidden p-4 md:p-8">
<main className="min-w-0 flex-1 overflow-y-auto overflow-x-hidden p-4 md:p-8">
<div className="mx-auto max-w-6xl space-y-5">
<div className="flex flex-wrap items-center justify-between gap-3">
<div>
Expand Down Expand Up @@ -758,6 +784,7 @@ export function SecurityLayout() {
{content}
</div>
</main>
</div>
</div>
);
}
Loading