Add navigation sidebar toggle keybind

src/app/templates/client/Client.jsx

@@ -17,6 +17,7 @@ import EmojiBoardOpener from '../../organisms/emoji-board/EmojiBoardOpener';
 
 import initMatrix from '../../../client/initMatrix';
 import navigation from '../../../client/state/navigation';
+import settings from '../../../client/state/settings';
 import cons from '../../../client/state/cons';
 import DragDrop from '../../organisms/drag-drop/DragDrop';
 
@@ -26,6 +27,7 @@ function Client() {
   const [isLoading, changeLoading] = useState(true);
   const [loadingMsg, setLoadingMsg] = useState('Heating up');
   const [dragCounter, setDragCounter] = useState(0);
+  const [navBarVis, setNavBarVis] = useState(true);
   const classNameHidden = 'client__item-hidden';
 
   const navWrapperRef = useRef(null);
@@ -39,14 +41,25 @@ function Client() {
     navWrapperRef.current?.classList.remove(classNameHidden);
     roomWrapperRef.current?.classList.add(classNameHidden);
   }
+  function onNavigationBarToggle() {
+    setNavBarVis(navBarVis => {
+      if (!navBarVis)
+        navWrapperRef.current.style.display = '';
+      else
+        navWrapperRef.current.style.display = 'none';
+      return !navBarVis;
+    });
+  }
 
   useEffect(() => {
     navigation.on(cons.events.navigation.ROOM_SELECTED, onRoomSelected);
     navigation.on(cons.events.navigation.NAVIGATION_OPENED, onNavigationSelected);
+    settings.on(cons.events.settings.NAVIGATION_BAR_TOGGLED, onNavigationBarToggle);
 
     return (() => {
       navigation.removeListener(cons.events.navigation.ROOM_SELECTED, onRoomSelected);
       navigation.removeListener(cons.events.navigation.NAVIGATION_OPENED, onNavigationSelected);
+      settings.removeListener(cons.events.settings.NAVIGATION_BAR_TOGGLED, onNavigationBarToggle);
     });
   }, []);
 

src/client/action/settings.js

@@ -13,6 +13,12 @@ export function toggleMarkdown() {
   });
 }
 
+export function toggleNavigationBar() {
+  appDispatcher.dispatch({
+    type: cons.actions.settings.TOGGLE_NAVIGATION_BAR,
+  });
+}
+
 export function togglePeopleDrawer() {
   appDispatcher.dispatch({
     type: cons.actions.settings.TOGGLE_PEOPLE_DRAWER,

src/client/event/hotkeys.js

@@ -1,4 +1,5 @@
 import { openSearch, toggleRoomSettings } from '../action/navigation';
+import { toggleNavigationBar, togglePeopleDrawer } from '../action/settings';
 import navigation from '../state/navigation';
 import { markAsRead } from '../action/notifications';
 
@@ -47,6 +48,13 @@ function listenKeyboard(event) {
       ) return;
       msgTextarea?.focus();
     }
+
+    // toggle navigation bar
+    if (event.key === ',') {
+      event.preventDefault();
+      if (navigation.isRawModalVisible) return;
+      toggleNavigationBar();
+    }
   }
 
   if (!event.ctrlKey && !event.altKey && !event.metaKey) {

src/client/state/cons.js

@@ -67,6 +67,7 @@ const cons = {
     settings: {
       TOGGLE_SYSTEM_THEME: 'TOGGLE_SYSTEM_THEME',
       TOGGLE_MARKDOWN: 'TOGGLE_MARKDOWN',
+      TOGGLE_NAVIGATION_BAR: 'TOGGLE_NAVIGATION_BAR',
       TOGGLE_PEOPLE_DRAWER: 'TOGGLE_PEOPLE_DRAWER',
       TOGGLE_MEMBERSHIP_EVENT: 'TOGGLE_MEMBERSHIP_EVENT',
       TOGGLE_NICKAVATAR_EVENT: 'TOGGLE_NICKAVATAR_EVENT',
@@ -139,6 +140,7 @@ const cons = {
     settings: {
       SYSTEM_THEME_TOGGLED: 'SYSTEM_THEME_TOGGLED',
       MARKDOWN_TOGGLED: 'MARKDOWN_TOGGLED',
+      NAVIGATION_BAR_TOGGLED: 'NAVIGATION_BAR_TOGGLED',
       PEOPLE_DRAWER_TOGGLED: 'PEOPLE_DRAWER_TOGGLED',
       MEMBERSHIP_EVENTS_TOGGLED: 'MEMBERSHIP_EVENTS_TOGGLED',
       NICKAVATAR_EVENTS_TOGGLED: 'NICKAVATAR_EVENTS_TOGGLED',

src/client/state/settings.js

@@ -157,6 +157,9 @@ class Settings extends EventEmitter {
         setSettings('isMarkdown', this.isMarkdown);
         this.emit(cons.events.settings.MARKDOWN_TOGGLED, this.isMarkdown);
       },
+      [cons.actions.settings.TOGGLE_NAVIGATION_BAR]: () => {
+        this.emit(cons.events.settings.NAVIGATION_BAR_TOGGLED, this.isMarkdown);
+      },
       [cons.actions.settings.TOGGLE_PEOPLE_DRAWER]: () => {
         this.isPeopleDrawer = !this.isPeopleDrawer;
         setSettings('isPeopleDrawer', this.isPeopleDrawer);