diff --git a/.vscode/settings.json b/.vscode/settings.json index ea94041a..26d1893b 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,6 +1,6 @@ { "editor.codeActionsOnSave": { - "source.fixAll.eslint": true + "source.fixAll.eslint": "explicit" }, "eslint.validate": ["javascript", "typescript"], "eslint.workingDirectories": [ diff --git a/package.json b/package.json index cd587e7b..0ae1f461 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ "build:fix:storybook": "perl -pi -w -e 's/%40/@/g;' storybook-static/index.html", "storybook:serve-static": "yarn build:storybook && http-server storybook-static", "build": "npx tsc --declaration", + "build:watch": "npx tsc --declaration --watch", "clean": "rimraf storybook-static dist", "test": "vitest --run", "test:watch": "vitest", @@ -142,4 +143,4 @@ "lint-staged": { "./src/**/*.{js,jsx,ts,tsx}": "prettier --write" } -} +} \ No newline at end of file diff --git a/src/components/SidebarExpandButton.tsx b/src/components/SidebarExpandButton.tsx index 97bd647f..fab1bad8 100644 --- a/src/components/SidebarExpandButton.tsx +++ b/src/components/SidebarExpandButton.tsx @@ -1,6 +1,6 @@ import { type MouseEvent } from 'react' -import { HamburgerMenuCollapseIcon, HamburgerMenuIcon } from '../icons' +import { HamburgerMenuCollapseIcon, HamburgerMenuCollapsedIcon } from '../icons' import { useSidebar } from './Sidebar' import SidebarItem from './SidebarItem' @@ -19,9 +19,32 @@ function SidebarExpandButton() { setIsExpanded((x: boolean) => !x) }} > - {isExpanded ? : } + {isExpanded ? ( + + ) : ( + + )} ) } +// in case we want to animate it later +// const AnimatedHamburgerIcon = styled(HamburgerMenuCollapsedIcon)<{ +// isExpanded: boolean +// }>` +// animation: ${() => flipAnimation} 0.1s; +// transform: ${({ isExpanded }) => (isExpanded ? 'scaleX(-1)' : 'scaleX(1)')}; +// animation-direction: ${({ isExpanded }) => +// isExpanded ? 'normal' : 'reverse'}; +// ` + +// const flipAnimation = keyframes` +// 0% { +// transform: scaleX(1); +// } +// 100% { +// transform: scaleX(-1); +// } +// ` + export default SidebarExpandButton diff --git a/src/components/SidebarItem.tsx b/src/components/SidebarItem.tsx index b332c9d2..7e9079a0 100644 --- a/src/components/SidebarItem.tsx +++ b/src/components/SidebarItem.tsx @@ -83,7 +83,7 @@ const ItemSC = styled.div<{ textDecoration: 'none', whiteSpace: 'nowrap', width: $isHorizontal ? undefined : '100%', - height: $isHorizontal ? undefined : 40, + height: $isHorizontal ? undefined : 32, flexGrow: 0, padding: $isHorizontal ? undefined : theme.spacing.small, borderRadius: '3px',