disable-navigation-wrapper function

Author: JasminDreasond

src/app/organisms/room/RoomViewHeader.jsx

@@ -59,28 +59,40 @@ function RoomViewHeader({ roomId }) {
 
   setTimeout(forceUnloadedAvatars, 200);
 
+  const navigationSidebarCallback = () => {
+    if (window.matchMedia('screen and (max-width: 768px)').matches) {
+      selectRoomMode('navigation');
+      openNavigation();
+    } else if ($('body').hasClass('disable-navigation-wrapper')) {
+      $('body').removeClass('disable-navigation-wrapper');
+    } else {
+      $('body').addClass('disable-navigation-wrapper');
+    }
+  };
+
   return (
     <Header>
 
       <ul className='navbar-nav mr-auto'>
 
         <li className="nav-item back-navigation">
+
           <IconButton
-            className="nav-link"
+            className="nav-link nav-sidebar-1"
             fa="fa-solid fa-chevron-left"
             tooltip="Navigation sidebar"
             tooltipPlacement="bottom"
-            onClick={() => {
-              if (window.matchMedia('screen and (max-width: 768px)').matches) {
-                selectRoomMode('navigation');
-                openNavigation();
-              } else if ($('body').hasClass('disable-navigation-wrapper')) {
-                $('body').removeClass('disable-navigation-wrapper');
-              } else {
-                $('body').addClass('disable-navigation-wrapper');
-              }
-            }}
+            onClick={navigationSidebarCallback}
           />
+
+          <IconButton
+            className="nav-link nav-sidebar-2"
+            fa="fa-solid fa-chevron-right"
+            tooltip="Navigation sidebar"
+            tooltipPlacement="bottom"
+            onClick={navigationSidebarCallback}
+          />
+
         </li>
 
         <li className="nav-item avatar-base">

src/scss/Client.scss

@@ -69,10 +69,34 @@
   .room-view--dropped > .navbar {
     top: 2px;
   }
+
+  .room-view .nav-sidebar-2 {
+    display: none !important;
+  }
+}
+
+/* Navigation Wrapper hide */
+body:not(.disable-navigation-wrapper) {
+  .room-view .nav-sidebar-2 {
+    display: none !important;
+  }
 }
 
 @media (min-width: 768px) {
   .room-view > .navbar {
     background-color: var(--bg-surface);
   }
+
+  .disable-navigation-wrapper {
+    #space-header,
+    #profile-sidebar {
+      display: none;
+    }
+    .navigation-wrapper {
+      width: 80px;
+    }
+    .room-view .nav-sidebar-1 {
+      display: none !important;
+    }
+  }
 }