style(sidebar): update menu items to use normal font weight

This commit is contained in:
Tola Leng
2025-10-01 22:59:21 +07:00
parent f5a8d989cc
commit a4364936e3
@@ -1,10 +1,8 @@
import React from "react"; import React from "react";
import { useLocation, useNavigate } from "react-router-dom"; import { useLocation, useNavigate } from "react-router-dom";
import { useTheme } from "@/contexts/ThemeContext"; import { useTheme } from "@/contexts/ThemeContext";
import { useLanguage } from "@/contexts/LanguageContext"; import { useLanguage } from "@/contexts/LanguageContext";
import { LucideIcon } from "lucide-react"; import { LucideIcon } from "lucide-react";
interface MenuItemProps { interface MenuItemProps {
id: string; id: string;
path: string | null; path: string | null;
@@ -14,7 +12,6 @@ interface MenuItemProps {
hasNavigation: boolean; hasNavigation: boolean;
collapsed: boolean; collapsed: boolean;
} }
export const MenuItem: React.FC<MenuItemProps> = ({ export const MenuItem: React.FC<MenuItemProps> = ({
id, id,
path, path,
@@ -24,41 +21,36 @@ export const MenuItem: React.FC<MenuItemProps> = ({
hasNavigation, hasNavigation,
collapsed collapsed
}) => { }) => {
const { theme } = useTheme(); const {
const { t } = useLanguage(); theme
} = useTheme();
const {
t
} = useLanguage();
const location = useLocation(); const location = useLocation();
const navigate = useNavigate(); const navigate = useNavigate();
const handleClick = (e: React.MouseEvent) => { const handleClick = (e: React.MouseEvent) => {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
if (hasNavigation && path) { if (hasNavigation && path) {
navigate(path, { replace: false }); navigate(path, {
replace: false
});
} }
}; };
const isActive = path && location.pathname === path; const isActive = path && location.pathname === path;
const mainIconSize = "h-6 w-6"; const mainIconSize = "h-6 w-6";
return <div className={`
return (
<div
className={`
${collapsed ? 'p-3' : 'p-2 pl-3'} ${collapsed ? 'p-3' : 'p-2 pl-3'}
mb-1 rounded-lg mb-1 rounded-lg
${isActive ? (theme === 'dark' ? 'bg-gray-800' : 'bg-sidebar-accent') : `hover:${theme === 'dark' ? 'bg-gray-800' : 'bg-sidebar-accent'}`} ${isActive ? theme === 'dark' ? 'bg-gray-800' : 'bg-sidebar-accent' : `hover:${theme === 'dark' ? 'bg-gray-800' : 'bg-sidebar-accent'}`}
flex items-center flex items-center
${collapsed ? 'justify-center' : ''} ${collapsed ? 'justify-center' : ''}
cursor-pointer cursor-pointer
`} `} onClick={handleClick}>
onClick={handleClick}
>
<Icon className={`${mainIconSize} ${color}`} /> <Icon className={`${mainIconSize} ${color}`} />
{!collapsed && ( {!collapsed && <span className="ml-2.5 text-foreground tracking-wide text-[15px] font-normal">
<span className="ml-2.5 font-medium text-foreground tracking-wide text-[15px]">
{t(translationKey)} {t(translationKey)}
</span> </span>}
)} </div>;
</div>
);
}; };