fully fixed login option for session.

Updated README
Updated Dashboard main page
Fixed AppBar scrolling

README.md

@@ -1 +1,17 @@
-# admin_dashboard_react
+# Admin Dashboard writed on React
+This project is a simple admin panel designed for managing servers. \
+It utilizes Material UI for the user interface components. \
+To run the project, you can download/clone the repository and use these commands to run:
+```bash 
+npm install
+npm start
+```
+or build:
+```bash 
+npm install
+npm run build
+```
+You can also download it from Releases page 
+
+![Static Badge](https://img.shields.io/badge/Using_with-LCSA-%23006d75)
+![Static Badge](https://img.shields.io/badge/Created_by-SnippetsX-8A2BE2)

src/App.css

@@ -1,3 +0,0 @@
-body {
-  overflow-x: hidden; /* Hide horizontal scrollbar */
-}

src/App.js

@@ -1,12 +1,14 @@
-import React, { useState} from 'react';
+import React from 'react';
 import Login from './Login/LoginPage';
 import { BrowserRouter as Router, Route, Routes} from 'react-router-dom';
 import Preferences from './Preferences/Preferences'
 import Dashboard from './Dashboard/DashboardMain'
 import './App.css'
+import useToken from './core/useToken';
+
 
 function App() {
-  const [token, setToken] = useState();
+  const { token, setToken } = useToken();
 
   if(!token){
     return <Login setToken={setToken} />

src/Dashboard/DashboardMain.js

@@ -1,181 +1,152 @@
 import React, { useState } from 'react';
 import { 
-  Container, 
-  TextField, 
-  Button, 
-  Typography, 
   Box,
   ListItem,
   ListItemText,
   List,
   Drawer,
   IconButton,
-  Divider
+  Divider,
+  CssBaseline,
+  AppBar,
+  Toolbar,
+  Typography,
+  Menu,
+  MenuItem,
 } from '@mui/material';
-import ListItemIcon from '@mui/icons-material/List'
+import PeopleIcon from '@mui/icons-material/PeopleOutline';
-import PeopleIcon from'@mui/icons-material/People'
+import DashboardIcon from '@mui/icons-material/DashboardOutlined';
-import DashboardIcon from'@mui/icons-material/Dashboard'
+import BarChartIcon from '@mui/icons-material/BarChartOutlined';
-import BarChartIcon from'@mui/icons-material/BarChart'
+import SettingsIcon from '@mui/icons-material/SettingsOutlined';
-import SettingsIcon from'@mui/icons-material/Settings'
+import LogoutIcon from  '@mui/icons-material/LogoutOutlined';
-import ChevronLeftIcon from'@mui/icons-material/ChevronLeft'
+import MenuIcon from '@mui/icons-material/Menu';
-import MenuIcon from'@mui/icons-material/Menu'
+import AccountCircleIcon from '@mui/icons-material/AccountCircleOutlined';
-
-import {
-    Settings,
-} from '@mui/icons-material'
 import { ThemeProvider } from '@mui/material/styles';
 import theme from '../theme';
 
-const DashboardPageWithTheme = () => (
+const drawerWidth = 240;
-  <ThemeProvider theme={theme}>
+
-    <DashboardPage />
+export default function DashboardMain() {
-  </ThemeProvider>
+  const [open, setOpen] = useState(false);
-);
+  const [anchorEl, setAnchorEl] = useState(null);
+  const openMenu = Boolean(anchorEl);
+
+  const handleDrawer = () => {
+    if(open === false){
+      setOpen(true);
+    } 
+    else{
+      setOpen(false);
+    }
+  };
+
+
+  const handleMenuClick = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleMenuClose = () => {
+    setAnchorEl(null);
+  };
 
-const DashboardPage = () => {
-const [isMenuHidden, setIsMenuHidden] = useState('');
   return (
-    <>
+    <ThemeProvider theme={theme}>
-      <Box
+      <Box sx={{ display: 'flex' }}>
-        sx={{
+        <CssBaseline />
-          width: '100%',
+        <AppBar position="fixed" sx={{ zIndex: (theme) => theme.zIndex.drawer + 1, width: `calc(100% - ${open ? drawerWidth : 0}px)`, ml: `${open ? drawerWidth : 0}px` }}>
-          backgroundColor: '#4e00ba',
+          <Toolbar>
-          color: 'white',
-          padding: 2,
-          display: 'flex',
-          justifyContent: 'space-between',
-          alignItems: 'center',
-        }}
-      >
-        <Typography variant="h6">
-            Admin Dashboard
-        </Typography>
-        <Button 
-          variant="contained" 
-          color="secondary"
-          onClick={() => {
-            // Здесь должна быть логика выхода
-            // navigate('/login');
-          }}
-        >
-          Выйти
-        </Button>
-      </Box>
-      <Drawer
-        variant="persistent"
-        anchor="left"
-        open={!isMenuHidden}
-        sx={{
-          width: 240,
-          flexShrink: 0,
-          '& .MuiDrawer-paper': {
-            width: 240,
-            boxSizing: 'border-box',
-          },
-        }}
-      >
-        <Box
-          sx={{
-            display: 'flex',
-            alignItems: 'center',
-            padding: 2,
-            justifyContent: 'space-between',
-          }}
-        >
-          <Typography variant="h6">
-            Меню
-          </Typography>
-          <IconButton onClick={() => setIsMenuHidden(true)}>
-            <ChevronLeftIcon />
-          </IconButton>
-        </Box>
-        <Divider />
-        <List>
-          <ListItem button>
-            <ListItemIcon>
-              <DashboardIcon />
-            </ListItemIcon>
-            <ListItemText primary="Главная" />
-          </ListItem>
-          <ListItem button>
-            <ListItemIcon>
-              <PeopleIcon />
-            </ListItemIcon>
-            <ListItemText primary="Пользователи" />
-          </ListItem>
-          <ListItem button>
-            <ListItemIcon>
-              <BarChartIcon />
-            </ListItemIcon>
-            <ListItemText primary="Статистика" />
-          </ListItem>
-          <ListItem button>
-            <ListItemIcon>
-              <SettingsIcon />
-            </ListItemIcon>
-            <ListItemText primary="Настройки" />
-          </ListItem>
-        </List>
-      </Drawer>
             <IconButton
               color="inherit"
               aria-label="open drawer"
-        onClick={() => setIsMenuHidden(false)}
+              onClick={handleDrawer}
               edge="start"
-        sx={{ marginRight: 2, ...(isMenuHidden && { display: 'none' }) }}
+              sx={{ marginRight: 2 }}
             >
               <MenuIcon />
             </IconButton>
-      <Container maxWidth="lg">
+            <Typography variant="h6" noWrap sx={{ flexGrow: 1 }}>
-        <Box
+              Admin Dashboard
-          sx={{
+            </Typography>
-            marginTop: 5,
+            <IconButton
-            display: 'flex',
+              color="inherit"
-            flexDirection: 'column',
+              onClick={handleMenuClick}
-            alignItems: 'center',
+              sx={{ transform: 'scale(1.2)' }}
-          }}
             >
-          <Typography component="h1" variant="h4" gutterBottom>
+              <AccountCircleIcon />
-            Добро пожаловать в панель администратора
+            </IconButton>
-          </Typography>
+            <Menu
+              anchorEl={anchorEl}
+              open={openMenu}
+              onClose={handleMenuClose}
+            >
+              <MenuItem onClick={handleMenuClose}>
+                  <AccountCircleIcon sx={{ marginRight: 2 }} />
+                 Profile
+              </MenuItem>
+              <MenuItem onClick={handleMenuClose}>
+                  <AccountCircleIcon sx={{ marginRight: 2 }} />
+                My account
+              </MenuItem>
+              <MenuItem onClick={handleMenuClose}>
+                  <SettingsIcon sx={{ marginRight: 2 }} />
+                Settings
+              </MenuItem>
+              <MenuItem onClick={handleMenuClose}>
+                  <LogoutIcon sx={{ marginRight: 2 }} />
+                Logout
+              </MenuItem>
+            </Menu>
+          </Toolbar>
+        </AppBar>
+        <Drawer
+          sx={{
+            width: drawerWidth,
+            flexShrink: 0,
+            '& .MuiDrawer-paper': {
+              width: drawerWidth,
+              bgcolor: 'secondary.main',
+              boxSizing: 'border-box',
+            },
+          }}
+          variant="persistent"
+          anchor="left"
+          open={open}
           
-          <Box sx={{ mt: 4, width: '100%' }}>
+        >
-            <Typography variant="h5" gutterBottom>
+          <Divider />
-              Быстрые действия
+          <List>
-            </Typography>
+            <ListItem button key="Dashboard">
-            <Box sx={{ display: 'flex', justifyContent: 'space-around', flexWrap: 'wrap' }}>
+                <DashboardIcon sx={{ marginRight: 2, color: '#FFFFFF'}}/>
-              <Button variant="outlined" sx={{ m: 1 }}>Управление пользователями</Button>
+              <ListItemText primary="Dashboard" sx={{ color: '#FFFFFF' }} />
-              <Button variant="outlined" sx={{ m: 1 }}>Статистика</Button>
+            </ListItem>
-              <Button variant="outlined" sx={{ m: 1 }}>Настройки системы</Button>
+            <ListItem button key="Users">
-            </Box>
+                <PeopleIcon sx={{ marginRight: 2, color: '#FFFFFF' }}/>
-          </Box>
+              <ListItemText primary="Users" sx={{ color: '#FFFFFF' }} />
-          
+            </ListItem>
-          <Box sx={{ mt: 4, width: '100%' }}>
+            <ListItem button key="Reports">
-            <Typography variant="h5" gutterBottom>
+                <BarChartIcon sx={{ marginRight: 2, color: '#FFFFFF' }}/>
-              Последние действия
+              <ListItemText primary="Reports" sx={{ color: '#FFFFFF' }} />
-            </Typography>
+            </ListItem>
-            {/* Здесь можно добавить компонент для отображения последних действий */}
+            <ListItem button key="Settings">
-          </Box>
+                <SettingsIcon sx={{ marginRight: 2, color: '#FFFFFF' }}/>
-        </Box>
+              <ListItemText primary="Settings" sx={{ color: '#FFFFFF' }} />
-      </Container>
+            </ListItem>
-      
+            <ListItem button key="Preferences">
-      <Box sx={{ 
+                <SettingsIcon sx={{ marginRight: 2, color: '#FFFFFF' }}/>
-        position: 'fixed', 
+              <ListItemText primary="Preferences" sx={{ color: '#FFFFFF' }} />
-        bottom: 0, 
+            </ListItem>
-        left: 0, 
+          </List>
-        right: 0, 
+        </Drawer>
-        textAlign: 'center', 
+        <Box
-        padding: '10px',
+          component="main"
-        backgroundColor: 'background.paper'
+          sx={{ flexGrow: 1, bgcolor: 'background.default', p: 3 }}
-      }}>
+        >
-        <Typography variant="body2" color="text.secondary">
+          <Toolbar />
-          © {new Date().getFullYear()} LCSA и SnippetsX. Все права защищены.
+          <Typography paragraph>
+            Welcome to the Dashboard!
           </Typography>
         </Box>
-    </>
+      </Box>
+    </ThemeProvider>
   );
-};
+}
-
-
-
-export default DashboardPageWithTheme;

src/Login/LoginPage.js

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { Button, Container, TextField, Typography, Box } from '@mui/material';
+import { Button, Container, TextField, Typography, AppBar, Toolbar, Box } from '@mui/material';
 import { ThemeProvider } from '@mui/material/styles';
 import theme from '../theme';
 import {loginUser} from './LoginServerSend'
@@ -20,19 +20,13 @@ export default function Login({ setToken }) {
 
   return(
     <ThemeProvider theme={theme}>
-      <Box
+      <AppBar position="static">
-        sx={{
+        <Toolbar>
-          width: '100%',
+          <Typography variant="h6" sx={{ flexGrow: 1 }}>
-          backgroundColor: '#4e00ba',
-          color: 'white',
-          padding: 2,
-          textAlign: 'center', 
-        }}
-      >
-        <Typography variant="h6">
             Admin Dashboard
           </Typography>
-      </Box>
+        </Toolbar>
+      </AppBar>
       <Container component="main" maxWidth="xs">
         
         <Box

src/core/useToken.js

@@ -0,0 +1,18 @@
+import { useState } from 'react';
+
+export default function useToken() {
+    const getToken = () => {
+        const tokenString = localStorage.getItem('token');
+        const userToken = JSON.parse(tokenString);
+        return userToken?.token
+    };
+    const [token, setToken] = useState(getToken());
+    const saveToken = userToken => {
+        localStorage.setItem('token', JSON.stringify(userToken));
+        setToken(userToken.token);
+      };
+    return {
+        setToken: saveToken,
+        token
+    }
+}

src/theme.js

@@ -5,6 +5,9 @@ const theme = createTheme({
       primary: {
         main: '#4e00ba',
       },
+      secondary: {
+        main: '#390087'
+      }
     },
     
   });