Separate Client Portal & Dashboard

2022-05-23 10:38:16 +07:00
parent f2e84e6244
commit 89bb57f357
569 changed files with 60252 additions and 280 deletions
--- a/frontend/client-portal/src/layouts/dashboard/header/AccountPopover.tsx
+++ b/frontend/client-portal/src/layouts/dashboard/header/AccountPopover.tsx
@@ -0,0 +1,109 @@
+import { useState } from 'react';
+// @mui
+import { alpha } from '@mui/material/styles';
+import { Box, Divider, Typography, Stack, MenuItem, Avatar } from '@mui/material';
+// components
+import MenuPopover from '../../../components/MenuPopover';
+import { IconButtonAnimate } from '../../../components/animate';
+import { useNavigate } from "react-router-dom";
+
+// ----------------------------------------------------------------------
+
+const MENU_OPTIONS = [
+  {
+    label: 'Home',
+    linkTo: '/',
+  },
+  {
+    label: 'Profile',
+    linkTo: '/',
+  },
+  {
+    label: 'Settings',
+    linkTo: '/',
+  },
+];
+
+// ----------------------------------------------------------------------
+
+export default function AccountPopover() {
+  const [open, setOpen] = useState<HTMLElement | null>(null);
+  const navigate = useNavigate();
+
+  const handleOpen = (event: React.MouseEvent<HTMLElement>) => {
+    setOpen(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setOpen(null);
+  };
+
+  const handleLogout = () => {
+    navigate('/auth/login');
+  }
+
+  return (
+    <>
+      <IconButtonAnimate
+        onClick={handleOpen}
+        sx={{
+          p: 0,
+          ...(open && {
+            '&:before': {
+              zIndex: 1,
+              content: "''",
+              width: '100%',
+              height: '100%',
+              borderRadius: '50%',
+              position: 'absolute',
+              bgcolor: (theme) => alpha(theme.palette.grey[900], 0.8),
+            },
+          }),
+        }}
+      >
+        <Avatar
+          src="https://minimal-assets-api.vercel.app/assets/images/avatars/avatar_5.jpg"
+          alt="Rayan Moran"
+        />
+      </IconButtonAnimate>
+
+      <MenuPopover
+        open={Boolean(open)}
+        anchorEl={open}
+        onClose={handleClose}
+        sx={{
+          p: 0,
+          mt: 1.5,
+          ml: 0.75,
+          '& .MuiMenuItem-root': {
+            typography: 'body2',
+            borderRadius: 0.75,
+          },
+        }}
+      >
+        <Box sx={{ my: 1.5, px: 2.5 }}>
+          <Typography variant="subtitle2" noWrap>
+            Rayan Moran
+          </Typography>
+          <Typography variant="body2" sx={{ color: 'text.secondary' }} noWrap>
+            rayan.moran@gmail.com
+          </Typography>
+        </Box>
+
+        <Divider sx={{ borderStyle: 'dashed' }} />
+
+        <Stack sx={{ p: 1 }}>
+          {MENU_OPTIONS.map((option) => (
+            <MenuItem key={option.label} onClick={handleClose}>
+              {option.label}
+            </MenuItem>
+          ))}
+        </Stack>
+
+        <Divider sx={{ borderStyle: 'dashed' }} />
+
+        <MenuItem sx={{ m: 1 }} onClick={handleLogout}>Logout</MenuItem>
+      </MenuPopover>
+    </>
+  );
+}