60 lines
2.2 KiB
JavaScript
60 lines
2.2 KiB
JavaScript
import React from 'react';
|
|
import { NavLink } from 'react-router-dom';
|
|
import { navLinks } from '../routes.jsx';
|
|
import { useIsMobile } from '../hooks/useIsMobile';
|
|
import mainLogo from '../assets/main_logo.png';
|
|
import './Navbar.css';
|
|
|
|
const Navbar = () => {
|
|
const isMobile = useIsMobile();
|
|
|
|
// 모바일에서는 BottomNav가 대체하므로 사이드바 미렌더링
|
|
if (isMobile) return null;
|
|
|
|
return (
|
|
<aside className="sidebar">
|
|
<div className="sidebar__brand">
|
|
<img src={mainLogo} alt="Logo" className="sidebar__logo" />
|
|
<div className="sidebar__brand-text">
|
|
<p className="sidebar__brand-name">Jaeoh</p>
|
|
<p className="sidebar__brand-sub">MANAGEMENT ROOM</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="sidebar__divider" />
|
|
|
|
<nav className="sidebar__nav">
|
|
<p className="sidebar__section-label">NAVIGATION</p>
|
|
{navLinks.map((link) => (
|
|
<NavLink
|
|
key={link.id}
|
|
to={link.path}
|
|
className={({ isActive }) =>
|
|
`sidebar__item${isActive ? ' is-active' : ''}`
|
|
}
|
|
style={{ '--item-accent': link.accent }}
|
|
end={link.path === '/'}
|
|
>
|
|
<span className="sidebar__item-icon">{link.icon}</span>
|
|
<span className="sidebar__item-label">{link.label}</span>
|
|
<span className="sidebar__item-dot" />
|
|
</NavLink>
|
|
))}
|
|
</nav>
|
|
|
|
<div className="sidebar__footer">
|
|
<div className="sidebar__divider" />
|
|
<div className="sidebar__footer-content">
|
|
<div className="sidebar__status">
|
|
<span className="sidebar__status-dot" />
|
|
<span className="sidebar__status-text">System Online</span>
|
|
</div>
|
|
<p className="sidebar__version">v2.0.0</p>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
);
|
|
};
|
|
|
|
export default Navbar;
|