Refactor: Split Sidebar.tsx into smaller components

Refactored the Sidebar component into smaller, more manageable files to improve code organization and maintainability.

Fix sidebar auto-expansion issue
Ensured the sidebar's collapsed state is maintained when navigating between pages.

application/src/components/dashboard/sidebar/MenuItem.tsx

@@ -0,0 +1,54 @@
+
+import React from "react";
+import { useLocation, useNavigate } from "react-router-dom";
+import { useTheme } from "@/contexts/ThemeContext";
+import { useLanguage } from "@/contexts/LanguageContext";
+import { LucideIcon } from "lucide-react";
+
+interface MenuItemProps {
+  id: string;
+  path: string | null;
+  icon: LucideIcon;
+  translationKey: string;
+  color: string;
+  hasNavigation: boolean;
+  collapsed: boolean;
+}
+
+export const MenuItem: React.FC<MenuItemProps> = ({
+  id,
+  path,
+  icon: Icon,
+  translationKey,
+  color,
+  hasNavigation,
+  collapsed
+}) => {
+  const { theme } = useTheme();
+  const { t } = useLanguage();
+  const location = useLocation();
+  const navigate = useNavigate();
+
+  const handleClick = (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    
+    if (hasNavigation && path) {
+      // Use navigate instead of window.location to prevent full page reload
+      navigate(path, { replace: false });
+    }
+  };
+
+  const isActive = path && location.pathname === path;
+  const mainIconSize = "h-6 w-6";
+
+  return (
+    <div 
+      className={`${collapsed ? 'p-3' : 'p-2 pl-3'} mb-1 rounded-lg ${isActive ? theme === 'dark' ? 'bg-gray-800' : 'bg-sidebar-accent' : `hover:${theme === 'dark' ? 'bg-gray-800' : 'bg-sidebar-accent'}`} flex items-center ${collapsed ? 'justify-center' : ''} transition-colors duration-200 cursor-pointer`}
+      onClick={handleClick}
+    >
+      <Icon className={`${mainIconSize} ${color}`} />
+      {!collapsed && <span className="ml-2.5 font-medium text-foreground tracking-wide text-[15px]">{t(translationKey)}</span>}
+    </div>
+  );
+};