From 48c3040e4f1c0b5c4ddccb94f366759e226d0d91 Mon Sep 17 00:00:00 2001
From: Andrey Mikhadyuk <mihadiuk.andrej@gmail.com>
Date: Tue, 14 Nov 2023 14:05:23 +0300
Subject: [PATCH] add close sidenav button to v04

---
 .../SidenavContent/SidenavContent.module.scss          |  5 +++++
 .../components/SidenavContent/SidenavContent.tsx       | 10 +++++++++-
 2 files changed, 14 insertions(+), 1 deletion(-)

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<SidenavContentProps> = (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<SidenavContentProps> = (props) => {
         logoClassName={styles.commonLogo}
         logoSrc={commonLogoSrc}
       />
+      {isTabletView && (
+        <ButtonIcon className={styles.closeIconWrapper} onClick={onClose}>
+          <Close2Icon />
+        </ButtonIcon>
+      )}
       {!isTabletView && (
         <>
           {separatorEl}