refactor: demo style

cheminfo · Jan 14, 2025 · d6b702d · d6b702d
1 parent d21e76b
commit d6b702d
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 59 deletions.
diff --git a/src/demo/Sidebar.tsx b/src/demo/Sidebar.tsx
@@ -1,33 +1,29 @@
-/** @jsxImportSource @emotion/react */
-
-import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 import Menu from 'rc-menu';
 import { memo, useMemo } from 'react';
 import { FaBars } from 'react-icons/fa';
 import { createSearchParams, useNavigate } from 'react-router-dom';
+
 import 'rc-menu/assets/index.css';
 
 import { buildMenu, getKey } from './utility/menu.js';
 
-const sidebarCss = css`
+interface MenuStatus {
+  isMenuClosed: boolean;
+}
+
+const SideBarContainer = styled.div<MenuStatus>`
   background: #2ca8ff;
   position: fixed;
   top: 0;
   height: 100%;
   bottom: 0;
   left: 0;
   z-index: 19;
+  width: ${({ isMenuClosed }) => (isMenuClosed ? '3%' : '260px')};
 `;
 
-const sidebarOpenCss = css`
-  width: 260px;
-`;
-
-const sidebarClosedCss = css`
-  width: 3%;
-`;
-
-const menuBtCss = css`
+const MenuButton = styled.button`
   margin: 2px 4px;
   z-index: 7;
   font-size: 18px;
@@ -56,15 +52,20 @@ const menuBtCss = css`
   }
 `;
 
-const logoCss = css`
+const SideBarHeader = styled.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
   z-index: 4;
   border-bottom: 1px solid #eee;
 `;
 
-const simpleTextCss = css`
+const TitleContainer = styled.div<MenuStatus>`
+  display: ${({ isMenuClosed }) => (isMenuClosed ? 'none' : 'block')};
+  padding: 0.5rem 0.7rem;
+`;
+
+const Title = styled.a`
   text-transform: uppercase;
   padding: 0.5rem 0;
   display: block;
@@ -75,21 +76,18 @@ const simpleTextCss = css`
   font-weight: 400;
   line-height: 30px;
   overflow: hidden;
-`;
-
-const logoNormalCss = css`
-  display: block;
   opacity: 1;
   transform: translateZ(0);
 `;
 
-const sidebarWrapperCss = css`
+const SideBarWrapper = styled.div<MenuStatus>`
   position: relative;
   height: calc(100vh - 75px);
   overflow: hidden auto;
   width: 260px;
   z-index: 4;
   padding-bottom: 100px;
+  display: ${({ isMenuClosed }) => (isMenuClosed ? 'none' : 'block')};
 `;
 
 function Sidebar(props) {
@@ -98,25 +96,19 @@ function Sidebar(props) {
     return buildMenu(props.routes);
   }, [props.routes]);
 
-  const subDisplay = props.menuIsClosed ? 'none' : 'block';
+  const { menuIsClosed } = props;
 
   return (
-    <div
-      className="demo-side-bar"
-      css={css(
-        sidebarCss,
-        props.menuIsClosed ? sidebarClosedCss : sidebarOpenCss,
-      )}
-    >
-      <div css={logoCss}>
-        <div style={{ display: subDisplay, padding: '0.5rem 0.7rem' }}>
-          <a css={css(simpleTextCss, logoNormalCss)}>NMRium</a>
-        </div>
-        <button type="button" css={menuBtCss} onClick={props.onMenuToggle}>
+    <SideBarContainer isMenuClosed={menuIsClosed} className="demo-side-bar">
+      <SideBarHeader>
+        <TitleContainer isMenuClosed={menuIsClosed}>
+          <Title>NMRium</Title>
+        </TitleContainer>
+        <MenuButton type="button" onClick={props.onMenuToggle}>
           <FaBars />
-        </button>
-      </div>
-      <div css={sidebarWrapperCss} style={{ display: subDisplay }}>
+        </MenuButton>
+      </SideBarHeader>
+      <SideBarWrapper isMenuClosed={menuIsClosed}>
         {/* @ts-expect-error menu typings are wrong */}
         <Menu
           onClick={(e) => {
@@ -135,8 +127,8 @@ function Sidebar(props) {
         >
           {routes}
         </Menu>
-      </div>
-    </div>
+      </SideBarWrapper>
+    </SideBarContainer>
   );
 }
 

diff --git a/src/demo/layouts/Admin.tsx b/src/demo/layouts/Admin.tsx
@@ -1,6 +1,4 @@
-/** @jsxImportSource @emotion/react */
-
-import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 import type { ReactElement } from 'react';
 import { Suspense, useCallback, useMemo, useState } from 'react';
 import { Route, Routes, useLocation } from 'react-router-dom';
@@ -9,20 +7,13 @@ import Sidebar from '../Sidebar.js';
 import { getKey, mapTreeToFlatArray } from '../utility/menu.js';
 import { possibleViews } from '../views/index.js';
 
-const mainPanelCss = css`
+const Container = styled.div<{ isMenuClosed: boolean }>`
   position: relative;
   float: right;
   height: 100%;
   background-color: #ebecf1;
-`;
-
-const mainPanelOpenCss = css`
-  width: calc(100% - 260px);
-`;
-
-const mainPanelClosedCss = css`
-  width: 98%;
-  margin-left: 20px !important;
+  width: ${({ isMenuClosed }) => (isMenuClosed ? '98%' : 'calc(100% - 260px)')};
+  margin-left: ${({ isMenuClosed }) => (isMenuClosed ? '20px' : '0px')};
 `;
 
 interface DashboardProps {
@@ -71,13 +62,7 @@ export function Dashboard(props: DashboardProps) {
         menuIsClosed={menuIsClosed}
         onMenuToggle={toggleMenu}
       />
-      <div
-        className="demo-main-container"
-        css={css(
-          mainPanelCss,
-          menuIsClosed ? mainPanelClosedCss : mainPanelOpenCss,
-        )}
-      >
+      <Container isMenuClosed={menuIsClosed} className="demo-main-container">
         {/*<StrictMode>*/}
         <Suspense fallback={<div>Loading...</div>}>
           <Routes>
@@ -97,7 +82,7 @@ export function Dashboard(props: DashboardProps) {
           </Routes>
         </Suspense>
         {/*</StrictMode>*/}
-      </div>
+      </Container>
     </div>
   );
 }