adding the hide navigation button and settings option

src/app/organisms/room/RoomViewHeader.jsx

@@ -8,7 +8,7 @@ import { blurOnBubbling } from '../../atoms/button/script';
 import initMatrix from '../../../client/initMatrix';
 import cons from '../../../client/state/cons';
 import navigation from '../../../client/state/navigation';
-import { toggleRoomSettings, openReusableContextMenu, openNavigation } from '../../../client/action/navigation';
+import { toggleNavigation, toggleRoomSettings, openReusableContextMenu, openNavigation } from '../../../client/action/navigation';
 import { togglePeopleDrawer } from '../../../client/action/settings';
 import colorMXID from '../../../util/colorMXID';
 import { getEventCords } from '../../../util/common';
@@ -24,6 +24,7 @@ import RoomOptions from '../../molecules/room-options/RoomOptions';
 import ChevronBottomIC from '../../../../public/res/ic/outlined/chevron-bottom.svg';
 import SearchIC from '../../../../public/res/ic/outlined/search.svg';
 import UserIC from '../../../../public/res/ic/outlined/user.svg';
+import HomeIC from '../../../../public/res/ic/outlined/home.svg';
 import VerticalMenuIC from '../../../../public/res/ic/outlined/vertical-menu.svg';
 import BackArrowIC from '../../../../public/res/ic/outlined/chevron-left.svg';
 
@@ -76,11 +77,17 @@ function RoomViewHeader({ roomId }) {
   return (
     <Header>
       <IconButton
-        src={BackArrowIC}
+        src={HomeIC}
         className="room-header__back-btn"
         tooltip="Return to navigation"
         onClick={() => openNavigation()}
       />
+      <IconButton
+        src={BackArrowIC}
+        className="room-header__hide-navigation-btn"
+        tooltip="Hide Navigation"
+        onClick={() => toggleNavigation()}
+      />
       <button
         ref={roomHeaderBtnRef}
         className="room-header__btn"

src/app/organisms/room/RoomViewHeader.scss

@@ -45,3 +45,10 @@
     display: none;
   }
 }
+
+.room-header__hide-navigation-btn {
+  @include dir.side(margin, 0, var(--sp-tight));
+  @include screen.smallerThan(mobileBreakpoint) {
+    display: none;
+  }
+}

src/app/organisms/settings/Settings.jsx

@@ -7,7 +7,7 @@ import settings from '../../../client/state/settings';
 import navigation from '../../../client/state/navigation';
 import {
   toggleSystemTheme, toggleMarkdown, toggleMembershipEvents, toggleNickAvatarEvents,
-  toggleNotifications, toggleNotificationSounds,
+  toggleNotifications, toggleNotificationSounds, toggleHideNavigation,
 } from '../../../client/action/settings';
 import { usePermission } from '../../hooks/usePermission';
 
@@ -103,6 +103,16 @@ function AppearanceSection() {
           )}
           content={<Text variant="b3">Hide membership change messages from room timeline. (Join, Leave, Invite, Kick and Ban)</Text>}
         />
+        <SettingTile
+          title="Hide navigation by default"
+          options={(
+            <Toggle
+              isActive={settings.hideNavigation}
+              onToggle={() => { toggleHideNavigation(); updateState({}); }}
+            />
+          )}
+          content={<Text variant="b3">Hide the navigation bar by default, when cinny is opened.</Text>}
+        />
         <SettingTile
           title="Hide nick/avatar events"
           options={(

src/app/templates/client/Client.jsx

@@ -15,6 +15,7 @@ import Windows from '../../organisms/pw/Windows';
 import Dialogs from '../../organisms/pw/Dialogs';
 import EmojiBoardOpener from '../../organisms/emoji-board/EmojiBoardOpener';
 
+import settings from '../../../client/state/settings';
 import initMatrix from '../../../client/initMatrix';
 import navigation from '../../../client/state/navigation';
 import cons from '../../../client/state/cons';
@@ -24,9 +25,11 @@ import VerticalMenuIC from '../../../../public/res/ic/outlined/vertical-menu.svg
 
 function Client() {
   const [isLoading, changeLoading] = useState(true);
+  const [roomSelected, selectRoom] = useState(false);
   const [loadingMsg, setLoadingMsg] = useState('Heating up');
   const [dragCounter, setDragCounter] = useState(0);
   const classNameHidden = 'client__item-hidden';
+  const toggleHidden = 'toggle-hidden';
 
   const navWrapperRef = useRef(null);
   const roomWrapperRef = useRef(null);
@@ -34,19 +37,25 @@ function Client() {
   function onRoomSelected() {
     navWrapperRef.current?.classList.add(classNameHidden);
     roomWrapperRef.current?.classList.remove(classNameHidden);
+    selectRoom(navigation.selectedRoomId);
   }
   function onNavigationSelected() {
     navWrapperRef.current?.classList.remove(classNameHidden);
     roomWrapperRef.current?.classList.add(classNameHidden);
   }
+  function onNavigationToggled() {
+    navWrapperRef.current?.classList.toggle(toggleHidden);
+  }
 
   useEffect(() => {
     navigation.on(cons.events.navigation.ROOM_SELECTED, onRoomSelected);
     navigation.on(cons.events.navigation.NAVIGATION_OPENED, onNavigationSelected);
+    navigation.on(cons.events.navigation.NAVIGATION_TOGGLED, onNavigationToggled);
 
     return (() => {
       navigation.removeListener(cons.events.navigation.ROOM_SELECTED, onRoomSelected);
       navigation.removeListener(cons.events.navigation.NAVIGATION_OPENED, onNavigationSelected);
+      navigation.removeListener(cons.events.navigation.NAVIGATION_TOGGLED, onNavigationToggled);
     });
   }, []);
 
@@ -165,7 +174,7 @@ function Client() {
       onDragLeave={handleDragLeave}
       onDrop={handleDrop}
     >
-      <div className="navigation__wrapper" ref={navWrapperRef}>
+      <div className={`navigation__wrapper ${settings.hideNavigation && roomSelected ? toggleHidden : ''}`} ref={navWrapperRef}>
         <Navigation />
       </div>
       <div className={`room__wrapper ${classNameHidden}`} ref={roomWrapperRef}>

src/app/templates/client/Client.scss

@@ -13,6 +13,10 @@
   }
 }
 
+.toggle-hidden {
+    display: none;
+}
+
 .room__wrapper {
   flex: 1;
   min-width: 0;

src/client/action/navigation.js

@@ -30,6 +30,12 @@ export function openNavigation() {
   });
 }
 
+export function toggleNavigation() {
+  appDispatcher.dispatch({
+    type: cons.actions.navigation.TOGGLE_NAVIGATION,
+  });
+}
+
 export function openSpaceSettings(roomId, tabText) {
   appDispatcher.dispatch({
     type: cons.actions.navigation.OPEN_SPACE_SETTINGS,

src/client/action/settings.js

@@ -25,6 +25,12 @@ export function toggleMembershipEvents() {
   });
 }
 
+export function toggleHideNavigation() {
+  appDispatcher.dispatch({
+    type: cons.actions.settings.TOGGLE_HIDE_NAVIGATION,
+  });
+}
+
 export function toggleNickAvatarEvents() {
   appDispatcher.dispatch({
     type: cons.actions.settings.TOGGLE_NICKAVATAR_EVENT,

src/client/state/cons.js

@@ -55,6 +55,7 @@ const cons = {
       OPEN_SEARCH: 'OPEN_SEARCH',
       OPEN_REUSABLE_CONTEXT_MENU: 'OPEN_REUSABLE_CONTEXT_MENU',
       OPEN_NAVIGATION: 'OPEN_NAVIGATION',
+      TOGGLE_NAVIGATION: 'TOGGLE_NAVIGATION',
       OPEN_REUSABLE_DIALOG: 'OPEN_REUSABLE_DIALOG',
       OPEN_EMOJI_VERIFICATION: 'OPEN_EMOJI_VERIFICATION',
     },
@@ -75,6 +76,7 @@ const cons = {
       TOGGLE_MARKDOWN: 'TOGGLE_MARKDOWN',
       TOGGLE_PEOPLE_DRAWER: 'TOGGLE_PEOPLE_DRAWER',
       TOGGLE_MEMBERSHIP_EVENT: 'TOGGLE_MEMBERSHIP_EVENT',
+      TOGGLE_HIDE_NAVIGATION: 'TOGGLE_HIDE_NAVIGATION',
       TOGGLE_NICKAVATAR_EVENT: 'TOGGLE_NICKAVATAR_EVENT',
       TOGGLE_NOTIFICATIONS: 'TOGGLE_NOTIFICATIONS',
       TOGGLE_NOTIFICATION_SOUNDS: 'TOGGLE_NOTIFICATION_SOUNDS',
@@ -89,6 +91,7 @@ const cons = {
       SPACE_MANAGE_OPENED: 'SPACE_MANAGE_OPENED',
       SPACE_ADDEXISTING_OPENED: 'SPACE_ADDEXISTING_OPENED',
       ROOM_SETTINGS_TOGGLED: 'ROOM_SETTINGS_TOGGLED',
+      NAVIGATION_TOGGLED: 'NAVIGATIONS_TOGGLED',
       SHORTCUT_SPACES_OPENED: 'SHORTCUT_SPACES_OPENED',
       INVITE_LIST_OPENED: 'INVITE_LIST_OPENED',
       PUBLIC_ROOMS_OPENED: 'PUBLIC_ROOMS_OPENED',

src/client/state/navigation.js

@@ -349,6 +349,9 @@ class Navigation extends EventEmitter {
       [cons.actions.navigation.OPEN_NAVIGATION]: () => {
         this.emit(cons.events.navigation.NAVIGATION_OPENED);
       },
+      [cons.actions.navigation.TOGGLE_NAVIGATION]: () => {
+        this.emit(cons.events.navigation.NAVIGATION_TOGGLED, this.navigationVisible);
+      },
       [cons.actions.navigation.OPEN_EMOJIBOARD]: () => {
         this.emit(
           cons.events.navigation.EMOJIBOARD_OPENED,

src/client/state/settings.js

@@ -25,6 +25,7 @@ class Settings extends EventEmitter {
 
     this.useSystemTheme = this.getUseSystemTheme();
     this.isMarkdown = this.getIsMarkdown();
+    this.hideNavigation = this.getHideNavigation();
     this.isPeopleDrawer = this.getIsPeopleDrawer();
     this.hideMembershipEvents = this.getHideMembershipEvents();
     this.hideNickAvatarEvents = this.getHideNickAvatarEvents();
@@ -88,6 +89,15 @@ class Settings extends EventEmitter {
     return settings.useSystemTheme;
   }
 
+  getHideNavigation() {
+    if (typeof this.hideNavigation === 'boolean') return this.hideNavigation;
+
+    const settings = getSettings();
+    if (settings === null) return false;
+    if (typeof settings.hideNavigation === 'undefined') return false;
+    return settings.hideNavigation;
+  }
+
   getIsMarkdown() {
     if (typeof this.isMarkdown === 'boolean') return this.isMarkdown;
 
@@ -167,6 +177,11 @@ class Settings extends EventEmitter {
         setSettings('hideMembershipEvents', this.hideMembershipEvents);
         this.emit(cons.events.settings.MEMBERSHIP_EVENTS_TOGGLED, this.hideMembershipEvents);
       },
+      [cons.actions.settings.TOGGLE_HIDE_NAVIGATION]: () => {
+        this.hideNavigation = !this.hideNavigation;
+        setSettings('hideNavigation', this.hideNavigation);
+        this.emit(cons.events.settings.HIDE_NAVIGATION_TOGGLED, this.hideNavigation);
+      },
       [cons.actions.settings.TOGGLE_NICKAVATAR_EVENT]: () => {
         this.hideNickAvatarEvents = !this.hideNickAvatarEvents;
         setSettings('hideNickAvatarEvents', this.hideNickAvatarEvents);