Feat/sidebar&top bar (#1454)

2026-07-19 11:06:25 +08:00 · 2023-03-09 17:08:23 +08:00
parent 31d2e522eb
commit 921061eeb6
22 changed files with 259 additions and 541 deletions
@@ -0,0 +1,26 @@
+export const SidebarSwitchIcon = () => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M11 5.00009V19.0001M6 7.62509H8M6 10.2501H8M6 12.8751H8M6.2 19.0001H17.8C18.9201 19.0001 19.4802 19.0001 19.908 18.8094C20.2843 18.6416 20.5903 18.3739 20.782 18.0446C21 17.6702 21 17.1802 21 16.2001V7.80009C21 6.82 21 6.32995 20.782 5.95561C20.5903 5.62632 20.2843 5.35861 19.908 5.19083C19.4802 5.00009 18.9201 5.00009 17.8 5.00009H6.2C5.0799 5.00009 4.51984 5.00009 4.09202 5.19083C3.71569 5.35861 3.40973 5.62632 3.21799 5.95561C3 6.32995 3 6.82 3 7.80009V16.2001C3 17.1802 3 17.6702 3.21799 18.0446C3.40973 18.3739 3.71569 18.6416 4.09202 18.8094C4.51984 19.0001 5.07989 19.0001 6.2 19.0001Z"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M11 5.00009V19.0001M6 7.62509H8M6 10.2501H8M6 12.8751H8M6.2 19.0001H17.8C18.9201 19.0001 19.4802 19.0001 19.908 18.8094C20.2843 18.6416 20.5903 18.3739 20.782 18.0446C21 17.6702 21 17.1802 21 16.2001V7.80009C21 6.82 21 6.32995 20.782 5.95561C20.5903 5.62632 20.2843 5.35861 19.908 5.19083C19.4802 5.00009 18.9201 5.00009 17.8 5.00009H6.2C5.0799 5.00009 4.51984 5.00009 4.09202 5.19083C3.71569 5.35861 3.40973 5.62632 3.21799 5.95561C3 6.32995 3 6.82 3 7.80009V16.2001C3 17.1802 3 17.6702 3.21799 18.0446C3.40973 18.3739 3.71569 18.6416 4.09202 18.8094C4.51984 19.0001 5.07989 19.0001 6.2 19.0001Z"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
@@ -0,0 +1,49 @@
+import { Tooltip } from '@affine/component';
+import { useTranslation } from '@affine/i18n';
+import React, { useCallback, useState } from 'react';
+
+import { useSidebarStatus } from '../../../hooks/affine/use-sidebar-status';
+import { SidebarSwitchIcon } from './icons';
+import { StyledSidebarSwitch } from './style';
+type SidebarSwitchProps = {
+  visible?: boolean;
+  tooltipContent?: string;
+  testid?: string;
+};
+export const SidebarSwitch = ({
+  visible = true,
+  tooltipContent,
+  testid = '',
+}: SidebarSwitchProps) => {
+  const [open, setOpen] = useSidebarStatus();
+  const [tooltipVisible, setTooltipVisible] = useState(false);
+  const { t } = useTranslation();
+  tooltipContent =
+    tooltipContent || (open ? t('Collapse sidebar') : t('Expand sidebar'));
+
+  return (
+    <Tooltip
+      content={tooltipContent}
+      placement="right"
+      zIndex={1000}
+      visible={tooltipVisible}
+    >
+      <StyledSidebarSwitch
+        visible={visible}
+        data-testid={testid}
+        onClick={useCallback(() => {
+          setOpen(!open);
+          setTooltipVisible(false);
+        }, [open, setOpen])}
+        onMouseEnter={useCallback(() => {
+          setTooltipVisible(true);
+        }, [])}
+        onMouseLeave={useCallback(() => {
+          setTooltipVisible(false);
+        }, [])}
+      >
+        <SidebarSwitchIcon />
+      </StyledSidebarSwitch>
+    </Tooltip>
+  );
+};
@@ -0,0 +1,23 @@
+import { styled } from '@affine/component';
+
+export const StyledSidebarSwitch = styled('button')<{ visible: boolean }>(
+  ({ theme, visible }) => {
+    return {
+      display: 'inline-flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      color: theme.colors.innerHoverBackground,
+      width: '32px',
+      height: '32px',
+      borderRadius: '8px',
+      opacity: visible ? 1 : 0,
+      transition: 'all 0.2s ease-in-out',
+      ...(visible ? {} : { cursor: 'not-allowed', pointerEvents: 'none' }),
+
+      ':hover': {
+        background: '#F1F1F4',
+        color: theme.colors.iconColor,
+      },
+    };
+  }
+);