src/template/Sidebar/index.module.scss

@@ -3,45 +3,45 @@
 	height: 100%;
 	margin-top: 40px;
 
+	&__container {
+		width: 100%;
+		height: auto;
+	}
+
 	@media screen and (min-width: 1025px) {
+		max-height: 285px;
 		margin-top: 0;
 		border-right: 1px solid var(--clr-common-black);
-		max-height: 285px;
 	}
 
 	@media screen and (min-width: 2500px) {
 		max-height: 465px;
 	}
+}
+
+.sidebar__list {
+	a {
+		display: inline-block;
 
-	.container {
 		width: 100%;
-		height: auto;
-	}
+		padding: 10px 20px;
 
-	.list {
-		li {
-			a {
-				display: inline-block;
+		font-weight: 400;
+		font-size: var(--txt-medium);
+		line-height: 18.75px;
 
-				width: 100%;
-				padding: 10px 20px;
+		color: var(--clr-gray-600);
 
-				font-weight: 400;
-				font-size: var(--txt-medium);
-				line-height: 18.75px;
+		transition: background 700ms ease;
 
-				color: var(--clr-gray-600);
+		&.active {
+			color: var(--clr-common-white);
+			background: var(--clr-common-black);
+			font-weight: 700;
+		}
 
-				&.active {
-					background-color: var(--clr-common-black);
-					color: var(--clr-common-white);
-					font-weight: 700;
-				}
-
-				@media screen and (min-width: 2500px) {
-					line-height: 37.5px;
-				}
-			}
+		@media screen and (min-width: 2500px) {
+			line-height: 37.5px;
 		}
 	}
 }

src/template/Sidebar/index.tsx

@@ -16,14 +16,14 @@ export function Sidebar() {
 
 	return (
 		<aside className={styles['sidebar']}>
-			<div className={styles.container}>
-				<ul className={styles.list}>
+			<div className={styles['sidebar__container']}>
+				<ul className={styles['sidebar__list']}>
 					{paths.map(({ path, name }) => {
 						return (
-							<li key={name + '-sidebar'}>
+							<li key={name.replace(' ', '-').toLowerCase() + '-sidebar'}>
 								<Link
-									className={pathname === path ? styles.active : ''}
 									to={path}
+									className={pathname === path ? styles['active'] : ''}
 								>
 									{name}
 								</Link>