better sidebar

src/pages/ServerDetails/ServerDetails.jsx

@@ -1,4 +1,4 @@
-import { useParams, Route, Routes } from 'react-router-dom';
+import { useParams, Route, Routes, NavLink } from 'react-router-dom';
 import { useState, useEffect } from 'react';
 import Navbar from '../../components/navbar/Navbar';
 import ServerProperties from '../ServerProperties/ServerProperties'; 
@@ -10,17 +10,18 @@ import ServerHistory from '../ServerHistory/ServerHistory';
 // import ServerAccess from '../ServerAccess/ServerAccess';
 import styles from './ServerDetails.module.scss';
 import PropTypes from "prop-types";
-import { FaServer, FaCogs, FaUserFriends, FaGlobe, FaHistory, FaClipboardList, FaSave, FaLock } from 'react-icons/fa';
+import { FaCogs, FaUserFriends, FaGlobe, FaHistory, FaClipboardList, FaSave, FaLock } from 'react-icons/fa';
+import { TbArrowBackUp } from 'react-icons/tb';
+import { FiChevronsLeft,FiChevronsRight  } from "react-icons/fi";
 import NotFoundPage from '../NotFoundPage/NotFoundPage';
-import { NavLink } from 'react-router-dom';
 import { useLocation } from 'react-router-dom';
 
-const ServerDetails = ({ user   }) => {
+const ServerDetails = ({ user }) => {
   const { serverName } = useParams(); 
   const location = useLocation();
   const initialStatus = location.state?.status || false;  
   const [status, setStatus] = useState(initialStatus);
-
+  const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false);
 
   useEffect(() => {
     if (location.state?.status !== undefined) {
@@ -28,73 +29,80 @@ const ServerDetails = ({ user   }) => {
     }
   }, [location]);
 
+  const handleSidebarToggle = () => {
+    setIsSidebarCollapsed(!isSidebarCollapsed);
+  };
+
   return (
     <>
       <Navbar user={user} />
-      <div className={styles.container}>
-        <div className={styles.sidebar}>
+      <div className={`${styles.container} ${isSidebarCollapsed ? styles.collapsed : ''}`}>
+        <div className={`${styles.sidebar} ${isSidebarCollapsed ? styles.collapsed : ''}`}>
           <div className={styles.menu}>            
-            <NavLink 
-              to={`/dashboard`} 
-              className={`${styles.menuItem} ${styles.extraMargin}`}>  
-              <FaServer /> Retour aux serveurs
-            </NavLink>
-            
+              <div className={styles.toggleButton} onClick={handleSidebarToggle}>
+                {isSidebarCollapsed ? <FiChevronsRight /> : <FiChevronsLeft />}
+              </div>
             <NavLink 
               to={`/server/${serverName}/options`} 
               className={({ isActive }) => isActive ? `${styles.menuItem} ${styles.active}` : styles.menuItem}>
-              <FaCogs /> Propriétés
+              <FaCogs /> {!isSidebarCollapsed && 'Propriétés'}
             </NavLink>
 
             <NavLink 
               state={{ status }}
               to={`/server/${serverName}/console`} 
               className={({ isActive }) => isActive ? `${styles.menuItem} ${styles.active}` : styles.menuItem}>
-              <FaClipboardList /> Console
+              <FaClipboardList /> {!isSidebarCollapsed && 'Console'}
             </NavLink>
 
             <NavLink 
               to={`/server/${serverName}/history`} 
               className={({ isActive }) => isActive ? `${styles.menuItem} ${styles.active}` : styles.menuItem}>
-              <FaHistory /> Historique
+              <FaHistory /> {!isSidebarCollapsed && 'Historique'}
             </NavLink>
 
             <NavLink 
               to={`/server/${serverName}/players`} 
               className={({ isActive }) => isActive ? `${styles.menuItem} ${styles.active}` : styles.menuItem}>
-              <FaUserFriends /> Joueurs
+              <FaUserFriends /> {!isSidebarCollapsed && 'Joueurs'}
             </NavLink>
 
             <NavLink 
               to={`/server/${serverName}/worlds`} 
               className={({ isActive }) => isActive ? `${styles.menuItem} ${styles.active}` : styles.menuItem}>
-              <FaGlobe /> Mondes
+              <FaGlobe /> {!isSidebarCollapsed && 'Mondes'}
             </NavLink>
 
             <NavLink 
               to={`/server/${serverName}/backups`} 
               className={({ isActive }) => isActive ? `${styles.menuItem} ${styles.active}` : styles.menuItem}>
-              <FaSave /> Sauvegardes
+              <FaSave /> {!isSidebarCollapsed && 'Sauvegardes'}
             </NavLink>
 
             <NavLink 
               to={`/server/${serverName}/access`} 
               className={({ isActive }) => isActive ? `${styles.menuItem} ${styles.active}` : styles.menuItem}>
-              <FaLock /> Accès
+              <FaLock /> {!isSidebarCollapsed && 'Accès'}
+            </NavLink>
+
+            <NavLink 
+              to={`/dashboard`} 
+              className={`${styles.menuItem} ${styles.extraMargin}`}>  
+              <TbArrowBackUp /> {!isSidebarCollapsed && 'Dashboard'}
             </NavLink>
           </div>
         </div>
         <div className={styles.serverDetailsContainer}>
-        <Routes>
-          <Route path="options" element={<ServerProperties user={user} status={status} />} />
-          <Route path="console" element={<ServerConsole user={user} status={status} />} />
-          <Route path="history" element={<ServerHistory user={user} status={status} />} />
-          <Route path="players" element={<h2 >Cette fonctionnalité sera prochainement disponible.</h2>} />
-          <Route path="worlds" element={<h2>Cette fonctionnalité sera prochainement disponible.</h2>} />
-          <Route path="backups" element={<h2>Cette fonctionnalité sera prochainement disponible.</h2>} />
-          <Route path="access" element={<h2>Cette fonctionnalité sera prochainement disponible.</h2>} />
-          <Route path="*" element={<NotFoundPage />} />
-        </Routes>
+          <Routes>
+            <Route path="options" element={<ServerProperties user={user} status={status} />} />
+            <Route path="console" element={<ServerConsole user={user} status={status} />} />
+            <Route path="history" element={<ServerHistory user={user} status={status} />} />
+            <Route path="players" element={<h2 >Cette fonctionnalité sera prochainement disponible.</h2>} />
+            <Route path="worlds" element={<h2>Cette fonctionnalité sera prochainement disponible.</h2>} />
+            <Route path="backups" element={<h2>Cette fonctionnalité sera prochainement disponible.</h2>} />
+            <Route path="access" element={<h2>Cette fonctionnalité sera prochainement disponible.</h2>} />
+            <Route path="*" element={<NotFoundPage />} />
+          </Routes>
         </div>
       </div>
     </>

src/pages/ServerDetails/ServerDetails.module.scss

@@ -1,6 +1,7 @@
 .container {
   display: flex;
   min-height: calc(100vh - var(--navbar-height));
+  transition: margin-left 0.3s;
 }
 
 .sidebar {
@@ -13,15 +14,27 @@
   height: calc(100vh - var(--navbar-height));  
   top: var(--navbar-height);
   color: white;
+  transition: width 0.3s;
+}
+
+.sidebar.collapsed {
+  width: 4rem; 
+}
+
+.menu {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-center; 
+  margin-top: 3rem; 
 }
 
 .menuItem {
   display: flex;
   align-items: center;
-  padding: 0.7rem 1rem ;
+  padding: 0.7rem 1rem;
   margin: .8rem 0rem;
   padding-right: 0rem;
-  font-size: 1.5rem;
+  font-size: 1.25rem;
   cursor: pointer;
   color: #D1D5DB;
   text-decoration: none;
@@ -32,42 +45,29 @@
   }
 }
 
-.menuItem:hover {
-  color: white;
-}
-
-
-.user {
-  margin-bottom: 2rem;
-}
-
-.user p {
-  font-size: 1.25rem;
-  font-weight: bold;
-}
-
-.user small {
-  font-size: 0.875rem;
-  color: #9CA3AF;
-}
-
-.menu {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-around;
-  margin-top: 2.5rem;
-}
-
-
 .menuItem:hover {
   color: white;
 }
 
 .menuItem svg {
   margin-right: 1rem;
-  font-size: 1.25rem;
+  font-size: 1.8rem;
 }
 
+.toggleButton {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 2rem;
+  color: white;
+  background-color: #100D25;
+  border: none;
+  cursor: pointer;
+  transition: background-color 0.3s;
+  margin: 0;
+  right: 0;
+  margin-bottom: 1rem;
+}
 
 .serverDetailsContainer {
   margin-top: var(--navbar-height);
@@ -83,22 +83,6 @@
   overflow-y: auto; 
 }
 
-
-.navbar {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%; 
-  height: var(--navbar-height);
-  background-color: var(--navbar-bg-color);  
-  z-index: 1000;  
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);  
-}
-
-.userinfo {
-  display: flex;
-  align-items: start;
-  justify-content: center;
-  flex-direction: column;
-  margin-left: 1rem;
+.container.collapsed .serverDetailsContainer {
+  margin-left: 5rem; //  largeur mode rétracté
 }