build ok,

002_source/cms/src/components/dashboard/logistics/sidebar.tsx

@@ -0,0 +1,109 @@
+'use client';
+
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Divider from '@mui/material/Divider';
+import Drawer from '@mui/material/Drawer';
+import IconButton from '@mui/material/IconButton';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import { Plus as PlusIcon } from '@phosphor-icons/react/dist/ssr/Plus';
+import { X as XIcon } from '@phosphor-icons/react/dist/ssr/X';
+
+import { useMediaQuery } from '@/hooks/use-media-query';
+
+import { FleetVehicles } from './fleet-vehicles';
+import type { Vehicle } from './types';
+
+export interface SidebarProps {
+  currentVehicleId?: string;
+  onClose?: () => void;
+  onVehicleDeselect?: () => void;
+  onVehicleSelect?: (vehicleId: string) => void;
+  open?: boolean;
+  vehicles: Vehicle[];
+}
+
+export function Sidebar({
+  currentVehicleId,
+  onClose,
+  onVehicleDeselect,
+  onVehicleSelect,
+  open,
+  vehicles,
+}: SidebarProps): React.JSX.Element {
+  const mdUp = useMediaQuery('up', 'md');
+
+  const content = (
+    <SidebarContent
+      currentVehicleId={currentVehicleId}
+      onClose={onClose}
+      onVehicleDeselect={onVehicleDeselect}
+      onVehicleSelect={onVehicleSelect}
+      vehicles={vehicles}
+    />
+  );
+
+  if (mdUp) {
+    return (
+      <Box
+        sx={{
+          borderRight: '1px solid var(--mui-palette-divider)',
+          display: { xs: 'none', md: 'block' },
+          flex: '0 0 auto',
+          width: '320px',
+        }}
+      >
+        {content}
+      </Box>
+    );
+  }
+
+  return (
+    <Drawer PaperProps={{ sx: { maxWidth: '100%', width: '320px' } }} onClose={onClose} open={open}>
+      {content}
+    </Drawer>
+  );
+}
+
+export interface SidebarContentProps {
+  currentVehicleId?: string;
+  onClose?: () => void;
+  onVehicleDeselect?: () => void;
+  onVehicleSelect?: (vehicleId: string) => void;
+  vehicles: Vehicle[];
+}
+
+function SidebarContent({
+  currentVehicleId,
+  onClose,
+  onVehicleDeselect,
+  onVehicleSelect,
+  vehicles,
+}: SidebarContentProps): React.JSX.Element {
+  return (
+    <Box sx={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
+      <Stack spacing={1} sx={{ flex: '0 0 auto', p: 2 }}>
+        <Stack direction="row" spacing={2} sx={{ alignItems: 'flex-center', justifyContent: 'space-between' }}>
+          <Typography variant="h5">Fleet</Typography>
+          <IconButton onClick={onClose} sx={{ display: { md: 'none' } }}>
+            <XIcon />
+          </IconButton>
+        </Stack>
+        <Button startIcon={<PlusIcon />} variant="contained">
+          Add vehicle
+        </Button>
+      </Stack>
+      <Divider />
+      <Box sx={{ flex: '1 1 auto', overflowY: 'auto' }}>
+        <FleetVehicles
+          currentVehicleId={currentVehicleId}
+          onVehicleDeselect={onVehicleDeselect}
+          onVehicleSelect={onVehicleSelect}
+          vehicles={vehicles}
+        />
+      </Box>
+    </Box>
+  );
+}