fix: Update map with tables fixes

src/widgets/Layout/index.tsx

@@ -2,20 +2,32 @@ import * as React from "react";
 import Box from "@mui/material/Box";
 import Toolbar from "@mui/material/Toolbar";
 import IconButton from "@mui/material/IconButton";
-import { Menu, ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
+import { Menu, ChevronLeftIcon, ChevronRightIcon, User } from "lucide-react";
 import { useTheme } from "@mui/material/styles";
 import { AppBar } from "./ui/AppBar";
 import { Drawer } from "./ui/Drawer";
 import { DrawerHeader } from "./ui/DrawerHeader";
 import { NavigationList } from "@features";
+import { authStore, userStore } from "@shared";
+import { observer } from "mobx-react-lite";
+import { useEffect } from "react";
+import { Typography } from "@mui/material";
 
 interface LayoutProps {
   children: React.ReactNode;
 }
 
-export const Layout: React.FC<LayoutProps> = ({ children }) => {
+export const Layout: React.FC<LayoutProps> = observer(({ children }) => {
   const theme = useTheme();
-  const [open, setOpen] = React.useState(false);
+  const [open, setOpen] = React.useState(true);
+  const { getUsers, users } = userStore;
+
+  useEffect(() => {
+    const fetchUsers = async () => {
+      await getUsers();
+    };
+    fetchUsers();
+  }, []);
 
   const handleDrawerOpen = () => {
     setOpen(true);
@@ -28,7 +40,7 @@ export const Layout: React.FC<LayoutProps> = ({ children }) => {
   return (
     <Box sx={{ display: "flex" }}>
       <AppBar position="fixed" open={open}>
-        <Toolbar>
+        <Toolbar className="flex justify-between">
           <IconButton
             color="inherit"
             aria-label="open drawer"
@@ -43,17 +55,78 @@ export const Layout: React.FC<LayoutProps> = ({ children }) => {
           >
             <Menu />
           </IconButton>
+          <div></div>
+          <div className="flex gap-2 items-center">
+            <div className="flex flex-col gap-1">
+              {(() => {
+                console.log(authStore.payload);
+                return (
+                  <>
+                    <p className=" text-white">
+                      {
+                        users?.data?.find(
+                          // @ts-ignore
+                          (user) => user.id === authStore.payload?.user_id
+                        )?.name
+                      }
+                    </p>
+                    <div
+                      className="text-center text-xs"
+                      style={{
+                        backgroundColor: "#877361",
+                        borderRadius: "4px",
+                        color: "white",
+                        padding: "2px 10px",
+                      }}
+                    >
+                      {/* @ts-ignore */}
+                      {authStore.payload?.is_admin
+                        ? "Администратор"
+                        : "Режим пользователя"}
+                    </div>
+                  </>
+                );
+              })()}
+            </div>
+            <div className="w-10 h-10 bg-gray-600 rounded-full flex items-center justify-center">
+              <User />
+            </div>
+          </div>
         </Toolbar>
       </AppBar>
       <Drawer variant="permanent" open={open}>
         <DrawerHeader>
-          <IconButton onClick={handleDrawerClose}>
-            {theme.direction === "rtl" ? (
-              <ChevronRightIcon />
-            ) : (
-              <ChevronLeftIcon />
-            )}
-          </IconButton>
+          <Box
+            sx={{
+              display: "flex",
+              alignItems: "center",
+              gap: 2,
+              cursor: "pointer",
+            }}
+            onClick={() => {
+              setOpen(!open);
+            }}
+          >
+            <img
+              src="/favicon_ship.png"
+              alt="logo"
+              width={40}
+              height={40}
+              style={{ filter: "brightness(0)", marginLeft: "-5px" }}
+            />
+            <Typography variant="h6" component="h1">
+              Белые ночи
+            </Typography>
+          </Box>
+          {open && (
+            <IconButton onClick={handleDrawerClose}>
+              {theme.direction === "rtl" ? (
+                <ChevronRightIcon />
+              ) : (
+                <ChevronLeftIcon />
+              )}
+            </IconButton>
+          )}
         </DrawerHeader>
         <NavigationList open={open} onDrawerOpen={handleDrawerOpen} />
       </Drawer>
@@ -67,10 +140,9 @@ export const Layout: React.FC<LayoutProps> = ({ children }) => {
           maxWidth: "100vw",
         }}
       >
-        <DrawerHeader />
-
+        <div className="mt-16"></div>
         {children}
       </Box>
     </Box>
   );
-};
+});