diff --git a/src/shared/layouts/CommonSidenavLayout/components/SidenavContent/SidenavContent.module.scss b/src/shared/layouts/CommonSidenavLayout/components/SidenavContent/SidenavContent.module.scss index 6c544b882b..143d213365 100644 --- a/src/shared/layouts/CommonSidenavLayout/components/SidenavContent/SidenavContent.module.scss +++ b/src/shared/layouts/CommonSidenavLayout/components/SidenavContent/SidenavContent.module.scss @@ -37,6 +37,11 @@ } } +.closeIconWrapper { + margin-left: auto; + padding: 1.25rem 1.5rem; +} + .separator { flex-shrink: 0; height: 0.0625rem; diff --git a/src/shared/layouts/CommonSidenavLayout/components/SidenavContent/SidenavContent.tsx b/src/shared/layouts/CommonSidenavLayout/components/SidenavContent/SidenavContent.tsx index 881bcc9499..c8c2609f1a 100644 --- a/src/shared/layouts/CommonSidenavLayout/components/SidenavContent/SidenavContent.tsx +++ b/src/shared/layouts/CommonSidenavLayout/components/SidenavContent/SidenavContent.tsx @@ -3,7 +3,9 @@ import { useSelector } from "react-redux"; import classNames from "classnames"; import { authentificated, selectUser } from "@/pages/Auth/store/selectors"; import commonLogoSrc from "@/shared/assets/images/logo-sidenav-2.svg"; +import { ButtonIcon } from "@/shared/components"; import { useIsTabletView } from "@/shared/hooks/viewport"; +import { Close2Icon } from "@/shared/icons"; import { CommonLogo } from "@/shared/ui-kit"; import { getUserName } from "@/shared/utils"; import { @@ -17,10 +19,11 @@ import styles from "./SidenavContent.module.scss"; interface SidenavContentProps { className?: string; + onClose?: () => void; } const SidenavContent: FC = (props) => { - const { className } = props; + const { className, onClose } = props; const isAuthenticated = useSelector(authentificated()); const user = useSelector(selectUser()); const isTabletView = useIsTabletView(); @@ -39,6 +42,11 @@ const SidenavContent: FC = (props) => { logoClassName={styles.commonLogo} logoSrc={commonLogoSrc} /> + {isTabletView && ( + + + + )} {!isTabletView && ( <> {separatorEl}