emaui/apps/backoffice/src/app/layouts/components/AppSidebar.tsx

import {
  AppShell,
  Box,
  Group,
  NavLink,
  ScrollArea,
  Stack,
  Text,
  ThemeIcon,
  ActionIcon,
  rem,
} from '@mantine/core';
import {
  IconLayoutDashboard,
  IconUsers,
  IconShieldCheck,
  IconLogout,
} from '@tabler/icons-react';
import { useNavigate, useLocation } from 'react-router-dom';
import { useDispatch } from 'react-redux';
import { logout } from '@ema-platform/auth';

const NAV_ITEMS = [
  { label: 'Dashboard', icon: IconLayoutDashboard, path: '/dashboard' },
  { label: 'User Management', icon: IconUsers, path: '/um/user-management/dashboard' },
];

export function AppSidebar() {
  const navigate = useNavigate();
  const dispatch = useDispatch();
  const { pathname } = useLocation();

  const handleLogout = () => {
    dispatch(logout());
    navigate('/login');
  };

  return (
    <>
      <AppShell.Section pb="md">
        <Group gap="sm" px={4} wrap="nowrap">
          <ThemeIcon size={42} radius="md" variant="gradient" gradient={{ from: 'blue', to: 'indigo', deg: 135 }}>
            <IconShieldCheck size={22} />
          </ThemeIcon>
          <div>
            <Text fw={700} lh={1.1}>
              EMA Admin
            </Text>
            <Text size="xs" c="dimmed" lh={1.2}>
              Control Center
            </Text>
          </div>
        </Group>
      </AppShell.Section>

      <AppShell.Section grow component={ScrollArea}>
        <Stack gap={4}>
          <Text size="xs" fw={700} c="dimmed" px="xs" mb={4} style={{ letterSpacing: 1 }}>
            MENU
          </Text>
          {NAV_ITEMS.map(({ label, icon: Icon, path }) => (
            <NavLink
              key={path}
              label={label}
              leftSection={<Icon size={19} stroke={1.6} />}
              active={pathname.startsWith(path)}
              onClick={() => navigate(path)}
              variant="light"
              color="blue"
              styles={{ root: { borderRadius: rem(10) }, label: { fontWeight: 500 } }}
            />
          ))}
        </Stack>
      </AppShell.Section>

      <AppShell.Section>
        <Group
          gap="sm"
          wrap="nowrap"
          p="xs"
          style={{
            borderRadius: rem(12),
            background: 'var(--mantine-color-default-hover)',
          }}
        >
          <ThemeIcon size={38} radius="xl" variant="gradient" gradient={{ from: 'blue', to: 'indigo', deg: 135 }}>
            <Text size="sm" fw={700} c="white">AD</Text>
          </ThemeIcon>
          <Box flex={1} style={{ minWidth: 0 }}>
            <Text size="sm" fw={600} truncate>
              Amanuel D.
            </Text>
            <Text size="xs" c="dimmed">
              Administrator
            </Text>
          </Box>
          <ActionIcon
            variant="subtle"
            color="gray"
            aria-label="Log out"
            onClick={handleLogout}
          >
            <IconLogout size={18} />
          </ActionIcon>
        </Group>
      </AppShell.Section>
    </>
  );
}