fix: merge conflicts

src/components/layout/Toolbar.tsx

@@ -0,0 +1,84 @@
+import { Avatar, Box, IconButton, Toolbar as MuiToolbar } from '@mui/material';
+import { Icon } from '@rkheftan/harmony-ui';
+import { HambergerMenu, Menu } from 'iconsax-react';
+import { useState, type Dispatch, type SetStateAction } from 'react';
+import type { UserInfo } from '@/contexts/AuthContext';
+import Logo from '../Logo';
+import ProductsMenu from './ProductsMenu';
+
+interface ToolbarProps {
+  sideNavOpen: boolean;
+  setSideNavOpen: Dispatch<SetStateAction<boolean>>;
+  isMobile: boolean;
+  user: UserInfo;
+}
+
+export const Toolbar: React.FC<ToolbarProps> = ({
+  sideNavOpen,
+  setSideNavOpen,
+  isMobile,
+  user,
+}) => {
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+  const open = Boolean(anchorEl);
+
+  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
+    event.stopPropagation();
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  return (
+    <MuiToolbar
+      sx={{
+        height: (t) => t.spacing(isMobile ? 8 : 10.5),
+        bgcolor: 'background.paper',
+        px: isMobile ? 3 : 2,
+        borderBottom: `1px solid var(--mui-palette-divider)`,
+        boxSizing: 'content-box',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+      }}
+    >
+      <Box
+        sx={{ display: 'flex', height: '100%', alignItems: 'center', gap: 2 }}
+      >
+        {isMobile && (
+          <IconButton
+            sx={{
+              backgroundColor: sideNavOpen ? 'primary.light' : undefined,
+              color: sideNavOpen ? 'primary.main' : undefined,
+              '&:hover': {
+                backgroundColor: sideNavOpen ? 'primary.light' : undefined,
+              },
+            }}
+            onClick={() => setSideNavOpen(!sideNavOpen)}
+          >
+            <Icon Component={HambergerMenu} />
+          </IconButton>
+        )}
+        <Logo />
+      </Box>
+      <Box
+        sx={{ display: 'flex', height: '100%', alignItems: 'center', gap: 1 }}
+      >
+        {isMobile && (
+          <Avatar
+            sx={{ width: 32, height: 32, fontSize: '14px' }}
+            src={user.picture}
+          >
+            {user.firstName.charAt(0) + ' ' + user.lastName.charAt(0)}
+          </Avatar>
+        )}
+        <IconButton color="primary" onClick={handleClick}>
+          <Icon Component={Menu} variant="Bold" />
+        </IconButton>
+      </Box>
+      <ProductsMenu anchorEl={anchorEl} onClose={handleClose} open={open} />
+    </MuiToolbar>
+  );
+};