feat: initial style of workspace slide bar

2026-08-06 03:49:56 +08:00 · 2022-11-30 16:08:37 +08:00
parent 5eb7830c13
commit 592ba156b8
13 changed files with 563 additions and 57 deletions
@@ -0,0 +1,13 @@
+export const Arrow = () => {
+  return (
+    <svg
+      width="6"
+      height="10"
+      viewBox="0 0 6 10"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M0.354 9.22997C0.201333 9.0773 0.125 8.91764 0.125 8.75097C0.125 8.5843 0.201333 8.42464 0.354 8.27197L3.625 5.00097L0.354 1.72997C0.201333 1.5773 0.125 1.41764 0.125 1.25097C0.125 1.0843 0.201333 0.924636 0.354 0.771969C0.506667 0.619302 0.666333 0.542969 0.833 0.542969C0.999667 0.542969 1.15933 0.619302 1.312 0.771969L4.979 4.43897C5.06233 4.52164 5.125 4.61164 5.167 4.70897C5.20833 4.8063 5.229 4.90364 5.229 5.00097C5.229 5.0983 5.20833 5.19564 5.167 5.29297C5.125 5.3903 5.06233 5.4803 4.979 5.56297L1.312 9.22997C1.15933 9.38264 0.999667 9.45897 0.833 9.45897C0.666333 9.45897 0.506667 9.38264 0.354 9.22997Z" />
+    </svg>
+  );
+};
@@ -0,0 +1,41 @@
+import React, { useState } from 'react';
+import {
+  StyledArrowButton,
+  StyledListItem,
+  StyledSliderBar,
+  StyledSubListItem,
+  StyledWrapper,
+} from './style';
+import { Arrow } from './icons';
+
+export const WorkSpaceSliderBar = () => {
+  const [show, setShow] = useState(false);
+  return (
+    <>
+
+      <StyledSliderBar show={show}>
+
+        <StyledListItem>Quick search</StyledListItem>
+        <StyledListItem>All pages</StyledListItem>
+        <StyledListItem>Favourites</StyledListItem>
+        <StyledSubListItem>
+          document 1, this is a paper icondocument 1
+        </StyledSubListItem>
+        <StyledSubListItem>document 2</StyledSubListItem>
+        <StyledSubListItem>document 4</StyledSubListItem>
+        <StyledListItem>Import</StyledListItem>
+        <StyledListItem>Bin</StyledListItem>
+      </StyledSliderBar>
+      <StyledArrowButton
+        isShow={show}
+        onClick={() => {
+          setShow(!show);
+        }}
+      >
+        <Arrow />
+      </StyledArrowButton>
+    </>
+  );
+};
+
+export default WorkSpaceSliderBar;
@@ -0,0 +1,83 @@
+import { displayFlex, styled, textEllipsis } from '@/styles';
+
+export const StyledSliderBar = styled.div<{ show: boolean }>(
+  ({ theme, show }) => {
+    return {
+      width: show ? '320px' : '0',
+      height: '100vh',
+      background: '#FBFBFC',
+      boxShadow: theme.shadow.modal,
+      transition: 'width .15s',
+      position: 'relative',
+      zIndex: theme.zIndex.modal,
+      padding: show ? '24px 12px' : '24px 0',
+      overflowX: 'hidden',
+    };
+  }
+);
+export const StyledWrapper = styled.div(() => {
+  return {
+    // padding: '24px 12px',
+    // height: '100%',
+    // overflowY: 'auto',
+  };
+});
+export const StyledArrowButton = styled.button<{ isShow: boolean }>(
+  ({ theme, isShow }) => {
+    return {
+      width: '32px',
+      height: '32px',
+      ...displayFlex('center', 'center'),
+      color: theme.colors.primaryColor,
+      backgroundColor: theme.colors.hoverBackground,
+      borderRadius: '50%',
+      transition: 'all .15s',
+      position: 'fixed',
+      top: '34px',
+      left: isShow ? '304px' : '-8px',
+      zIndex: theme.zIndex.modal,
+      svg: {
+        transform: isShow ? 'rotate(180deg)' : 'unset',
+      },
+      ':hover': {
+        color: '#fff',
+        backgroundColor: theme.colors.primaryColor,
+      },
+    };
+  }
+);
+
+export const StyledListItem = styled.button(({ theme }) => {
+  return {
+    width: '296px',
+    height: '32px',
+    marginTop: '12px',
+    fontSize: theme.font.sm,
+    color: theme.colors.popoverColor,
+    ...displayFlex('flex-start', 'center'),
+    ':hover': {
+      color: theme.colors.primaryColor,
+      backgroundColor: theme.colors.hoverBackground,
+    },
+  };
+});
+
+export const StyledSubListItem = styled.button(({ theme }) => {
+  return {
+    width: '296px',
+    height: '32px',
+    marginTop: '4px',
+    fontSize: theme.font.sm,
+    fontWeight: 400,
+    color: theme.colors.popoverColor,
+    paddingLeft: '45px',
+    lineHeight: '32px',
+    textAlign: 'start',
+    ...textEllipsis(1),
+    ':hover': {
+      color: theme.colors.primaryColor,
+      backgroundColor: theme.colors.hoverBackground,
+      fontWeight: 500,
+    },
+  };
+});