refactor

src/app/ui/header/notificationsButton.tsx

@@ -1,7 +1,6 @@
 "use client"
 
 import { useState, useRef } from 'react';
-import { fetchFruits } from '@/app/actions/action';
 import { useClickOutside } from '@/app/hooks/useClickOutside';
 import { useTranslations } from 'next-intl';
 import Link from 'next/link';
@@ -10,7 +9,6 @@ import {IconNotification} from '@/app/ui/icons/icons';
 export default function NotificationsButton() {
 	const [isOpen, setIsOpen] = useState(false);
 	const [data, setData] = useState<string | null>(null);
-	const [loading, setLoading] = useState(false);
 	const [error, setError] = useState<string | null>(null);
 	const menuRef = useRef<HTMLDivElement | null>(null);
 	const t = useTranslations('Global');
@@ -19,24 +17,9 @@ export default function NotificationsButton() {
 		setIsOpen(false);
 	});
 
-	const fetchData = async () => {
-		setLoading(true);
-		setError(null);
-
-		try {
-			const result = await fetchFruits();
-			setData("result");
-			setIsOpen(true);
-		} catch (err) {
-			setError('error message');
-		} finally {
-			setLoading(false);
-		}
-	};
-
 	const handleButtonClick = () => {
 		if (!isOpen) {
-			fetchData();
+			setIsOpen(true);
 		} else {
 			setIsOpen(false);
 		}

src/app/ui/logo-icon.tsx

@@ -1,8 +1,6 @@
-import style from "@/app/styles/ui.module.scss"
-
 export default function LogoIcon() {
 	return (
-		<div className={`${style['logo-icon']}`}>
+		<div className="logo-icon">
 			<svg viewBox="0 0 24 24">
 				<path d="M12 2L2 7v10c0 5.55 3.84 9.74 9 11 5.16-1.26 9-5.45 9-11V7l-10-5z"></path>
 			</svg>

src/app/ui/logo.tsx

@@ -1,8 +1,6 @@
-import styles from '@/app/styles/ui.module.scss';
-
 export default function Logo() {
 	return (
-		<div className={`${styles.logo}`}>
+		<div className="logo">
 			<svg viewBox="0 0 24 24" fill="currentColor">
 				<path d="M12 2L2 7v10c0 5.55 3.84 9.74 9 11 5.16-1.26 9-5.45 9-11V7l-10-5z"></path>
 			</svg>

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,
 								},

src/app/ui/nav-links.tsx

@@ -3,7 +3,6 @@
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import clsx from 'clsx';
-import styles from '@/app/styles/ui.module.scss'
 import Logo from '@/app/ui/logo';
 import DropDownList from '@/app/ui/nav-link-dropdown';
 import { logout } from '@/app/actions/auth';
@@ -53,14 +52,14 @@ export default function NavLinks() {
 
 	return (
 		<div className=''>
-			<nav className={`${styles.sidebar}`}>
+			<nav className="sidebar">
 				<Logo />
 				<ul>
 					<Link
 						key={t('home')}
 						href='/pages/dashboard'
 						className={clsx(
-							`flex ${styles['nav-link']}`,
+							"flex nav-link",
 							{
 								'bg-[#5659f1]': pathname === '/pages/dashboard',
 							},
@@ -80,7 +79,7 @@ export default function NavLinks() {
 								key={link.name}
 								href={link.href}
 								className={clsx(
-									`flex ${styles['nav-link']}`,
+									`flex nav-link`,
 									{
 										'bg-[#5659f1]': pathname === link.href,
 									},
@@ -96,7 +95,7 @@ export default function NavLinks() {
 					<Link
 						key={t('exit')}
 						href='/login'
-						className={`flex ${styles['nav-link']}`}
+						className="flex nav-link"
 						onClick={(e) => {
 							e.preventDefault();
 							logout();