Expandable Side bar in the desktop + back & forward #1896

src/pages/commonFeed/CommonFeedPage.tsx

@@ -1,10 +1,13 @@
-import React, { FC, useEffect } from "react";
-import { useDispatch } from "react-redux";
+import React, { FC, useEffect, useMemo } from "react";
+import { useDispatch, useSelector } from "react-redux";
 import { useParams } from "react-router-dom";
 import { InboxItemType } from "@/shared/constants";
 import { MainRoutesProvider } from "@/shared/contexts";
 import { MultipleSpacesLayoutPageContent } from "@/shared/layouts";
-import { multipleSpacesLayoutActions } from "@/store/states";
+import {
+  multipleSpacesLayoutActions,
+  selectMultipleSpacesLayoutMainWidth,
+} from "@/store/states";
 import BaseCommonFeedPage, {
   CommonFeedPageRouterParams,
 } from "./BaseCommonFeedPage";
@@ -14,20 +17,18 @@ import {
   FeedLayoutSettings,
   HeaderContent,
 } from "./components";
-import { MIN_CHAT_WIDTH } from "./constants";
 import { useActiveItemDataChange } from "./hooks";
+import { generateSplitViewMaxSizeGetter } from "./utils";
 import styles from "./CommonFeedPage.module.scss";
 
 export const FEED_LAYOUT_OUTER_STYLES: FeedLayoutOuterStyles = {
   splitView: styles.splitView,
   desktopChat: styles.desktopChat,
 };
 
-export const FEED_LAYOUT_SETTINGS: FeedLayoutSettings = {
+export const BASE_FEED_LAYOUT_SETTINGS: FeedLayoutSettings = {
   withDesktopChatTitle: false,
   sidenavWidth: 0,
-  getSplitViewMaxSize: (width) =>
-    width < 1100 ? MIN_CHAT_WIDTH : Math.floor(width * 0.6),
 };
 
 const renderContentWrapper: RenderCommonFeedContentWrapper = ({
@@ -56,7 +57,15 @@ const renderContentWrapper: RenderCommonFeedContentWrapper = ({
 const CommonFeedPage: FC = () => {
   const { id: commonId } = useParams<CommonFeedPageRouterParams>();
   const dispatch = useDispatch();
+  const layoutMainWidth = useSelector(selectMultipleSpacesLayoutMainWidth);
   const onActiveItemDataChange = useActiveItemDataChange();
+  const feedLayoutSettings = useMemo<FeedLayoutSettings>(
+    () => ({
+      ...BASE_FEED_LAYOUT_SETTINGS,
+      getSplitViewMaxSize: generateSplitViewMaxSizeGetter(layoutMainWidth),
+    }),
+    [layoutMainWidth],
+  );
 
   useEffect(() => {
     dispatch(
@@ -79,7 +88,7 @@ const CommonFeedPage: FC = () => {
         renderContentWrapper={renderContentWrapper}
         onActiveItemDataChange={onActiveItemDataChange}
         feedLayoutOuterStyles={FEED_LAYOUT_OUTER_STYLES}
-        feedLayoutSettings={FEED_LAYOUT_SETTINGS}
+        feedLayoutSettings={feedLayoutSettings}
       />
     </MainRoutesProvider>
   );

src/pages/commonFeed/utils/generateSplitViewMaxSizeGetter.ts

@@ -0,0 +1,6 @@
+import { MIN_CHAT_WIDTH } from "../constants";
+
+export const generateSplitViewMaxSizeGetter =
+  (containerWidth: number): (() => number) =>
+  () =>
+    containerWidth < 1100 ? MIN_CHAT_WIDTH : Math.floor(containerWidth * 0.6);

src/pages/commonFeed/utils/index.ts

@@ -1 +1,2 @@
+export * from "./generateSplitViewMaxSizeGetter";
 export * from "./getLastMessage";

src/pages/inbox/Inbox.tsx

@@ -1,21 +1,32 @@
-import React, { CSSProperties, FC, ReactNode } from "react";
+import React, { CSSProperties, FC, ReactNode, useMemo } from "react";
 import { useSelector } from "react-redux";
 import { selectUserStreamsWithNotificationsAmount } from "@/pages/Auth/store/selectors";
-import { useActiveItemDataChange } from "@/pages/commonFeed/hooks";
 import { MainRoutesProvider } from "@/shared/contexts";
 import { MultipleSpacesLayoutPageContent } from "@/shared/layouts";
+import { selectMultipleSpacesLayoutMainWidth } from "@/store/states";
+import { FeedLayoutSettings } from "../commonFeed";
 import {
   FEED_LAYOUT_OUTER_STYLES,
-  FEED_LAYOUT_SETTINGS,
+  BASE_FEED_LAYOUT_SETTINGS,
 } from "../commonFeed/CommonFeedPage";
+import { useActiveItemDataChange } from "../commonFeed/hooks";
+import { generateSplitViewMaxSizeGetter } from "../commonFeed/utils";
 import BaseInboxPage from "./BaseInbox";
 import { HeaderContent } from "./components";
 
 const InboxPage: FC = () => {
   const userStreamsWithNotificationsAmount = useSelector(
     selectUserStreamsWithNotificationsAmount(),
   );
+  const layoutMainWidth = useSelector(selectMultipleSpacesLayoutMainWidth);
   const onActiveItemDataChange = useActiveItemDataChange();
+  const feedLayoutSettings = useMemo<FeedLayoutSettings>(
+    () => ({
+      ...BASE_FEED_LAYOUT_SETTINGS,
+      getSplitViewMaxSize: generateSplitViewMaxSizeGetter(layoutMainWidth),
+    }),
+    [layoutMainWidth],
+  );
 
   const renderContentWrapper = (
     children: ReactNode,
@@ -41,7 +52,7 @@ const InboxPage: FC = () => {
         renderContentWrapper={renderContentWrapper}
         onActiveItemDataChange={onActiveItemDataChange}
         feedLayoutOuterStyles={FEED_LAYOUT_OUTER_STYLES}
-        feedLayoutSettings={FEED_LAYOUT_SETTINGS}
+        feedLayoutSettings={feedLayoutSettings}
       />
     </MainRoutesProvider>
   );

src/shared/constants/storageKey.ts

@@ -1,4 +1,5 @@
 export enum StorageKey {
   ChatSize = "chatSize",
   Theme = "theme",
+  MultipleSpacesLayoutSidenavState = "msl-sidenav-state",
 }

src/shared/layouts/MultipleSpacesLayout/MultipleSpacesLayout.module.scss

@@ -3,9 +3,9 @@
 
 .container {
   --main-mw: calc(120rem + var(--sb-h-indent, 0));
-  --main-pl: calc(var(--sb-width) + var(--sb-h-indent, 0));
+  --main-pl: calc(var(--sb-h-indent, 0));
   --sb-max-width: unset;
-  --sb-width: 0rem;
+  --sb-width: 21rem;
   --sb-content-max-width: 100%;
   --sb-content-width: 100%;
   --sb-content-pb: 0;
@@ -16,6 +16,7 @@
   --scroll-bg-color: #{$c-shades-white};
   --scroll-thumb-color: #{$c-neutrals-200};
   --layout-tabs-height: 0rem;
+  --header-h: 3.5rem;
 
   min-height: 100vh;
   height: 100%;
@@ -31,12 +32,35 @@
     --sb-width: 100%;
     --sb-content-width: 100%;
     --layout-tabs-height: 4rem;
+    --header-h: 0;
   }
 }
+.containerWithOpenedSidenav {
+  --main-pl: calc(var(--sb-width) + var(--sb-h-indent, 0));
 
-.main {
-  --header-h: 3.5rem;
+  @include tablet {
+    --main-pl: unset;
+  }
+}
 
+.sidenav {
+  top: var(--header-h);
+}
+
+.sidenavContentWrapper {
+  border-right: 0.25rem solid $c-light-gray-2;
+
+  @include tablet {
+    border: 0;
+  }
+}
+
+.sidenavContent {
+  margin: 0 auto;
+  max-width: 25rem;
+}
+
+.main {
   flex: 1;
   max-width: var(--main-mw);
   padding-left: var(--main-pl);

src/shared/layouts/MultipleSpacesLayout/MultipleSpacesLayout.tsx

@@ -1,39 +1,124 @@
-import React, { CSSProperties, FC } from "react";
-import { useSelector } from "react-redux";
+import React, { CSSProperties, FC, useEffect, useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
 import { useWindowSize } from "react-use";
+import classNames from "classnames";
 import {
   useLayoutRouteContext,
   MultipleSpacesLayoutRouteOptions,
 } from "@/pages/App/router";
+import { StorageKey } from "@/shared/constants";
 import { MainRoutesProvider } from "@/shared/contexts";
+import { useLockedBody, useQueryParams } from "@/shared/hooks";
 import { useIsTabletView } from "@/shared/hooks/viewport";
-import { selectMultipleSpacesLayoutBackUrl } from "@/store/states";
+import { Sidenav } from "@/shared/ui-kit";
+import { checkIsSidenavOpen, closeSidenav, openSidenav } from "@/shared/utils";
+import {
+  multipleSpacesLayoutActions,
+  selectMultipleSpacesLayoutBackUrl,
+} from "@/store/states";
 import { getSidenavLeft } from "../CommonSidenavLayout/utils";
-import { Header, Menu } from "./components";
+import { Header, SidenavContent } from "./components";
 import styles from "./MultipleSpacesLayout.module.scss";
 
+const MULTIPLE_SPACES_LAYOUT_SIDENAV_OPEN_STATE = "open";
+const MULTIPLE_SPACES_LAYOUT_SIDENAV_WIDTH = 336;
+
 const MultipleSpacesLayout: FC = (props) => {
   const { children } = props;
+  const queryParams = useQueryParams();
+  const dispatch = useDispatch();
   const { routeOptions = {} } =
     useLayoutRouteContext<MultipleSpacesLayoutRouteOptions>();
   const backUrl = useSelector(selectMultipleSpacesLayoutBackUrl);
   const isTabletView = useIsTabletView();
   const { width } = useWindowSize();
+  const { lockBodyScroll, unlockBodyScroll } = useLockedBody();
+  const isSidenavOpenFromQueryParams = checkIsSidenavOpen(queryParams);
+  const [isSidenavOpen, setIsSidenavOpen] = useState(
+    () =>
+      localStorage.getItem(StorageKey.MultipleSpacesLayoutSidenavState) ===
+        MULTIPLE_SPACES_LAYOUT_SIDENAV_OPEN_STATE ??
+      isSidenavOpenFromQueryParams,
+  );
   const sidenavLeft = getSidenavLeft(width);
   const style = {
     "--sb-h-indent": `${sidenavLeft}px`,
   } as CSSProperties;
+  const mainWidth =
+    isSidenavOpen && !isTabletView
+      ? width - MULTIPLE_SPACES_LAYOUT_SIDENAV_WIDTH
+      : width;
+
+  const handleSidenavOpen = () => {
+    setIsSidenavOpen(true);
+    localStorage.setItem(
+      StorageKey.MultipleSpacesLayoutSidenavState,
+      MULTIPLE_SPACES_LAYOUT_SIDENAV_OPEN_STATE,
+    );
+    openSidenav();
+  };
+
+  const handleSidenavClose = () => {
+    setIsSidenavOpen(false);
+    localStorage.removeItem(StorageKey.MultipleSpacesLayoutSidenavState);
+    closeSidenav();
+  };
+
+  useEffect(() => {
+    dispatch(multipleSpacesLayoutActions.setMainWidth(mainWidth));
+  }, [mainWidth]);
+
+  useEffect(() => {
+    if (!isTabletView) {
+      return;
+    }
+    if (isSidenavOpenFromQueryParams) {
+      handleSidenavOpen();
+    } else {
+      handleSidenavClose();
+    }
+  }, [isSidenavOpenFromQueryParams, isTabletView]);
+
+  useEffect(() => {
+    if (!isTabletView) {
+      return;
+    }
+    if (isSidenavOpen) {
+      lockBodyScroll();
+    } else {
+      unlockBodyScroll();
+    }
+  }, [isSidenavOpen, isTabletView]);
 
   return (
     <MainRoutesProvider>
-      <div className={styles.container} style={style}>
-        <Menu />
+      <div
+        className={classNames(styles.container, {
+          [styles.containerWithOpenedSidenav]: isSidenavOpen,
+        })}
+        style={style}
+      >
+        <Sidenav
+          className={styles.sidenav}
+          contentWrapperClassName={styles.sidenavContentWrapper}
+          style={{ left: sidenavLeft }}
+          isOpen={isSidenavOpen}
+          shouldCheckViewportForOpenState={false}
+          withAnimation
+        >
+          <SidenavContent
+            className={styles.sidenavContent}
+            onClose={handleSidenavClose}
+          />
+        </Sidenav>
         <main className={styles.main}>
           {!isTabletView && (
             <Header
               backUrl={backUrl}
               withBreadcrumbs={routeOptions.withBreadcrumbs}
               breadcrumbsItemsWithMenus={routeOptions.breadcrumbsItemsWithMenus}
+              withMenuButton={!isSidenavOpen}
+              onMenuClick={handleSidenavOpen}
             />
           )}
           {children}

src/shared/layouts/MultipleSpacesLayout/components/Header/Header.module.scss

@@ -18,6 +18,12 @@
 
 .leftContent {
   flex: 1;
+  display: flex;
+  align-items: center;
+}
+
+.menuButton {
+  color: $c-gray-40;
 }
 
 .backLink {

src/shared/layouts/MultipleSpacesLayout/components/Header/Header.tsx

@@ -3,6 +3,7 @@ import { useSelector } from "react-redux";
 import { NavLink } from "react-router-dom";
 import { authentificated, selectUser } from "@/pages/Auth/store/selectors";
 import { LongLeftArrowIcon } from "@/shared/icons";
+import { TopNavigationOpenSidenavButton } from "@/shared/ui-kit";
 import { getUserName } from "@/shared/utils";
 import {
   ContentStyles,
@@ -17,13 +18,17 @@ interface HeaderProps {
   backUrl?: string | null;
   withBreadcrumbs?: boolean;
   breadcrumbsItemsWithMenus?: boolean;
+  withMenuButton?: boolean;
+  onMenuClick?: () => void;
 }
 
 const Header: FC<HeaderProps> = (props) => {
   const {
     backUrl = null,
     withBreadcrumbs = true,
     breadcrumbsItemsWithMenus = true,
+    withMenuButton = true,
+    onMenuClick,
   } = props;
   const isAuthenticated = useSelector(authentificated());
   const user = useSelector(selectUser());
@@ -40,6 +45,12 @@ const Header: FC<HeaderProps> = (props) => {
   return (
     <div className={styles.container}>
       <div className={styles.leftContent}>
+        {withMenuButton && (
+          <TopNavigationOpenSidenavButton
+            className={styles.menuButton}
+            onClick={onMenuClick}
+          />
+        )}
         {withBreadcrumbs && !backUrl && (
           <Breadcrumbs itemsWithMenus={breadcrumbsItemsWithMenus} />
         )}

src/shared/layouts/MultipleSpacesLayout/components/PageContent/PageContent.module.scss

@@ -30,7 +30,7 @@
   position: fixed;
   top: var(--header-h);
   right: var(--sb-h-indent);
-  left: var(--sb-h-indent);
+  left: var(--main-pl);
   z-index: 2;
   height: var(--page-content-header);
   background-color: $c-shades-white;