style(Sidebar): move sidebar collpase button to topbar

Signed-off-by: reslene <reslene@numary.com>
formancehq · Dec 16, 2022 · 6ed40e6 · 6ed40e6
1 parent 5ee8b49
commit 6ed40e6
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 41 deletions.
diff --git a/app/src/components/Layout/Layout.tsx b/app/src/components/Layout/Layout.tsx
@@ -53,13 +53,9 @@ const Layout: FunctionComponent<LayoutProps> = ({ children }) => {
           </animated.div>
         ) : (
           <animated.div style={{ height: '100%' }}>
-            <Topbar />
+            <Topbar resized={showMiniSidebar} onResize={handleMiniSidebar} />
             <Box id="layout" sx={{ minHeight: '100%', display: 'flex' }}>
-              <Sidebar
-                width={sideBarWidth}
-                onResize={handleMiniSidebar}
-                resized={showMiniSidebar}
-              />
+              <Sidebar width={sideBarWidth} resized={showMiniSidebar} />
               <Box
                 sx={{ width: { sm: `calc(100% - ${sideBarWidth}px)` } }}
                 mt={8}

diff --git a/app/src/components/Layout/components/Sidebar/Sidebar.tsx b/app/src/components/Layout/components/Sidebar/Sidebar.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { FunctionComponent } from 'react';
 
-import { NavigateBefore, NavigateNext } from '@mui/icons-material';
 import { Box, Button, IconButton, Typography, useTheme } from '@mui/material';
 import { useLocation } from '@remix-run/react';
 import { isArray } from 'lodash';
@@ -11,11 +10,7 @@ import { SidebarProps } from '~/src/components/Layout/components/Sidebar/types';
 import { routerConfig } from '~/src/components/Navbar/routes';
 import LinkWrapper from '~/src/components/Wrappers/LinkWrapper';
 
-const Sidebar: FunctionComponent<SidebarProps> = ({
-  width,
-  onResize,
-  resized,
-}) => {
+const Sidebar: FunctionComponent<SidebarProps> = ({ width, resized }) => {
   const { palette } = useTheme();
   const location = useLocation();
   const { t } = useTranslation();
@@ -43,31 +38,7 @@ const Sidebar: FunctionComponent<SidebarProps> = ({
         transition: 'all 0.25s',
       }}
     >
-      <Box
-        sx={{
-          display: 'flex',
-          justifyContent: resized ? 'center' : 'flex-end',
-          mt: 8,
-          pr: resized ? 0 : 1,
-        }}
-      >
-        <IconButton
-          sx={{
-            ...buttonSx,
-            width: 'auto',
-            transition: 'all 0.85s',
-            ':hover': {
-              transform: 'rotate(360deg)',
-              transition: 'all 0.85s',
-              background: 'transparent',
-            },
-          }}
-          onClick={onResize}
-        >
-          {resized ? <NavigateNext /> : <NavigateBefore />}
-        </IconButton>
-      </Box>
-      <Box>
+      <Box mt={9}>
         {routerConfig.map(({ label: groupLabel, children }, index) => (
           <Box key={index} sx={{ marginTop: resized ? '24px' : 'initial' }}>
             {groupLabel && !resized && (

diff --git a/app/src/components/Layout/components/Sidebar/types.ts b/app/src/components/Layout/components/Sidebar/types.ts
@@ -1,5 +1,4 @@
 export type SidebarProps = {
   width: number;
-  onResize: () => void;
   resized: boolean;
 };
diff --git a/app/src/components/Layout/components/Topbar/Topbar.tsx b/app/src/components/Layout/components/Topbar/Topbar.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { FunctionComponent, useEffect } from 'react';
 
-import { ArrowDropDown, Person } from '@mui/icons-material';
+import { ArrowDropDown, MenuOpen, Person } from '@mui/icons-material';
 import {
   Avatar,
   Box,
@@ -13,11 +13,12 @@ import {
 } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 
+import { TopbarProps } from '~/src/components/Layout/components/Topbar/types';
 import Search from '~/src/components/Search';
 import { useService } from '~/src/hooks/useService';
 import { CurrentUser } from '~/src/utils/api';
 
-const Topbar: FunctionComponent = () => {
+const Topbar: FunctionComponent<TopbarProps> = ({ resized, onResize }) => {
   const { palette } = useTheme();
   const { t } = useTranslation();
   const { api, setCurrentUser, currentUser, metas } = useService();
@@ -82,9 +83,28 @@ const Topbar: FunctionComponent = () => {
       }}
       id="topbar"
     >
-      <Box ml={2}>
+      <Box display="flex">
+        <IconButton
+          sx={{
+            transition: 'all 0.85s',
+            color: ({ palette }) => palette.neutral[500],
+            background: 'transparent',
+            ml: 2,
+            mr: 2,
+            ':hover': {
+              transform: `rotate(${resized ? '-180deg' : '180deg'})`,
+              color: ({ palette }) => palette.neutral[300],
+              transition: 'all 0.85s',
+              background: 'transparent',
+            },
+          }}
+          onClick={onResize}
+        >
+          <MenuOpen />
+        </IconButton>
         <Search />
       </Box>
+
       {currentUser && (
         <Box mr={1}>
           <IconButton sx={{ p: 0 }}>

diff --git a/app/src/components/Layout/components/Topbar/types.ts b/app/src/components/Layout/components/Topbar/types.ts
@@ -0,0 +1,4 @@
+export type TopbarProps = {
+  onResize: () => void;
+  resized: boolean;
+};