Change mobile navigation #2297

src/pages/commonFeed/CommonFeed.module.scss

@@ -16,8 +16,6 @@
   width: 1.5rem;
   height: 1.5rem;
   margin-right: 0.625rem;
-  transform: rotate(180deg);
-  color: $c-neutrals-600;
 }
 
 .feedLayout {

src/pages/commonFeed/CommonFeed.tsx

@@ -29,7 +29,7 @@ import { useRoutesContext } from "@/shared/contexts";
 import { useAuthorizedModal, useQueryParams } from "@/shared/hooks";
 import { useCommonFeedItems, useUserCommonIds } from "@/shared/hooks/useCases";
 import { useCommonPinnedFeedItems } from "@/shared/hooks/useCases/useCommonPinnedFeedItems";
-import { RightArrowThinIcon } from "@/shared/icons";
+import { SidebarIcon } from "@/shared/icons";
 import {
   checkIsFeedItemFollowLayoutItem,
   FeedLayoutItem,
@@ -416,6 +416,7 @@ const CommonFeedComponent: FC<CommonFeedProps> = (props) => {
   useEffect(() => {
     return () => {
       const common = stateRef.current?.data?.common;
+      const rootCommon = stateRef.current?.data?.rootCommon;
 
       dispatch(
         commonLayoutActions.setLastCommonFromFeed({
@@ -426,6 +427,19 @@ const CommonFeedComponent: FC<CommonFeedProps> = (props) => {
                 image: common.image,
                 isProject: checkIsProject(common),
                 memberCount: common.memberCount,
+                rootCommon: common.rootCommonId
+                  ? {
+                      id: common.rootCommonId,
+                      data: rootCommon
+                        ? {
+                            name: rootCommon.name,
+                            image: rootCommon.image,
+                            isProject: false,
+                            memberCount: rootCommon.memberCount,
+                          }
+                        : null,
+                    }
+                  : null,
               }
             : null,
         }),
@@ -439,7 +453,7 @@ const CommonFeedComponent: FC<CommonFeedProps> = (props) => {
     ) : (
       <PureCommonTopNavigation
         className={styles.pureCommonTopNavigation}
-        iconEl={<RightArrowThinIcon className={styles.openSidenavIcon} />}
+        iconEl={<SidebarIcon className={styles.openSidenavIcon} />}
       />
     );
 
@@ -459,7 +473,7 @@ const CommonFeedComponent: FC<CommonFeedProps> = (props) => {
       <>
         <PureCommonTopNavigation
           className={styles.pureCommonTopNavigation}
-          iconEl={<RightArrowThinIcon className={styles.openSidenavIcon} />}
+          iconEl={<SidebarIcon className={styles.openSidenavIcon} />}
         />
         <div className={styles.centerWrapper}>
           <NotFound />

src/pages/commonFeed/components/HeaderContent/components/HeaderCommonContent/HeaderCommonContent.module.scss

@@ -18,14 +18,13 @@
   width: 1.5rem;
   height: 1.5rem;
   margin-right: 0.625rem;
-  transform: rotate(180deg);
-  color: $c-neutrals-600;
 }
 
 .commonLink {
   padding: 0 1.5rem 0 1.375rem;
   display: flex;
   align-items: center;
+  color: inherit;
   text-decoration: none;
   overflow: hidden;
   box-sizing: border-box;
@@ -40,6 +39,13 @@
   @include tablet {
     padding-left: 0;
     padding-right: 0.5rem;
+
+    &:hover {
+      .commonName {
+        color: inherit;
+        text-decoration: none;
+      }
+    }
   }
 }
 

src/pages/commonFeed/components/HeaderContent/components/HeaderCommonContent/HeaderCommonContent.tsx

@@ -2,7 +2,8 @@ import React, { FC } from "react";
 import { NavLink } from "react-router-dom";
 import classNames from "classnames";
 import { useRoutesContext } from "@/shared/contexts";
-import { RightArrowThinIcon, StarIcon } from "@/shared/icons";
+import { useIsTabletView } from "@/shared/hooks/viewport";
+import { SidebarIcon, StarIcon } from "@/shared/icons";
 import { CommonAvatar, TopNavigationOpenSidenavButton } from "@/shared/ui-kit";
 import { getPluralEnding } from "@/shared/utils";
 import styles from "./HeaderCommonContent.module.scss";
@@ -26,17 +27,27 @@ const HeaderCommonContent: FC<HeaderCommonContentProps> = (props) => {
     showFollowIcon = false,
   } = props;
   const { getCommonPageAboutTabPath } = useRoutesContext();
+  const isTabletView = useIsTabletView();
+
+  const ContentWrapper: FC = ({ children }) =>
+    isTabletView ? (
+      <div className={styles.commonLink}>{children}</div>
+    ) : (
+      <NavLink
+        className={styles.commonLink}
+        to={getCommonPageAboutTabPath(commonId)}
+      >
+        {children}
+      </NavLink>
+    );
 
   return (
     <div className={styles.container}>
       <TopNavigationOpenSidenavButton
         className={styles.openSidenavButton}
-        iconEl={<RightArrowThinIcon className={styles.openSidenavIcon} />}
+        iconEl={<SidebarIcon className={styles.openSidenavIcon} />}
       />
-      <NavLink
-        className={styles.commonLink}
-        to={getCommonPageAboutTabPath(commonId)}
-      >
+      <ContentWrapper>
         <CommonAvatar
           name={commonName}
           src={commonImage}
@@ -55,7 +66,7 @@ const HeaderCommonContent: FC<HeaderCommonContentProps> = (props) => {
             {memberCount} member{getPluralEnding(memberCount)}
           </p>
         </div>
-      </NavLink>
+      </ContentWrapper>
     </div>
   );
 };

src/pages/commonFeed/components/HeaderContent_v04/HeaderContent_v04.module.scss

@@ -57,8 +57,6 @@
   width: 1.5rem;
   height: 1.5rem;
   margin-right: 0.625rem;
-  transform: rotate(180deg);
-  color: $c-neutrals-600;
 }
 
 .image {

src/pages/commonFeed/components/HeaderContent_v04/HeaderContent_v04.tsx

@@ -5,7 +5,7 @@ import { NewStreamButton } from "@/pages/common/components/CommonTabPanels/compo
 import { useRoutesContext } from "@/shared/contexts";
 import { useCommonFollow } from "@/shared/hooks/useCases";
 import { useIsTabletView } from "@/shared/hooks/viewport";
-import { RightArrowThinIcon, StarIcon } from "@/shared/icons";
+import { SidebarIcon, StarIcon } from "@/shared/icons";
 import {
   CirclesPermissions,
   Common,
@@ -39,7 +39,7 @@ const HeaderContent_v04: FC<HeaderContentProps> = (props) => {
       <div className={styles.commonContent}>
         <TopNavigationOpenSidenavButton
           className={styles.openSidenavButton}
-          iconEl={<RightArrowThinIcon className={styles.openSidenavIcon} />}
+          iconEl={<SidebarIcon className={styles.openSidenavIcon} />}
         />
         <NavLink
           className={styles.commonLink}

src/pages/inbox/components/HeaderContent_v04/HeaderContent_v04.tsx

@@ -38,10 +38,6 @@ const HeaderContent_v04: FC<HeaderContentProps> = (props) => {
           isMobileVersion={isMobileVersion}
           ButtonComponent={PlusButton}
         />
-        <DirectMessageButton
-          className={styles.directMessageButton}
-          isMobileVersion={isMobileVersion}
-        />
       </div>
     </div>
   );

src/services/Common.ts

@@ -160,6 +160,23 @@ class CommonService {
         .get()
     ).docs.map((ref) => ref.ref.path.split("/")[1]);
 
+  public subscribeToUserCommonIds = (
+    userId: string,
+    callback: (data: string[]) => void,
+  ): UnsubscribeFunction => {
+    const query = firebase
+      .firestore()
+      .collectionGroup(SubCollections.Members)
+      .where("userId", "==", userId);
+
+    return query.onSnapshot((snapshot) => {
+      const userCommonIds = snapshot.docs.map(
+        (ref) => ref.ref.path.split("/")[1],
+      );
+      callback(userCommonIds);
+    });
+  };
+
   public getAllUserCommonMemberInfo = async (
     userId: string,
   ): Promise<(CommonMember & { commonId: string })[]> => {

src/shared/hooks/useCases/useUserCommonIds.ts

@@ -1,22 +1,25 @@
-import { useCallback, useEffect } from "react";
+import { useEffect } from "react";
 import { useSelector } from "react-redux";
 import { selectUser } from "@/pages/Auth/store/selectors";
-import { CommonService, Logger } from "@/services";
+import { CommonService } from "@/services";
 import { LoadingState } from "@/shared/interfaces";
-import { useIsMounted } from "../useIsMounted";
 import { useLoadingState } from "../useLoadingState";
 
 export const useUserCommonIds = (): LoadingState<string[]> => {
-  const isMounted = useIsMounted();
   const user = useSelector(selectUser());
   const userId = user?.uid;
   const [state, setState] = useLoadingState<string[]>([], {
     loading: false,
     fetched: !userId,
   });
 
-  const fetchUserCommonIds = useCallback(async () => {
+  useEffect(() => {
     if (!userId) {
+      setState({
+        loading: false,
+        fetched: true,
+        data: [],
+      });
       return;
     }
 
@@ -26,37 +29,18 @@ export const useUserCommonIds = (): LoadingState<string[]> => {
       data: [],
     });
 
-    let userCommonIds: string[] = [];
-
-    try {
-      userCommonIds = await CommonService.getUserCommonIds(userId);
-    } catch (error) {
-      Logger.error(error);
-    } finally {
-      if (isMounted()) {
+    const unsubscribe = CommonService.subscribeToUserCommonIds(
+      userId,
+      (userCommonIds) => {
         setState({
           loading: false,
           fetched: true,
           data: userCommonIds,
         });
-      }
-    }
-  }, [userId]);
+      },
+    );
 
-  const setUserCommonIds = useCallback((ids: string[]) => {
-    setState({
-      loading: false,
-      fetched: true,
-      data: ids,
-    });
-  }, []);
-
-  useEffect(() => {
-    if (userId) {
-      fetchUserCommonIds();
-    } else {
-      setUserCommonIds([]);
-    }
+    return unsubscribe;
   }, [userId]);
 
   return {

src/shared/icons/blocks2.icon.tsx

@@ -0,0 +1,35 @@
+import React, { FC } from "react";
+
+interface Blocks2IconProps {
+  className?: string;
+}
+
+const Blocks2Icon: FC<Blocks2IconProps> = ({ className }) => {
+  const color = "currentColor";
+
+  return (
+    <svg
+      className={className}
+      width="19"
+      height="18"
+      viewBox="0 0 19 18"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M15.9167 0.75H3.08333C2.07081 0.75 1.25 1.57081 1.25 2.58333V15.4167C1.25 16.4292 2.07081 17.25 3.08333 17.25H15.9167C16.9292 17.25 17.75 16.4292 17.75 15.4167V2.58333C17.75 1.57081 16.9292 0.75 15.9167 0.75Z"
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M17.75 9H1.25M9.5 0.75V17.25"
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default Blocks2Icon;

src/shared/icons/index.ts

@@ -4,6 +4,7 @@ export { default as Avatar2Icon } from "./avatar2.icon";
 export { default as Avatar3Icon } from "./avatar3.icon";
 export { default as BillingIcon } from "./billing.icon";
 export { default as BlocksIcon } from "./blocks.icon";
+export { default as Blocks2Icon } from "./blocks2.icon";
 export { default as BoldMarkIcon } from "./boldMark.icon";
 export { default as BoldPlusIcon } from "./boldPlus.icon";
 export { default as CaretIcon } from "./caret.icon";
@@ -59,6 +60,7 @@ export { default as InviteFriendsIcon } from "./inviteFriends.icon";
 export { default as ShareIcon } from "./share.icon";
 export { default as Share2Icon } from "./share2.icon";
 export { default as Share3Icon } from "./share3.icon";
+export { default as SidebarIcon } from "./sidebar.icon";
 export { default as SendIcon } from "./send.icon";
 export { default as SettingsIcon } from "./settings.icon";
 export { default as MinusIcon } from "./minus.icon";

src/shared/icons/sidebar.icon.tsx

@@ -0,0 +1,35 @@
+import React, { FC } from "react";
+
+interface SidebarIconProps {
+  className?: string;
+}
+
+const SidebarIcon: FC<SidebarIconProps> = ({ className }) => {
+  const color = "currentColor";
+
+  return (
+    <svg
+      className={className}
+      width="24"
+      height="25"
+      viewBox="0 0 24 25"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M4 3H2.5V6H4V3ZM20 6C20.8284 6 21.5 5.32843 21.5 4.5C21.5 3.67157 20.8284 3 20 3V6ZM4 6H20V3H4V6Z"
+        fill={color}
+      />
+      <path
+        d="M4 11H2.5V14H4V11ZM16 14C16.8284 14 17.5 13.3284 17.5 12.5C17.5 11.6716 16.8284 11 16 11V14ZM4 14H16V11H4V14Z"
+        fill={color}
+      />
+      <path
+        d="M4 19H2.5V22H4V19ZM15 22C15.8284 22 16.5 21.3284 16.5 20.5C16.5 19.6716 15.8284 19 15 19V22ZM4 22H15V19H4V22Z"
+        fill={color}
+      />
+    </svg>
+  );
+};
+
+export default SidebarIcon;

src/shared/layouts/CommonSidenavLayout/CommonSidenavLayout.module.scss

@@ -27,7 +27,8 @@
   @include tablet {
     --sb-max-width: 100%;
     --sb-width: 100%;
-    --sb-content-width: 100%;
+    --sb-content-width: 87%;
+    --sb-shadow: 0.125rem 0 0.375rem #{$c-sidebar-shadow};
     --layout-tabs-height: 4rem;
   }
 }