fix: close sider button appears now

HORNET-Storage · Jul 15, 2024 · a8bcbf6 · a8bcbf6
1 parent a40364b
commit a8bcbf6
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 20 deletions.
diff --git a/src/components/header/layouts/MobileHeader.tsx b/src/components/header/layouts/MobileHeader.tsx
@@ -27,24 +27,24 @@ const handleTouchStart = (event: React.TouchEvent) => {
 export const MobileHeader: React.FC<MobileHeaderProps> = ({ toggleSider, isSiderOpened }) => {
   return (
     <BaseRow style={{ width: '100%' }} justify="space-between" align="middle">
-      <BaseCol>
-        <ProfileDropdown />
-      </BaseCol>
+      <BaseCol>{!isSiderOpened && <ProfileDropdown />}</BaseCol>
 
       <BaseCol>
-        <BaseRow align="middle">
-          <BaseCol className="mobile-header-button">
-            <NotificationsDropdown />
-          </BaseCol>
-
-          <BaseCol className="mobile-header-button">
-            <HeaderSearch />
-          </BaseCol>
-
-          <BaseCol className="mobile-header-button">
-            <SettingsDropdown />
-          </BaseCol>
-        </BaseRow>
+        {!isSiderOpened && (
+          <BaseRow align="middle">
+            <BaseCol className="mobile-header-button">
+              <NotificationsDropdown />
+            </BaseCol>
+
+            <BaseCol className="mobile-header-button">
+              <HeaderSearch />
+            </BaseCol>
+
+            <BaseCol className="mobile-header-button">
+              <SettingsDropdown />
+            </BaseCol>
+          </BaseRow>
+        )}
       </BaseCol>
 
       <S.BurgerCol className="mobile-header-button">

diff --git a/src/components/layouts/main/MainHeader/MainHeader.styles.ts b/src/components/layouts/main/MainHeader/MainHeader.styles.ts
@@ -5,11 +5,18 @@ import styled, { css } from 'styled-components';
 
 interface Header {
   $isTwoColumnsLayoutHeader: boolean;
+  $isSiderOpened: boolean;
 }
 
 export const Header = styled(BaseLayout.Header)<Header>`
   line-height: 1.5;
   z-index: 100;
+  ${(props) =>
+    props.$isSiderOpened &&
+    css`
+      background-color: rgba(0, 0, 0, 0) !important;
+      z-index: 105;
+    `}
   position: sticky;
   position: -webkit-sticky;
   top: 0;

diff --git a/src/components/layouts/main/MainHeader/MainHeader.tsx b/src/components/layouts/main/MainHeader/MainHeader.tsx
@@ -4,8 +4,13 @@ import * as S from './MainHeader.styles';
 
 interface MainHeaderProps extends WithChildrenProps {
   isTwoColumnsLayout: boolean;
+  isSiderOpened: boolean;
 }
 
-export const MainHeader: React.FC<MainHeaderProps> = ({ isTwoColumnsLayout, children }) => {
-  return <S.Header $isTwoColumnsLayoutHeader={isTwoColumnsLayout}>{children}</S.Header>;
+export const MainHeader: React.FC<MainHeaderProps> = ({ isTwoColumnsLayout, isSiderOpened, children }) => {
+  return (
+    <S.Header $isSiderOpened={isSiderOpened} $isTwoColumnsLayoutHeader={isTwoColumnsLayout}>
+      {children}
+    </S.Header>
+  );
 };
diff --git a/src/components/layouts/main/MainLayout/MainLayout.tsx b/src/components/layouts/main/MainLayout/MainLayout.tsx
@@ -57,9 +57,8 @@ const MainLayout: React.FC = () => {
 
   return (
     <S.LayoutMaster>
-      <MainSider isCollapsed={siderCollapsed} setCollapsed={setSiderCollapsed} />
       <S.LayoutMain>
-        <MainHeader isTwoColumnsLayout={isTwoColumnsLayout}>
+        <MainHeader isSiderOpened={!siderCollapsed} isTwoColumnsLayout={isTwoColumnsLayout}>
           <Header toggleSider={toggleSider} isSiderOpened={!siderCollapsed} isTwoColumnsLayout={isTwoColumnsLayout} />
         </MainHeader>
         <MainContent
@@ -73,6 +72,7 @@ const MainLayout: React.FC = () => {
           {!isTwoColumnsLayout && <References />}
         </MainContent>
       </S.LayoutMain>
+      <MainSider isCollapsed={siderCollapsed} setCollapsed={setSiderCollapsed} />
     </S.LayoutMaster>
   );
 };