create pages, drawer path

src/components/DrawerList.jsx

@@ -1,73 +1,149 @@
-import List from "@mui/material/List"
-import ListItem from "@mui/material/ListItem"
-import ListItemButton from "@mui/material/ListItemButton"
-import ListItemIcon from "@mui/material/ListItemIcon"
-import ListItemText from "@mui/material/ListItemText"
-import DashboardCustomizeIcon from "@mui/icons-material/DashboardCustomize"
-import AttachMoneyIcon from "@mui/icons-material/AttachMoney"
-import InventoryIcon from "@mui/icons-material/Inventory"
-import StoreIcon from "@mui/icons-material/Store"
-import StarsIcon from "@mui/icons-material/Stars"
-import ShoppingCartIcon from "@mui/icons-material/ShoppingCart"
-import { useNavigate } from "react-router-dom"
+import List from "@mui/material/List";
+import ListItem from "@mui/material/ListItem";
+import ListItemButton from "@mui/material/ListItemButton";
+import ListItemIcon from "@mui/material/ListItemIcon";
+import DashboardCustomizeIcon from "@mui/icons-material/DashboardCustomize";
+import AttachMoneyIcon from "@mui/icons-material/AttachMoney";
+import InventoryIcon from "@mui/icons-material/Inventory";
+import StoreIcon from "@mui/icons-material/Store";
+import StarsIcon from "@mui/icons-material/Stars";
+import ShoppingCartIcon from "@mui/icons-material/ShoppingCart";
+import * as React from "react";
+import { styled } from "@mui/material/styles";
+import Menu from "@mui/material/Menu";
+import MenuItem from "@mui/material/MenuItem";
+import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
+import FormatListBulletedIcon from '@mui/icons-material/FormatListBulleted';
+import AddToPhotosIcon from '@mui/icons-material/AddToPhotos';
 
-const DrawerList = ({handleClickPath}) => {
-
-  const icons = [
-    {
-      title: "Dashboard",
-      iconName: <DashboardCustomizeIcon />,
-      path: "/stock",
-    },
-    {
-      title: "Purchases",
-      iconName: <ShoppingCartIcon />,
-      path: "/stock/purchases/",
-    },
-    {
-      title: "Sales",
-      iconName: <AttachMoneyIcon />,
-      path: "/stock/sales/",
+const StyledMenu = styled((props) => (
+  <Menu
+    elevation={0}
+    anchorOrigin={{
+      vertical: "bottom",
+      horizontal: "right",
+    }}
+    transformOrigin={{
+      vertical: "top",
+      horizontal: "right",
+    }}
+    {...props}
+  />
+))(({ theme }) => ({
+  "& .MuiPaper-root": {
+    borderRadius: 6,
+    marginTop: theme.spacing(1),
+    minWidth: 180,
+    boxShadow:
+      "rgb(255, 255, 255) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px",
+    "& .MuiMenu-list": {
+      padding: "4px 0",
     },
-    {
-      title: "Firms",
-      iconName: <StoreIcon />,
-      path: "/stock/firms/",
+    "& .MuiMenuItem-root": {
+      "& .MuiSvgIcon-root": {
+        fontSize: 18,
+        marginRight: theme.spacing(1.5),
+      },
     },
-    {
-      title: "Brands",
-      iconName: <StarsIcon />,
-      path: "/stock/brands/",
-    },
-    {
-      title: "Products",
-      iconName: <InventoryIcon />,
-      path: "/stock/products/",
-    },
-  ]
+  },
+}));
+
+const DrawerList = ({ handleClickPath }) => {
+  const [anchorEl, setAnchorEl] = React.useState(null);
+  const [selectedMenu, setSelectedMenu] = React.useState(null);
+
+  const handleMenuClick = (event, index) => {
+    setAnchorEl(event.currentTarget);
+    setSelectedMenu(index);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+    setSelectedMenu(null);
+  };
+
+  const icons = [
+    { title: "Dashboard", icon: <DashboardCustomizeIcon />, path: "/stock" },
+    { title: "Purchases", icon: <ShoppingCartIcon />},
+    { title: "Sales", icon: <AttachMoneyIcon />},
+    { title: "Firms", icon: <StoreIcon />},
+    { title: "Brands", icon: <StarsIcon /> },
+    { title: "Products", icon: <InventoryIcon />},
+  ];
+
+  const menuItems = [
+    [],
+    [
+      { title: "Add Purchase", icon: <AddToPhotosIcon />, path: "/stock/addpurchase" },
+      { title: "List Purchases", icon: <FormatListBulletedIcon />, path: "/stock/listpuchases" },
+    ],
+    [
+      { title: "Add Sales", icon: <AddToPhotosIcon />, path: "/stock/addsales" },
+      { title: "List Sales", icon: <FormatListBulletedIcon />, path: "/stock/listsales" },
+    ],
+    [
+      { title: "Add Firm", icon: <AddToPhotosIcon />, path: "/stock/addfirm" },
+      { title: "List Firms", icon: <FormatListBulletedIcon />, path: "/stock/listfirms" },
+    ],
+    [
+      { title: "Add Brand", icon: <AddToPhotosIcon />, path: "/stock/addbrand" },
+      { title: "List Brands", icon: <FormatListBulletedIcon />, path: "/stock/listbrands" },
+    ],
+    [
+      { title: "Add Product", icon: <AddToPhotosIcon />, path: "/stock/addproduct" },
+      { title: "List Products", icon: <FormatListBulletedIcon />, path: "/stock/listproducts" },
+    ],
+  ];
 
   return (
-      <List>
-        {icons.map((item, index) => (
-          <ListItem
-            key={index}
-            disablePadding
-            onClick={() => handleClickPath(item.path)}
+    <List>
+      {icons.map((item, index) => (
+        <ListItem key={index} disablePadding>
+
+          <ListItemButton
             sx={{
-              ":hover":{backgroundColor:"#0551B6"},
               color: "white",
+              ":hover": { backgroundColor: "#0551B6" },
               "& .MuiSvgIcon-root": { color: "white" },
-
             }}
+            aria-controls={selectedMenu === index ? "demo-customized-menu" : undefined}
+            aria-haspopup="true"
+            aria-expanded={selectedMenu === index ? "true" : undefined}
+            variant="text"
+            onClick={(event) => handleMenuClick(event, index)}
+          >
+            <ListItemIcon>{item.icon}</ListItemIcon>
+            {item.title}
+            <KeyboardArrowDownIcon sx={{ ml: "auto" }} />
+          </ListItemButton>
+          <StyledMenu
+            id="demo-customized-menu"
+            MenuListProps={{
+              "aria-labelledby": "demo-customized-button",
+            }}
+            anchorEl={anchorEl}
+            open={selectedMenu === index}
+            onClose={handleClose}
           >
-            <ListItemButton>
-              <ListItemIcon>{item.iconName}</ListItemIcon>
-              <ListItemText primary={item.title} />
-            </ListItemButton>
-          </ListItem>
-        ))}
-      </List>
-  )
-}
+            {menuItems[index].map((menuItem, idx) => (
+              <MenuItem
+                key={idx}
+                onClick={() => {
+                  handleClose();
+                  handleClickPath(menuItem.path);
+                }}
+                sx={{ ":hover": { backgroundColor: "#064EAF", color: "white" } }}
+                disableRipple
+              >
+                {menuItem.icon}
+                {menuItem.title}
+              </MenuItem>
+            ))}
+          </StyledMenu>
+        </ListItem>
+      ))}
+    </List>
+  );
+};
 
-export default DrawerList
+export default DrawerList;

src/pages/AddBrand.jsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+const AddBrand = () => {
+  return (
+    <div>
+      Brands ekleme
+    </div>
+  )
+}
+
+export default AddBrand

src/pages/AddFirm.jsx

@@ -0,0 +1,10 @@
+
+const AddFirm = () => {
+  return (
+    <div>
+      Firma ekleme
+    </div>
+  )
+}
+
+export default AddFirm

src/pages/AddProduct.jsx

@@ -0,0 +1,10 @@
+
+const AddProduct = () => {
+  return (
+    <div>
+      add product
+    </div>
+  )
+}
+
+export default AddProduct

src/pages/AddPurchase.jsx

@@ -0,0 +1,10 @@
+
+const AddPurchase = () => {
+  return (
+    <div>
+      add purchase
+    </div>
+  )
+}
+
+export default AddPurchase

src/pages/AddSales.jsx

@@ -0,0 +1,10 @@
+
+const AddSales = () => {
+  return (
+    <div>
+      add sales
+    </div>
+  )
+}
+
+export default AddSales

src/pages/Dashboard.jsx

@@ -12,15 +12,21 @@ import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
 import ChevronRightIcon from "@mui/icons-material/ChevronRight";
 import { Avatar, Badge, Button, Menu, MenuItem, Paper } from "@mui/material";
 import DrawerList from "../components/DrawerList";
-import Firms from "./Firms";
 import Home from "./Home";
 import { Dashboard } from "@mui/icons-material";
-import Purchases from "./Purchases";
-import Sales from "./Sales";
-import Brands from "./Brands";
-import Products from "./Products";
 import { useSelector } from "react-redux";
 import useApiRequest from "../services/useApiRequest";
+import AddBrand from "./AddBrand";
+import AddPurchase from "./AddPurchase";
+import AddSales from "./AddSales";
+import AddFirm from "./AddFirm";
+import AddProduct from "./AddProduct";
+import { useNavigate } from "react-router";
+import ListProducts from "./ListProducts";
+import ListBrands from "./ListBrands";
+import ListFirms from "./ListFirms";
+import ListPurchases from "./ListPurchases";
+import ListSales from "./ListSales";
 
 const drawerWidth = 240;
 
@@ -99,6 +105,7 @@ export default function MiniDrawer() {
   const [selectedPath, setSelectedPath] = React.useState("/stock");
   const {logout} = useApiRequest()
 
+  console.log(selectedPath)
   // profil dropdown
   const handleClick = (event) => {
     setAnchorEl(event.currentTarget);
@@ -136,8 +143,9 @@ export default function MiniDrawer() {
       },
     },
   }));
-
+const navigate = useNavigate()
   const handleClickPath = (path) => {
+    navigate(path)
     setSelectedPath(path);
   };
 
@@ -229,18 +237,27 @@ export default function MiniDrawer() {
       </Drawer>
       <Box component="main" sx={{ flexGrow: 1, p: 3 }}>
         <DrawerHeader />
-        {selectedPath === "/stock" ? (
-          <Dashboard />
-        ) : selectedPath === "/stock/purchases/" ? (
-          <Purchases />
-        ) : selectedPath === "/stock/sales/" ? (
-          <Sales />
-        ) : selectedPath === "/stock/firms/" ? (
-          <Firms />
-        ) : selectedPath === "/stock/brands/" ? (
-          <Brands />
-        ) : selectedPath === "/stock/products/" ? (
-          <Products />
+
+        {selectedPath === "/stock/addpurchase" ? (
+          <AddPurchase />
+        ) : selectedPath === "/stock/addsales" ? (
+          <AddSales />
+        ) : selectedPath === "/stock/addfirm" ? (
+          <AddFirm />
+        ) : selectedPath === "/stock/addbrand" ? (
+          <AddBrand />
+        ) : selectedPath === "/stock/addproduct" ? (
+          <AddProduct />
+        ) : selectedPath === "/stock/listproducts" ? (
+          <ListProducts />
+        ) : selectedPath === "/stock/listbrands" ? (
+          <ListBrands />
+        ) : selectedPath === "/stock/listfirms" ? (
+          <ListFirms />
+        ) : selectedPath === "/stock/listpurchases" ? (
+          <ListPurchases />
+        ) : selectedPath === "/stock/listsales" ? (
+          <ListSales />
         ) : (
           <Home />
         )}

src/pages/Home.jsx

@@ -2,7 +2,7 @@
 const Home = () => {
   return (
     <div>
-
+      Home sayfası
     </div>
   )
 }

src/pages/ListBrands.jsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+const ListBrands = () => {
+  return (
+    <div>
+
+    </div>
+  )
+}
+
+export default ListBrands

src/pages/Brands.jsx → src/pages/ListFirms.jsx

@@ -1,11 +1,11 @@
 import React from 'react'
 
-const Brands = () => {
+const ListFirms = () => {
   return (
     <div>
 
     </div>
   )
 }
 
-export default Brands
+export default ListFirms