Doc 28

front-doc/src/App.tsx

@@ -1,19 +1,19 @@
-import { useState, useEffect } from "react";
-import "./App.css";
-import { Route, Routes, useLocation } from "react-router-dom";
-import { HomePage } from "./pages/home/HomePage";
-import { ReportPage } from "./pages/ReportPage";
-import { ReleasePage } from "./pages/documentForms/release/ReleasePage";
-import { OrderPage } from "./pages/OrderPage";
-import { ListPage } from "./pages/ListPage";
-import { ThemeProvider } from "./providers/ThemeProvider";
-import { HeaderComponent } from "./components/header/HeaderComponent";
-import { FooterComponent } from "./components/footer/FooterComponent";
-import Loader from "./components/loader/Loader";
-import { LoginPage } from "./pages/login/LoginPage";
-import { AboutCreatorsPage } from "./pages/creators/AboutCreatorsPage";
-import ProtectedRoute from "../src/ProtectedRoute";
-import { useAuth } from "../src/hooks/useLogin";
+import { useState, useEffect } from 'react';
+import './App.css';
+import { Route, Routes, useLocation } from 'react-router-dom';
+import { HomePage } from './pages/home/HomePage';
+import { ReportPage } from './pages/documentForms/report/ReportPage';
+import { ReleasePage } from './pages/documentForms/release/ReleasePage';
+import { OrderPage } from './pages/OrderPage';
+import { ListPage } from './pages/ListPage';
+import { ThemeProvider } from './providers/ThemeProvider';
+import { HeaderComponent } from './components/header/HeaderComponent';
+import { FooterComponent } from './components/footer/FooterComponent';
+import Loader from './components/loader/Loader';
+import { LoginPage } from './pages/login/LoginPage';
+import { AboutCreatorsPage } from './pages/creators/AboutCreatorsPage';
+import ProtectedRoute from '../src/ProtectedRoute';
+import { useAuth } from '../src/hooks/useLogin';
 
 function App() {
   const [loading, setLoading] = useState(true);
@@ -25,22 +25,31 @@ function App() {
     const verifyToken = async () => {
       const authenticated = await checkToken();
       setIsAuthenticated(authenticated);
+
       setLoading(false);
     };
 
     verifyToken();
 
     const timeout = setTimeout(() => {
       setLoading(false);
-    }, 500);
+    }, 1500);
     return () => {
       setLoading(true);
       clearTimeout(timeout);
     };
   }, [pathname]); //if location pathname changing -> useEffect start work
 
   if (loading) {
-    return <Loader />;
+    return (
+      <ThemeProvider>
+        <HeaderComponent />
+        <main>
+          <Loader />
+        </main>
+        <FooterComponent />
+      </ThemeProvider>
+    );
   }
 
   return (
@@ -49,59 +58,20 @@ function App() {
       <main>
         <Routes>
           <Route path="/login" element={<LoginPage />} />
-          <Route
-            path="/"
-            element={
-              <ProtectedRoute
-                element={<HomePage />}
-                isAuthenticated={isAuthenticated}
-              />
-            }
-          />
+          <Route path="/" element={<ProtectedRoute element={<HomePage />} isAuthenticated={isAuthenticated} />} />
           <Route
             path="report"
-            element={
-              <ProtectedRoute
-                element={<ReportPage />}
-                isAuthenticated={isAuthenticated}
-              />
-            }
+            element={<ProtectedRoute element={<ReportPage />} isAuthenticated={isAuthenticated} />}
           />
           <Route
             path="release"
-            element={
-              <ProtectedRoute
-                element={<ReleasePage />}
-                isAuthenticated={isAuthenticated}
-              />
-            }
-          />
-          <Route
-            path="order"
-            element={
-              <ProtectedRoute
-                element={<OrderPage />}
-                isAuthenticated={isAuthenticated}
-              />
-            }
-          />
-          <Route
-            path="list"
-            element={
-              <ProtectedRoute
-                element={<ListPage />}
-                isAuthenticated={isAuthenticated}
-              />
-            }
+            element={<ProtectedRoute element={<ReleasePage />} isAuthenticated={isAuthenticated} />}
           />
+          <Route path="order" element={<ProtectedRoute element={<OrderPage />} isAuthenticated={isAuthenticated} />} />
+          <Route path="list" element={<ProtectedRoute element={<ListPage />} isAuthenticated={isAuthenticated} />} />
           <Route
             path="creators"
-            element={
-              <ProtectedRoute
-                element={<AboutCreatorsPage />}
-                isAuthenticated={isAuthenticated}
-              />
-            }
+            element={<ProtectedRoute element={<AboutCreatorsPage />} isAuthenticated={isAuthenticated} />}
           />
         </Routes>
       </main>

front-doc/src/components/cards/DocumentPageCard.tsx

@@ -1,40 +1,28 @@
-import { useNavigate } from "react-router-dom";
-import "../../App.css";
-import { Card, CardContent, Typography, CardActionArea } from "@mui/material";
-import "@fontsource/jost";
-import { DocumentsPageCard } from "../../interfaces/cardsInterfaces";
-
-export const DocumentPageCard: React.FC<DocumentsPageCard> = ({
-  path,
-  header,
-  description,
-}: DocumentsPageCard) => {
-  const navigate = useNavigate();
-
-  const handleClick = () => {
-    navigate(path);
-  };
-
-  return (
-    <Card variant="outlined" sx={{ width: 300, height: 150 }}>
-      <CardActionArea onClick={handleClick}>
-        <CardContent
-          style={{ backgroundColor: "#d9d9d9" }}
-          sx={{ minWidth: 300, minHeight: 150 }}
-        >
-          <Typography
-            variant="h6"
-            sx={{ mb: 3 }}
-            fontFamily="Jost"
-            fontWeight="700"
-          >
-            {header}
-          </Typography>
-          <Typography variant="body1" fontFamily="Jost" fontSize="24">
-            {description}
-          </Typography>
-        </CardContent>
-      </CardActionArea>
-    </Card>
-  );
-};
+import { useNavigate } from 'react-router-dom';
+import '../../App.css';
+import { Card, CardContent, Typography, CardActionArea } from '@mui/material';
+import '@fontsource/jost';
+import { DocumentsPageCard } from '../../interfaces/cardsInterfaces';
+
+export const DocumentPageCard: React.FC<DocumentsPageCard> = ({ path, header, description }: DocumentsPageCard) => {
+  const navigate = useNavigate();
+
+  const handleClick = () => {
+    navigate(path);
+  };
+
+  return (
+    <Card variant="outlined" sx={{ width: 300, height: { xs: 50, md: 100, lg: 150 } }}>
+      <CardActionArea onClick={handleClick}>
+        <CardContent style={{ backgroundColor: '#d9d9d9' }} sx={{ minWidth: 300, minHeight: 150 }}>
+          <Typography variant="h6" sx={{ mb: 3 }} fontFamily="Jost" fontWeight="700">
+            {header}
+          </Typography>
+          <Typography variant="body1" fontFamily="Jost" fontSize="24" sx={{ display: { md: 'none', lg: 'block' } }}>
+            {description}
+          </Typography>
+        </CardContent>
+      </CardActionArea>
+    </Card>
+  );
+};

front-doc/src/components/footer/Footer.css

@@ -1,12 +1,18 @@
-.footer-component {
-  background-color: var(--footer-backgroud-color);
-  color: var(--footer-text-color);
-  width: 100%;
-  height: 60px;
-}
-
-#creators {
-  border-color: var(--footer-text-color);
-  color: var(--footer-text-color);
-  margin-right: 40px;
-}
+.footer-component {
+  background-color: var(--footer-backgroud-color);
+  color: var(--footer-text-color);
+  width: 100%;
+  height: 60px;
+}
+
+#creators {
+  border-color: var(--footer-text-color);
+  color: var(--footer-text-color);
+  margin-right: 40px;
+}
+
+@media (max-width: 600px) {
+  #creators {
+    display: none;
+  }
+}

front-doc/src/components/header/Header.css

@@ -6,7 +6,7 @@
   width: 100%;
   height: 60px;
   position: fixed;
-  z-index: 1;
+  z-index: 5;
 }
 
 .logo {
@@ -16,8 +16,8 @@
 }
 
 .header-text {
-  margin: 0 0 0 150px;
-  font-size: 30px;
+  margin: 0 0 0 5px;
+  font-size: 25px;
   color: var(--header-text-color);
 }
 
@@ -42,3 +42,9 @@
   display: flex;
   justify-content: space-between;
 }
+
+@media (max-width: 600px) {
+  .button-section {
+    display: none;
+  }
+}

front-doc/src/components/header/HeaderComponent.tsx

@@ -1,21 +1,59 @@
-import { useContext } from "react";
-import Stack from "@mui/material/Stack";
-import logo from "../../Images/Raccoon.png";
-import { Button } from "@mui/material";
-import "../../components/header/Header.css";
-import { ThemeContext } from "../../providers/ThemeProvider";
-import Brightness4Icon from "@mui/icons-material/Brightness4";
-import Brightness7Icon from "@mui/icons-material/Brightness7";
-import { useAuth } from "../../hooks/useLogin";
+import { useContext, useState } from 'react';
+import Stack from '@mui/material/Stack';
+import logo from '../../Images/Raccoon.png';
+import { Button, Drawer, IconButton, List, ListItem, ListItemText } from '@mui/material';
+import '../../components/header/Header.css';
+import { ThemeContext } from '../../providers/ThemeProvider';
+import Brightness4Icon from '@mui/icons-material/Brightness4';
+import Brightness7Icon from '@mui/icons-material/Brightness7';
+import { useAuth } from '../../hooks/useLogin';
+import MenuIcon from '@mui/icons-material/Menu';
+import { useNavigate } from 'react-router-dom';
 
 export const HeaderComponent = () => {
   const { theme, setTheme } = useContext(ThemeContext);
+  const [drawerOpen, setDrawerOpen] = useState(false);
   const { isAuthenticated, logout } = useAuth();
 
+  const navigate = useNavigate();
+
+  const handleButtonClick = () => {
+    navigate('/creators');
+  };
+
   const changeTheme = () => {
-    setTheme(theme === "light" ? "dark" : "light");
+    setTheme(theme === 'light' ? 'dark' : 'light');
+  };
+
+  const toggleDrawer = (open: boolean) => (event: any) => {
+    if (event.type === 'keydown' && (event.key === 'Tab' || event.key === 'Shift')) {
+      return;
+    }
+    setDrawerOpen(open);
   };
 
+  const menuItems = (
+    <List>
+      <ListItem button onClick={changeTheme}>
+        <ListItemText primary="Сменить тему" />
+        {theme === 'dark' ? <Brightness4Icon /> : <Brightness7Icon />}
+      </ListItem>
+      <ListItem button onClick={handleButtonClick}>
+        <ListItemText primary="О создателях" />
+      </ListItem>
+      {isAuthenticated && (
+        <>
+          <ListItem button component="a" href="/">
+            <ListItemText primary="На главную" />
+          </ListItem>
+          <ListItem button onClick={logout}>
+            <ListItemText primary="Выйти" />
+          </ListItem>
+        </>
+      )}
+    </List>
+  );
+
   return (
     <header className="header-component">
       <Stack
@@ -24,17 +62,17 @@ export const HeaderComponent = () => {
         spacing={1}
         alignItems="center"
         justifyContent="space-between"
-        paddingX={"10px"}
+        paddingX={'10px'}
       >
         <img className="logo" src={logo} alt="Raccoon logo"></img>
-        <h1 className="header-text">Документооборот Проектного направления</h1>
+        <h1 className="header-text">DOC-FAMCS</h1>
         <div className="button-section">
-          <Button id="topic" variant="outlined" onClick={changeTheme}>
-            {theme === "dark" ? <Brightness4Icon /> : <Brightness7Icon />}
+          <Button id="topic" variant="text" onClick={changeTheme}>
+            {theme === 'dark' ? <Brightness4Icon /> : <Brightness7Icon />}
           </Button>
           {isAuthenticated && (
             <>
-              <Button id="Home-Back" variant="outlined" href={"/"}>
+              <Button id="Home-Back" variant="outlined" href={'/'}>
                 На главную
               </Button>
               <Button id="account" variant="outlined" onClick={logout}>
@@ -43,7 +81,20 @@ export const HeaderComponent = () => {
             </>
           )}
         </div>
+        <IconButton
+          edge="end"
+          color="default"
+          aria-label="menu"
+          onClick={toggleDrawer(true)}
+          sx={{ display: { xs: 'block', sm: 'none' } }}
+        >
+          <MenuIcon />
+        </IconButton>
       </Stack>
+
+      <Drawer anchor="right" open={drawerOpen} onClose={toggleDrawer(false)}>
+        {menuItems}
+      </Drawer>
     </header>
   );
 };