refactor

src/app/ui/nav-link-dropdown.tsx

@@ -1,4 +1,3 @@
-import styles from '@/app/styles/ui.module.scss';
 import { useState, useRef } from 'react';
 import Link from 'next/link';
 import clsx from 'clsx';
@@ -32,35 +31,29 @@ export default function DropDownList() {
 	return (
 		<>
 			<div
-				className={`
-					${styles['nav-dropdown']}
-					${dropDownExpanded ? styles['expanded'] : ''}
-				`}
+				className={`nav-dropdown ${dropDownExpanded ? 'expanded' : ''}`}
 				onClick={dropDownHandler}
 			>
-				<div className={`flex ${styles['nav-link']} cursor-pointer select-none`}>
+				<div className="flex nav-link cursor-pointer select-none">
 					<svg viewBox="0 0 24 24" fill="currentColor">
 						<path d="M17.63 5.84C17.27 5.33 16.67 5 16 5L5 5.01C3.9 5.01 3 5.9 3 7v10c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2l-5.37.84z"></path>
 					</svg>
 					<p>
 						{t('marking')}
 					</p>
-					<svg className={`${styles['dropdown-arrow']}`} viewBox="0 0 24 24" fill="currentColor">
+					<svg className="dropdown-arrow" viewBox="0 0 24 24" fill="currentColor">
 						<path d="M7 10l5 5 5-5z"></path>
 					</svg>
 				</div>
 			</div>
-			<ul className={`
-					${styles['sub-menu']}
-					${dropDownExpanded ? styles['expanded'] : ''}
-				`}>
+			<ul className={`sub-menu ${dropDownExpanded ? 'expanded' : ''}`}>
 				{links.map((link) => {
 					return (
 						<Link
 							key={link.name}
 							href={link.href}
 							className={clsx(
-								`flex ${styles['nav-link']} ${styles['sub-link']}`,
+								`flex nav-link sub-link`,
 								{
 									'bg-[#5659f1]': pathname === link.href,
 								},