style(sidebar): update menu items to use normal font weight
This commit is contained in:
@@ -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>
|
|
||||||
);
|
|
||||||
};
|
};
|
||||||
Reference in New Issue
Block a user