init: the first public commit for AFFiNE

libs/components/layout/src/settings-sidebar/SettingsSidebar.tsx

@@ -0,0 +1,33 @@
+import { styled } from '@toeverything/components/ui';
+import { useShowSettingsSidebar } from '@toeverything/datasource/state';
+import { ContainerTabs } from './ContainerTabs';
+
+const SETTINGS_SIDEBAR_WIDTH = 370;
+
+export const SettingsSidebar = () => {
+    const { showSettingsSidebar } = useShowSettingsSidebar();
+
+    return (
+        <StyledContainerForSidebar
+            isShow={showSettingsSidebar}
+            id="id-side-panel"
+        >
+            {showSettingsSidebar ? <ContainerTabs /> : null}
+        </StyledContainerForSidebar>
+    );
+};
+
+const StyledContainerForSidebar = styled('div', {
+    shouldForwardProp: (prop: string) => !['isShow'].includes(prop),
+})<{ isShow?: boolean }>(({ theme, isShow }) => {
+    return {
+        flex: 'none',
+        width: isShow ? SETTINGS_SIDEBAR_WIDTH : 0,
+        // TODO: animation not working
+        transition: 'all 300ms ease-in-out',
+        borderLeft: `1px solid ${theme.affine.palette.menuSeparator}`,
+        zIndex: 100,
+        backgroundColor: 'white',
+        overflow: 'hidden',
+    };
+});