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

feat: 사이드바 Link NavLink로 변경

Browse Source
This commit is contained in:
jhynsoo 2024-07-21 01:34:25 +09:00
parent d915278a7f
commit 928dbcd0ce
2 changed files with 13 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
frontend/src/components/SideBar/SideLink.jsx
View File

@ -1,15 +1,15 @@
import { Link } from 'react-router-dom'; import { NavLink } from 'react-router-dom';
import styles from './SideLink.module.css'; import styles from './SideLink.module.css';
export default function SideLink({ children, path }) { export default function SideLink({ children, to }) {
return ( return (
<li className={styles.list}> <li className={styles.list}>
<Link <NavLink
to={path} to={to}
className={styles.link} className={({ isActive }) => (isActive ? styles.active : styles.link)}
> >
{children} {children}
</Link> </NavLink>
</li> </li>
); );
} }

8
frontend/src/components/SideBar/SideLink.module.css
View File

@ -3,7 +3,8 @@
margin-bottom: 16px; margin-bottom: 16px;
} }
.link { .link,
.active {
width: 100%; width: 100%;
text-decoration: none; text-decoration: none;
color: var(--text-color); color: var(--text-color);
@ -11,3 +12,8 @@
line-height: 1.2; line-height: 1.2;
font-weight: 400; font-weight: 400;
} }
.active {
font-weight: 700;
text-decoration: underline;
}