design improvement

Author: ahmedibra28

frontend/src/App.js

@@ -1,12 +1,13 @@
 import { useEffect } from 'react'
 import jwt_decode from 'jwt-decode'
-import { BrowserRouter as Router, Route } from 'react-router-dom'
+import { BrowserRouter as Router, Route, Link } from 'react-router-dom'
 import Footer from './components/Footer'
 import Routes from './components/routes/Routes'
 import { useDispatch, useSelector } from 'react-redux'
 import 'animate.css'
+import { FaPowerOff, FaSlidersH } from 'react-icons/fa'
+import { resetUpdateUser, logout } from './redux/users/usersSlice'
 
-import { logout } from './redux/users/usersSlice'
 import HeaderGuest from './components/HeaderGuest'
 import HeaderAuthorized from './components/HeaderAuthorized'
 
@@ -29,15 +30,55 @@ const App = () => {
     })
   }, [dispatch])
 
+  const style = {
+    display: 'flex',
+  }
+
+  const logoutHandler = () => {
+    dispatch(logout())
+    dispatch(resetUpdateUser())
+  }
+
+  const toggler = () => {
+    const sidebar = document.querySelector('#sidebar')
+    sidebar.classList.toggle('active')
+  }
+
   return (
     <Router>
-      {userInfo ? <HeaderAuthorized /> : <HeaderGuest />}
-      <main>
-        <div className='container'>
-          <Route component={Routes} />
-        </div>
-      </main>
-      <Footer />
+      <div className='wrapper' style={userInfo && style}>
+        {userInfo ? <HeaderAuthorized toggler={toggler} /> : <HeaderGuest />}
+        <main>
+          {userInfo && (
+            <nav className='navbar navbar-expand-sm navbar-dark sticky-top'>
+              <div className='container-fluid'>
+                <button
+                  onClick={toggler}
+                  className='navbar-brand btn btn-transparent shadow-none border-0'
+                >
+                  <FaSlidersH />
+                </button>
+
+                <ul className='navbar-nav d-flex flex-row'>
+                  <li className='nav-item'>
+                    <Link to='/' onClick={logoutHandler} className='nav-link'>
+                      <FaPowerOff className='mb-1' /> Logout
+                    </Link>
+                  </li>
+                </ul>
+              </div>
+            </nav>
+          )}
+
+          <div
+            className={`${!userInfo ? 'container' : 'container-fluid'}`}
+            id='mainContainer'
+          >
+            <Route component={Routes} />
+          </div>
+          <Footer />
+        </main>
+      </div>
     </Router>
   )
 }

frontend/src/components/HeaderAuthorized.js

@@ -1,54 +1,21 @@
 import { Link } from 'react-router-dom'
-import { useDispatch, useSelector } from 'react-redux'
+import { useSelector } from 'react-redux'
 import {
   FaCog,
   FaFileContract,
-  FaPowerOff,
-  FaSlidersH,
   FaUser,
   FaUserCircle,
   FaUsers,
 } from 'react-icons/fa'
-import { resetUpdateUser, logout } from '../redux/users/usersSlice'
 
 const HeaderAuthorized = () => {
-  const dispatch = useDispatch()
   const userLogin = useSelector((state) => state.userLogin)
   const { userInfo } = userLogin
 
-  const logoutHandler = () => {
-    dispatch(logout())
-    dispatch(resetUpdateUser())
-  }
-
-  const toggler = () => {
-    const sidebar = document.querySelector('#sidebar')
-    sidebar.classList.toggle('active')
-  }
-
   return (
     <>
-      <nav className='navbar navbar-expand-sm navbar-dark sticky-top'>
-        <div className='container-fluid'>
-          <button
-            onClick={toggler}
-            className='navbar-brand btn btn-transparent shadow-none border-0'
-          >
-            <FaSlidersH />
-          </button>
-
-          <ul className='navbar-nav d-flex flex-row'>
-            <li className='nav-item'>
-              <Link to='/' onClick={logoutHandler} className='nav-link'>
-                <FaPowerOff className='mb-1' /> Logout
-              </Link>
-            </li>
-          </ul>
-        </div>
-      </nav>
-
-      <nav className='' id='sidebar'>
-        <div className='container-fluid'>
+      <nav className='sticky-top' id='sidebar'>
+        <div className='container-fluid pt-3'>
           <Link to='/' className='navbar-brand fw-bold fs-6'>
             Boilerplate
           </Link>

frontend/src/index.css

@@ -9,15 +9,20 @@
 #sidebar {
   height: 100vh;
   transition: 0.7s ease-in-out;
-  position: fixed;
+
   z-index: 1;
 }
 #sidebar.active {
-  margin-left: -50rem;
+  margin-left: -6.3rem;
+}
+
+.wrapper {
+  min-width: 100%;
 }
 
 main {
   min-height: 60vh;
+  width: 100%;
 }
 
 button {