Merge pull request #137 from DNO-inc/feature#101

Added cabinet menu

src/App.tsx

@@ -1,17 +1,17 @@
-import CssBaseline from "@mui/material/CssBaseline";
-import ThemeProvider from "@mui/material/styles/ThemeProvider";
+import CssBaseline from '@mui/material/CssBaseline'
+import ThemeProvider from '@mui/material/styles/ThemeProvider'
 
-import { Router } from "./router";
+import { Router } from './router'
 
-import { ColorModeContext } from "theme";
-import { useMode } from "theme/hooks";
-import "./App.css";
+import { ColorModeContext } from 'theme'
+import { useMode } from 'theme/hooks'
+import './App.css'
 
-import { AuthProvider } from "context/AuthContext/AuthContext";
-import { NotificationProvider } from "context/NotificationContext/NotificationContext";
+import { AuthProvider } from 'context/AuthContext/AuthContext'
+import { NotificationProvider } from 'context/NotificationContext/NotificationContext'
 
 const App = () => {
-  const [theme, colorMode] = useMode();
+  const [theme, colorMode] = useMode()
 
   return (
     <AuthProvider>
@@ -24,7 +24,7 @@ const App = () => {
         </ColorModeContext.Provider>
       </NotificationProvider>
     </AuthProvider>
-  );
-};
+  )
+}
 
-export default App;
+export default App

src/constants/general.ts

@@ -1,9 +1,9 @@
 const general = {
-  TRES_TOKEN: "q87nfWyQ",
+  TRES_TOKEN: 'q87nfWyQ',
   MAX_TITLE_LENGTH: 50,
   MAX_BODY_LENGTH: 5000,
   CABINET_POPUP_WIDTH: 600,
   CABINET_POPUP_HEIGHT: 600,
-};
+}
 
-export { general };
+export { general }

src/layouts/MainLayout/components/Header/Header.tsx

@@ -1,89 +1,89 @@
-import { FC } from "react";
-import { useLocation, useNavigate, useParams } from "react-router-dom";
+import { FC } from 'react'
+import { useLocation, useNavigate, useParams } from 'react-router-dom'
 
-import AppBar from "@mui/material/AppBar";
-import Box from "@mui/material/Box";
-import Button from "@mui/material/Button";
-import IconButton from "@mui/material/IconButton";
-import Toolbar from "@mui/material/Toolbar";
-import useTheme from "@mui/material/styles/useTheme";
+import AppBar from '@mui/material/AppBar'
+import Box from '@mui/material/Box'
+import Button from '@mui/material/Button'
+import IconButton from '@mui/material/IconButton'
+import Toolbar from '@mui/material/Toolbar'
+import useTheme from '@mui/material/styles/useTheme'
 
-import MenuIcon from "@mui/icons-material/Menu";
-import ArrowBackIcon from "@mui/icons-material/ArrowBack";
+import MenuIcon from '@mui/icons-material/Menu'
+import ArrowBackIcon from '@mui/icons-material/ArrowBack'
 
-import { AuthZone } from "./components/AuthZone";
+import { AuthZone } from './components/AuthZone'
 
-import { dimensions, endpoints } from "constants";
-import IPalette from "theme/IPalette.interface";
+import { dimensions, endpoints } from 'constants'
+import IPalette from 'theme/IPalette.interface'
 
 interface HeaderProps {
-  handleDrawerToggle: () => void;
+  handleDrawerToggle: () => void
 }
 
 const Header: FC<HeaderProps> = ({ handleDrawerToggle }) => {
-  const { palette }: IPalette = useTheme();
-  const { pathname } = useLocation();
-  const navigate = useNavigate();
-  const { ticketId } = useParams();
+  const { palette }: IPalette = useTheme()
+  const { pathname } = useLocation()
+  const navigate = useNavigate()
+  const { ticketId } = useParams()
 
-  const drawerWidth = dimensions.DRAWER_WIDTH;
+  const drawerWidth = dimensions.DRAWER_WIDTH
 
-  const isFullTicketInfo: boolean = !!ticketId;
-  const isCreateTicket: boolean = pathname === endpoints.CREATE_TICKET;
-  const isDrawStepBackAction: boolean = isFullTicketInfo || isCreateTicket;
+  const isFullTicketInfo: boolean = !!ticketId
+  const isCreateTicket: boolean = pathname === endpoints.CREATE_TICKET
+  const isDrawStepBackAction: boolean = isFullTicketInfo || isCreateTicket
 
   const handleClick = (): void => {
-    navigate(-1);
-  };
+    navigate(-1)
+  }
 
   return (
     <AppBar
-      position="fixed"
+      position='fixed'
       sx={{
         width: { md: `calc(100% - ${drawerWidth}px)` },
         ml: { md: `${drawerWidth}px` },
-        boxShadow: "none",
-        backgroundImage: "none",
+        boxShadow: 'none',
+        backgroundImage: 'none',
         backgroundColor: palette.grey.background,
         borderBottom: `2px solid ${palette.grey.card}`,
       }}
     >
       <Toolbar
         sx={{
-          display: "flex",
-          height: "64px",
+          display: 'flex',
+          height: '64px',
           justifyContent: {
-            xs: "space-between",
-            md: "flex-end",
+            xs: 'space-between',
+            md: 'flex-end',
           },
-          alignItems: "center",
+          alignItems: 'center',
         }}
       >
         <IconButton
-          color="inherit"
-          aria-label="open drawer"
-          edge="start"
+          color='inherit'
+          aria-label='open drawer'
+          edge='start'
           onClick={handleDrawerToggle}
-          sx={{ ml: -1, display: { xs: "inline-flex", md: "none" } }}
+          sx={{ ml: -1, display: { xs: 'inline-flex', md: 'none' } }}
         >
           <MenuIcon />
         </IconButton>
         {isDrawStepBackAction && (
           <Box
             sx={{
-              position: "absolute",
+              position: 'absolute',
               top: 0,
               left: 0,
               bottom: 0,
               width: 48,
               bgcolor: palette.grey.card,
-              display: { xs: "none", md: "block" },
+              display: { xs: 'none', md: 'block' },
             }}
           >
             <Button
-              color="inherit"
+              color='inherit'
               onClick={handleClick}
-              sx={{ minWidth: "100%", minHeight: "100%" }}
+              sx={{ minWidth: '100%', minHeight: '100%' }}
             >
               <ArrowBackIcon sx={{ color: palette.common.white }} />
             </Button>
@@ -92,7 +92,7 @@ const Header: FC<HeaderProps> = ({ handleDrawerToggle }) => {
         <AuthZone />
       </Toolbar>
     </AppBar>
-  );
-};
+  )
+}
 
-export { Header };
+export { Header }

src/layouts/MainLayout/components/Header/components/AuthZone/AuthZone.tsx

@@ -1,26 +1,26 @@
-import { FC } from "react";
+import { FC } from 'react'
 
-import Box from "@mui/material/Box";
+import Box from '@mui/material/Box'
 
-import { AuthActions } from "./components/AuthActions";
-import { NoAuthActions } from "./components/NoAuthActions";
+import { AuthActions } from './components/AuthActions'
+import { NoAuthActions } from './components/NoAuthActions'
 
-import { useAuth } from "context/AuthContext/AuthContext";
+import { useAuth } from 'context/AuthContext/AuthContext'
 
 const AuthZone: FC = () => {
-  const { isAuth } = useAuth();
+  const { isAuth } = useAuth()
 
   return (
     <Box
       sx={{
-        display: "flex",
-        alignItems: "center",
-        gap: 3,
+        display: 'flex',
+        alignItems: 'center',
+        gap: 2,
       }}
     >
       {isAuth ? <AuthActions /> : <NoAuthActions />}
     </Box>
-  );
-};
+  )
+}
 
-export { AuthZone };
+export { AuthZone }