Skip to content
Snippets Groups Projects
Commit 981625e6 authored by 한동현's avatar 한동현
Browse files

feat: 사이드바 선택 항목 강조 추가

parent b46c0456
No related branches found
No related tags found
No related merge requests found
import * as React from 'react'; import * as React from 'react';
import { Link } from 'react-router'; import { Link, useLocation } from 'react-router';
import { useAuthStore } from '@/stores/authStore'; import { useAuthStore } from '@/stores/authStore';
import { ArrowLeftRight, ShieldCheck, Server, TextSearch, CircleHelp } from 'lucide-react'; import { ArrowLeftRight, ShieldCheck, Server, TextSearch, CircleHelp } from 'lucide-react';
import { import {
...@@ -26,13 +26,11 @@ const data = { ...@@ -26,13 +26,11 @@ const data = {
icon: ArrowLeftRight, icon: ArrowLeftRight,
title: '라우팅 설정', title: '라우팅 설정',
url: 'routing', url: 'routing',
isActive: true,
}, },
{ {
icon: ShieldCheck, icon: ShieldCheck,
title: 'SSL 인증서', title: 'SSL 인증서',
url: 'certificate', url: 'certificate',
isActive: false,
}, },
], ],
}, },
...@@ -43,7 +41,6 @@ const data = { ...@@ -43,7 +41,6 @@ const data = {
icon: Server, icon: Server,
title: 'SSH 설정', title: 'SSH 설정',
url: 'forwarding', url: 'forwarding',
isActive: false,
}, },
], ],
}, },
...@@ -54,7 +51,6 @@ const data = { ...@@ -54,7 +51,6 @@ const data = {
icon: TextSearch, icon: TextSearch,
title: '설정 변경 내역', title: '설정 변경 내역',
url: 'log', url: 'log',
isActive: false,
}, },
], ],
}, },
...@@ -63,6 +59,8 @@ const data = { ...@@ -63,6 +59,8 @@ const data = {
export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) { export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
const { token } = useAuthStore(); const { token } = useAuthStore();
const location = useLocation();
const selected = location.pathname.split('/')[1] || '';
return ( return (
<Sidebar className="top-(--header-height) h-[calc(100svh-var(--header-height))]!" {...props}> <Sidebar className="top-(--header-height) h-[calc(100svh-var(--header-height))]!" {...props}>
...@@ -81,7 +79,7 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) { ...@@ -81,7 +79,7 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
<SidebarMenuItem key={item.title}> <SidebarMenuItem key={item.title}>
<SidebarMenuButton <SidebarMenuButton
asChild asChild
isActive={item.isActive} isActive={selected === item.url}
className={token ? '' : 'cursor-not-allowed opacity-50'} className={token ? '' : 'cursor-not-allowed opacity-50'}
> >
<Link to={item.url}> <Link to={item.url}>
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment