init

src/app/[locale]/(views)/profile/components/ISidebar.tsx

@@ -0,0 +1,37 @@
+'use client';
+
+import { Box, List, ListItemButton, ListItemText } from '@mui/material';
+import { usePathname } from 'next/navigation';
+import { IconCard, IconPage, IconProducts, IconSettings } from '@/components/common/Icons';
+
+const menuItems = [
+    { value: '', label: 'Mahsulotlar', icon: IconProducts },
+    { value: '/user-data', label: "Ma'lumotlarim", icon: IconPage },
+    // { value: '/id-and-address', label: "ID / Adres", icon: IconCard },
+    { value: '/settings', label: "Sozlamalar", icon: IconSettings },
+];
+
+export function ISidebar({ locale }: { locale: string }) {
+    const pathname = usePathname();
+
+    return (
+        // <Box width={{xs: 86, md: 240}} bgcolor='#fff' p={2}>
+        <Box display={{xs: 'flex', md: 'block'}} bgcolor='#fff' p={2}>
+            {/*<List disablePadding>*/}
+            <List disablePadding sx={{display: {xs: 'flex', md: 'inline-block'}, marginX: 'auto'}}>
+                {menuItems.map(item => (
+                    <ListItemButton
+                        key={item.value}
+                        href={`/${locale}/profile/${item.value}`}
+                        selected={pathname.split('profile').at(-1) === item.value}
+                        sx={{ display: 'flex', alignItems: 'center', gap: '10px' }}
+                    >
+                        {!!item.icon && <item.icon color={pathname.split('profile').at(-1) === item.value ? '#758CA3' : '#777'} />}
+                        <ListItemText primary={item.label} sx={{ fontWeight: 500, display: {xs: "none", md: "block" }}}  />
+                    </ListItemButton>
+                ))}
+            </List>
+        </Box>
+    );
+}
+