feat: new sidebar (app shell) styles (#2303)

2026-08-24 05:07:06 +08:00 · 2023-05-12 11:13:51 +08:00
parent 0fbed5d9d6
commit 10b4558947
54 changed files with 1166 additions and 642 deletions
@@ -0,0 +1,75 @@
+import { globalStyle, style } from '@vanilla-extract/css';
+
+export const baseContainer = style({
+  padding: '12px 16px',
+  display: 'flex',
+  flexFlow: 'column nowrap',
+  rowGap: '8px',
+});
+
+export const scrollableContainerRoot = style({
+  flex: '1 1 auto',
+  overflowY: 'hidden',
+  vars: {
+    '--scrollbar-width': '10px',
+  },
+  transition: 'all .3s .2s',
+  borderTop: '1px solid transparent',
+  selectors: {
+    '&[data-has-scroll-top="true"]': {
+      boxShadow: 'inset 0 8px 8px -8px var(--affine-black-10)',
+    },
+  },
+});
+
+export const scrollableViewport = style({
+  height: '100%',
+});
+
+globalStyle(`${scrollableViewport} > div`, {
+  maxWidth: '100%',
+  display: 'block !important',
+});
+
+export const scrollableContainer = style([
+  baseContainer,
+  {
+    height: '100%',
+  },
+]);
+
+export const scrollbar = style({
+  display: 'flex',
+  flexDirection: 'column',
+  userSelect: 'none',
+  touchAction: 'none',
+  padding: '0 2px',
+  width: 'var(--scrollbar-width)',
+  height: '100%',
+  opacity: 1,
+  transition: 'opacity .15s',
+  selectors: {
+    '&[data-state="hidden"]': {
+      opacity: 0,
+    },
+  },
+});
+
+export const scrollbarThumb = style({
+  position: 'relative',
+  background: 'var(--affine-black-30)',
+  borderRadius: '4px',
+  selectors: {
+    '&::before': {
+      content: '""',
+      position: 'absolute',
+      top: '50%',
+      left: '50%',
+      transform: 'translate(-50%, -50%)',
+      width: '100%',
+      height: '100%',
+      minWidth: '44px',
+      minHeight: '44px',
+    },
+  },
+});
@@ -0,0 +1,61 @@
+import * as ScrollArea from '@radix-ui/react-scroll-area';
+import clsx from 'clsx';
+import { type PropsWithChildren, useEffect, useRef, useState } from 'react';
+
+import * as styles from './index.css';
+
+export function SidebarContainer({ children }: PropsWithChildren) {
+  return <div className={clsx([styles.baseContainer])}>{children}</div>;
+}
+
+function useHasScrollTop() {
+  const ref = useRef<HTMLDivElement>(null);
+  const [hasScrollTop, setHasScrollTop] = useState(false);
+
+  useEffect(() => {
+    if (!ref.current) {
+      return;
+    }
+
+    const container = ref.current;
+
+    function updateScrollTop() {
+      if (container) {
+        const hasScrollTop = container.scrollTop > 0;
+        setHasScrollTop(hasScrollTop);
+      }
+    }
+
+    container.addEventListener('scroll', updateScrollTop);
+    updateScrollTop();
+    return () => {
+      container.removeEventListener('scroll', updateScrollTop);
+    };
+  }, []);
+
+  return [hasScrollTop, ref] as const;
+}
+
+export function SidebarScrollableContainer({ children }: PropsWithChildren) {
+  const [hasScrollTop, ref] = useHasScrollTop();
+  return (
+    <ScrollArea.Root
+      data-has-scroll-top={hasScrollTop}
+      className={styles.scrollableContainerRoot}
+    >
+      <ScrollArea.Viewport
+        className={clsx([styles.scrollableViewport])}
+        ref={ref}
+      >
+        <div className={clsx([styles.scrollableContainer])}>{children}</div>
+      </ScrollArea.Viewport>
+      <ScrollArea.Scrollbar
+        forceMount
+        orientation="vertical"
+        className={styles.scrollbar}
+      >
+        <ScrollArea.Thumb className={styles.scrollbarThumb} />
+      </ScrollArea.Scrollbar>
+    </ScrollArea.Root>
+  );
+}