Merge pull request #50 from hubHarmony/lazyload

responsive to the moon

src/components/navbar/Navbar.module.scss

@@ -81,9 +81,16 @@
   color: var(--primary-color);
   margin-right: auto; 
   margin-left: 2rem;
+  
 }
 
 .backIcon {
   margin-right: 0.5rem;
   font-size: 1.5rem;
 }
+
+@media (max-width: 650px) {
+  .backButton{
+    font-size: 1.25rem;
+  }
+}

src/pages/CreateServer/CreateServer.module.scss

@@ -59,7 +59,7 @@ img {
   background-color: #2f2f2f;
   color: white;
   cursor: pointer;
-
+  border: none;
   visibility: hidden;
   opacity: 0;
 }
@@ -85,3 +85,25 @@ img {
   width: 22rem;
   height: auto;
 }
+
+@media (max-width: 1000px) {
+  .GamesContainer {
+    flex-direction: column;
+    flex-wrap: row;
+    margin-top: 40rem;
+    height: 100%;
+
+  }
+
+  .GameCard {
+    margin: 1rem;
+    width: 20rem;
+    padding: 2.5rem;
+  }
+}
+
+@media (max-width: 750px) {
+  .GamesContainer {
+    margin-top: 50rem;
+  }
+}

src/pages/CreateServer/Javapick/java.module.scss

@@ -126,3 +126,15 @@
     background-color: #145a32;
     transform: scale(1.05);
 }
+
+
+@media (max-width: 900px) {
+  .VersionContainer {
+    grid-template-columns: repeat(4, 1fr); 
+  }
+
+  .inputContainer.inputValid {
+    transform: translateX(-20%); 
+  }
+
+}

src/pages/PlayersStatus/PlayersStatus.module.scss

@@ -53,3 +53,33 @@ input {
     font-size: 1.5rem;
     font-weight: 400;
 }
+
+@media (max-width: 650px) {
+    
+input {
+    font-size: 1rem;
+    padding: .35rem;
+
+}
+
+.sendButton {
+    margin-left: .25rem;
+    padding: .35rem .75rem;
+
+}
+
+
+.titlesection {
+    font-size: 1.5rem;
+}
+
+.playerAvatar {
+    width: 1.5rem;
+    height: 1.5rem;
+}
+
+.playerName {
+    font-size: 1rem;
+}
+    }
+  

src/pages/ServerDetails/ServerDetails.jsx

@@ -11,7 +11,7 @@ import PropTypes from "prop-types";
 import { FaCogs, FaUserFriends, FaGlobe, FaHistory, FaClipboardList, FaSave, FaLock } from 'react-icons/fa';
 import { FiChevronsLeft, FiChevronsRight } from "react-icons/fi";
 import NotFoundPage from '../NotFoundPage/NotFoundPage';
-import { useLocation,useNavigate} from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 
 const ServerDetails = ({ user }) => {
   const { serverName } = useParams(); 
@@ -19,7 +19,18 @@ const ServerDetails = ({ user }) => {
   const navigate = useNavigate();
   const initialStatus = location.state?.status ?? JSON.parse(localStorage.getItem('status')) ?? false;
   const [status, setStatus] = useState(initialStatus);
-  const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false);
+  const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(window.innerWidth < 900);
+
+  useEffect(() => {
+    const handleResize = () => {
+      setIsSidebarCollapsed(window.innerWidth < 900);
+    };
+
+    window.addEventListener('resize', handleResize);
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
 
   useEffect(() => {
     if (location.pathname.includes('/console')) {
@@ -47,46 +58,45 @@ const ServerDetails = ({ user }) => {
             <NavLink 
               to={`/server/${serverName}/options`} 
               className={({ isActive }) => isActive ? `${styles.menuItem} ${styles.active}` : styles.menuItem}>
-              <FaCogs /> {!isSidebarCollapsed && 'Propriétés'}
+              <FaCogs style={{ fontSize: isSidebarCollapsed ? '1.5rem' : '1.25rem' }} /> {!isSidebarCollapsed && 'Propriétés'}
             </NavLink>
 
             <NavLink 
               state={{ status }}
               to={`/server/${serverName}/console`} 
               className={({ isActive }) => isActive ? `${styles.menuItem} ${styles.active}` : styles.menuItem}>
-              <FaClipboardList /> {!isSidebarCollapsed && 'Console'}
+              <FaClipboardList style={{ fontSize: isSidebarCollapsed ? '1.5rem' : '1.25rem' }} /> {!isSidebarCollapsed && 'Console'}
             </NavLink>
 
             <NavLink 
               to={`/server/${serverName}/history`} 
               className={({ isActive }) => isActive ? `${styles.menuItem} ${styles.active}` : styles.menuItem}>
-              <FaHistory /> {!isSidebarCollapsed && 'Historique'}
+              <FaHistory style={{ fontSize: isSidebarCollapsed ? '1.5rem' : '1.25rem' }} /> {!isSidebarCollapsed && 'Historique'}
             </NavLink>
 
             <NavLink 
               to={`/server/${serverName}/players`} 
               className={({ isActive }) => isActive ? `${styles.menuItem} ${styles.active}` : styles.menuItem}>
-              <FaUserFriends /> {!isSidebarCollapsed && 'Joueurs'}
+              <FaUserFriends style={{ fontSize: isSidebarCollapsed ? '1.5rem' : '1.25rem' }} /> {!isSidebarCollapsed && 'Joueurs'}
             </NavLink>
 
             <NavLink 
               to={`/server/${serverName}/worlds`} 
               className={({ isActive }) => isActive ? `${styles.menuItem} ${styles.active}` : styles.menuItem}>
-              <FaGlobe /> {!isSidebarCollapsed && 'Mondes'}
+              <FaGlobe style={{ fontSize: isSidebarCollapsed ? '1.5rem' : '1.25rem' }} /> {!isSidebarCollapsed && 'Mondes'}
             </NavLink>
 
             <NavLink 
               to={`/server/${serverName}/backups`} 
               className={({ isActive }) => isActive ? `${styles.menuItem} ${styles.active}` : styles.menuItem}>
-              <FaSave /> {!isSidebarCollapsed && 'Sauvegardes'}
+              <FaSave style={{ fontSize: isSidebarCollapsed ? '1.5rem' : '1.25rem' }} /> {!isSidebarCollapsed && 'Sauvegardes'}
             </NavLink>
 
             <NavLink 
               to={`/server/${serverName}/access`} 
               className={({ isActive }) => isActive ? `${styles.menuItem} ${styles.active}` : styles.menuItem}>
-              <FaLock /> {!isSidebarCollapsed && 'Accès'}
+              <FaLock style={{ fontSize: isSidebarCollapsed ? '1.5rem' : '1.25rem' }} /> {!isSidebarCollapsed && 'Accès'}
             </NavLink>
-            
           </div>
         </div>
         <div className={styles.serverDetailsContainer}>

src/pages/ServerDetails/ServerDetails.module.scss

@@ -81,3 +81,11 @@
 .container.collapsed .serverDetailsContainer {
   margin-left: 5rem; //  largeur mode rétracté
 }
+
+
+
+@media (max-width: 950px) {
+  .menuItem svg {
+    font-size: 2.25rem;
+  }
+  }

src/pages/ServerHistory/ServerHistory.module.scss

@@ -52,3 +52,15 @@
     color: black; 
     font-weight: bold;
 }
+
+@media (max-width: 650px) {
+    .filterContainer {
+        padding: 2rem;
+        font-size: 1rem;
+    }
+    
+      .historyCard {
+        padding: .5rem;    
+      }
+    }
+  

src/pages/ServerProperties/ServerProperties.module.scss

@@ -107,6 +107,14 @@
   text-align: center;
 }
 
+@media (max-width: 700px) {
+  .formRow {
+    display: flex;
+    flex-direction: column;
+  }
+  }
+
+
 @media (max-width: 48rem) {
   .details {
     width: 90%;