feat: Route list page

src/entities/navigation/ui/index.tsx

@@ -8,7 +8,7 @@ import List from "@mui/material/List";
 import ExpandLessIcon from "@mui/icons-material/ExpandLess";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import type { NavigationItem } from "../model";
-import { useNavigate } from "react-router-dom";
+import { useNavigate, useLocation } from "react-router-dom";
 
 interface NavigationItemProps {
   item: NavigationItem;
@@ -25,8 +25,11 @@ export const NavigationItemComponent: React.FC<NavigationItemProps> = ({
 }) => {
   const Icon = item.icon;
   const navigate = useNavigate();
+  const location = useLocation();
   const [isExpanded, setIsExpanded] = React.useState(false);
 
+  const isActive = item.path ? location.pathname.startsWith(item.path) : false;
+
   const handleClick = () => {
     if (item.nestedItems) {
       setIsExpanded(!isExpanded);
@@ -57,6 +60,12 @@ export const NavigationItemComponent: React.FC<NavigationItemProps> = ({
             isNested && {
               pl: 4,
             },
+            isActive && {
+              backgroundColor: "rgba(0, 0, 0, 0.08)",
+              "&:hover": {
+                backgroundColor: "rgba(0, 0, 0, 0.12)",
+              },
+            },
           ]}
         >
           <ListItemIcon
@@ -64,6 +73,7 @@ export const NavigationItemComponent: React.FC<NavigationItemProps> = ({
               {
                 minWidth: 0,
                 justifyContent: "center",
+                color: isActive ? "primary.main" : "inherit",
               },
               open
                 ? {
@@ -86,6 +96,10 @@ export const NavigationItemComponent: React.FC<NavigationItemProps> = ({
                 : {
                     opacity: 0,
                   },
+              isActive && {
+                color: "primary.main",
+                fontWeight: "bold",
+              },
             ]}
           />
           {item.nestedItems &&