feat: add ui component Table & add initial workspace style

packages/app/src/components/workspace-slider-bar/index.tsx

@@ -1,22 +1,26 @@
 import React, { useState } from 'react';
+import Router from 'next/router';
 import {
   StyledArrowButton,
   StyledListItem,
+  StyledNewPageButton,
   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
+          onClick={() => {
+            Router.push('/all-page');
+          }}
+        >
+          All pages
+        </StyledListItem>
         <StyledListItem>Favourites</StyledListItem>
         <StyledSubListItem>
           document 1, this is a paper icondocument 1
@@ -25,6 +29,8 @@ export const WorkSpaceSliderBar = () => {
         <StyledSubListItem>document 4</StyledSubListItem>
         <StyledListItem>Import</StyledListItem>
         <StyledListItem>Bin</StyledListItem>
+
+        <StyledNewPageButton>New Page</StyledNewPageButton>
       </StyledSliderBar>
       <StyledArrowButton
         isShow={show}

packages/app/src/components/workspace-slider-bar/style.ts

@@ -12,16 +12,11 @@ export const StyledSliderBar = styled.div<{ show: boolean }>(
       zIndex: theme.zIndex.modal,
       padding: show ? '24px 12px' : '24px 0',
       overflowX: 'hidden',
+      flexShrink: 0,
     };
   }
 );
-export const StyledWrapper = styled.div(() => {
-  return {
-    // padding: '24px 12px',
-    // height: '100%',
-    // overflowY: 'auto',
-  };
-});
+
 export const StyledArrowButton = styled.button<{ isShow: boolean }>(
   ({ theme, isShow }) => {
     return {
@@ -54,6 +49,8 @@ export const StyledListItem = styled.button(({ theme }) => {
     marginTop: '12px',
     fontSize: theme.font.sm,
     color: theme.colors.popoverColor,
+    padding: '0 12px',
+    borderRadius: '5px',
     ...displayFlex('flex-start', 'center'),
     ':hover': {
       color: theme.colors.primaryColor,
@@ -62,13 +59,22 @@ export const StyledListItem = styled.button(({ theme }) => {
   };
 });
 
+export const StyledNewPageButton = styled(StyledListItem)(({ theme }) => {
+  return {
+    position: 'absolute',
+    bottom: '24px',
+    left: '0',
+    right: '0',
+    margin: 'auto',
+  };
+});
+
 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',
@@ -77,7 +83,6 @@ export const StyledSubListItem = styled.button(({ theme }) => {
     ':hover': {
       color: theme.colors.primaryColor,
       backgroundColor: theme.colors.hoverBackground,
-      fontWeight: 500,
     },
   };
 });