From 22006a45a211e38214cef778211c1ee894287c82 Mon Sep 17 00:00:00 2001 From: Andrey Mikhadyuk Date: Thu, 27 Jul 2023 13:04:23 +0400 Subject: [PATCH 001/120] allow sidenav to be opened not only on tablet and lower --- src/shared/ui-kit/Sidenav/Sidenav.tsx | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) diff --git a/src/shared/ui-kit/Sidenav/Sidenav.tsx b/src/shared/ui-kit/Sidenav/Sidenav.tsx index a5c67ef8ce..faea1c2bf9 100644 --- a/src/shared/ui-kit/Sidenav/Sidenav.tsx +++ b/src/shared/ui-kit/Sidenav/Sidenav.tsx @@ -10,17 +10,24 @@ import styles from "./Sidenav.module.scss"; interface SidenavProps { contentWrapperClassName?: string; style?: CSSProperties; + shouldCheckViewportForOpenState?: boolean; onOpenToggle?: (isOpen: boolean) => void; } const Sidenav: FC = (props) => { - const { contentWrapperClassName, style, onOpenToggle, children } = props; + const { + contentWrapperClassName, + style, + shouldCheckViewportForOpenState = true, + onOpenToggle, + children, + } = props; const queryParams = useQueryParams(); const viewportStates = useAllViews(); - const isSidenavVisible = - !viewportStates.isTabletView || checkIsSidenavOpen(queryParams); - // Sidenav can be open only on tablet and lower viewports - const isSidenavOpen = viewportStates.isTabletView && isSidenavVisible; + // Sidenav can be open only on tablet and lower viewports if shouldCheckViewportForOpenState is `true` + const isAllowedToBeShown = + !shouldCheckViewportForOpenState || viewportStates.isTabletView; + const isSidenavOpen = isAllowedToBeShown && checkIsSidenavOpen(queryParams); const onSidebarKeyUp = (event: KeyboardEvent): void => { if (event.key === KeyboardKeys.Escape) { From d9d22e240a1e0ed03e235661b93c14ff3f121894 Mon Sep 17 00:00:00 2001 From: Andrey Mikhadyuk Date: Thu, 27 Jul 2023 13:11:39 +0400 Subject: [PATCH 002/120] add menu button to header --- .../components/Header/Header.module.scss | 6 ++++++ .../MultipleSpacesLayout/components/Header/Header.tsx | 6 ++++++ 2 files changed, 12 insertions(+) diff --git a/src/shared/layouts/MultipleSpacesLayout/components/Header/Header.module.scss b/src/shared/layouts/MultipleSpacesLayout/components/Header/Header.module.scss index e70e28c92a..73857ed126 100644 --- a/src/shared/layouts/MultipleSpacesLayout/components/Header/Header.module.scss +++ b/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 { diff --git a/src/shared/layouts/MultipleSpacesLayout/components/Header/Header.tsx b/src/shared/layouts/MultipleSpacesLayout/components/Header/Header.tsx index e84ca15697..abd80e9989 100644 --- a/src/shared/layouts/MultipleSpacesLayout/components/Header/Header.tsx +++ b/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,6 +18,7 @@ interface HeaderProps { backUrl?: string | null; withBreadcrumbs?: boolean; breadcrumbsItemsWithMenus?: boolean; + withMenuButton?: boolean; } const Header: FC = (props) => { @@ -24,6 +26,7 @@ const Header: FC = (props) => { backUrl = null, withBreadcrumbs = true, breadcrumbsItemsWithMenus = true, + withMenuButton = true, } = props; const isAuthenticated = useSelector(authentificated()); const user = useSelector(selectUser()); @@ -40,6 +43,9 @@ const Header: FC = (props) => { return (
+ {withMenuButton && ( + + )} {withBreadcrumbs && !backUrl && ( )} From 55a80b319f8088c13b850055034ea3dc86e75364 Mon Sep 17 00:00:00 2001 From: Andrey Mikhadyuk Date: Thu, 27 Jul 2023 13:54:17 +0400 Subject: [PATCH 003/120] add basic sidenav to multiple spaces layout --- .../MultipleSpacesLayout.module.scss | 13 ++++++-- .../MultipleSpacesLayout.tsx | 32 +++++++++++++++++-- src/shared/ui-kit/Sidenav/Sidenav.tsx | 12 +++++-- 3 files changed, 49 insertions(+), 8 deletions(-) diff --git a/src/shared/layouts/MultipleSpacesLayout/MultipleSpacesLayout.module.scss b/src/shared/layouts/MultipleSpacesLayout/MultipleSpacesLayout.module.scss index 7446d06d3b..0523f2dc44 100644 --- a/src/shared/layouts/MultipleSpacesLayout/MultipleSpacesLayout.module.scss +++ b/src/shared/layouts/MultipleSpacesLayout/MultipleSpacesLayout.module.scss @@ -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,20 @@ --sb-width: 100%; --sb-content-width: 100%; --layout-tabs-height: 4rem; + --header-h: 0; } } -.main { - --header-h: 3.5rem; +.sidenav { + top: var(--header-h); +} +.sidenavContent { + margin: 0 auto; + max-width: 25rem; +} + +.main { flex: 1; max-width: var(--main-mw); padding-left: var(--main-pl); diff --git a/src/shared/layouts/MultipleSpacesLayout/MultipleSpacesLayout.tsx b/src/shared/layouts/MultipleSpacesLayout/MultipleSpacesLayout.tsx index a286c706db..5279753d7d 100644 --- a/src/shared/layouts/MultipleSpacesLayout/MultipleSpacesLayout.tsx +++ b/src/shared/layouts/MultipleSpacesLayout/MultipleSpacesLayout.tsx @@ -1,4 +1,4 @@ -import React, { CSSProperties, FC } from "react"; +import React, { CSSProperties, FC, useCallback, useState } from "react"; import { useSelector } from "react-redux"; import { useWindowSize } from "react-use"; import { @@ -6,10 +6,13 @@ import { MultipleSpacesLayoutRouteOptions, } from "@/pages/App/router"; import { MainRoutesProvider } from "@/shared/contexts"; +import { useLockedBody } from "@/shared/hooks"; import { useIsTabletView } from "@/shared/hooks/viewport"; +import { Sidenav } from "@/shared/ui-kit"; import { selectMultipleSpacesLayoutBackUrl } from "@/store/states"; +import { SidenavContent } from "../CommonSidenavLayout/components"; import { getSidenavLeft } from "../CommonSidenavLayout/utils"; -import { Header, Menu } from "./components"; +import { Header } from "./components"; import styles from "./MultipleSpacesLayout.module.scss"; const MultipleSpacesLayout: FC = (props) => { @@ -19,21 +22,44 @@ const MultipleSpacesLayout: FC = (props) => { const backUrl = useSelector(selectMultipleSpacesLayoutBackUrl); const isTabletView = useIsTabletView(); const { width } = useWindowSize(); + const { lockBodyScroll, unlockBodyScroll } = useLockedBody(); + const [isSidenavOpen, setIsSidenavOpen] = useState(false); const sidenavLeft = getSidenavLeft(width); const style = { "--sb-h-indent": `${sidenavLeft}px`, } as CSSProperties; + const handleSidenavOpenToggle = useCallback( + (isOpen: boolean) => { + setIsSidenavOpen(isOpen); + + if (isOpen) { + lockBodyScroll(); + } else { + unlockBodyScroll(); + } + }, + [lockBodyScroll, unlockBodyScroll], + ); + return (
- + + +
{!isTabletView && (
)} {children} diff --git a/src/shared/ui-kit/Sidenav/Sidenav.tsx b/src/shared/ui-kit/Sidenav/Sidenav.tsx index faea1c2bf9..9af5c71783 100644 --- a/src/shared/ui-kit/Sidenav/Sidenav.tsx +++ b/src/shared/ui-kit/Sidenav/Sidenav.tsx @@ -8,6 +8,7 @@ import { checkIsSidenavOpen, closeSidenav } from "@/shared/utils"; import styles from "./Sidenav.module.scss"; interface SidenavProps { + className?: string; contentWrapperClassName?: string; style?: CSSProperties; shouldCheckViewportForOpenState?: boolean; @@ -16,6 +17,7 @@ interface SidenavProps { const Sidenav: FC = (props) => { const { + className, contentWrapperClassName, style, shouldCheckViewportForOpenState = true, @@ -44,9 +46,13 @@ const Sidenav: FC = (props) => { return (