fix: spacing on sidebar (#595)

Author: jsladerman

.vscode/settings.json

@@ -1,6 +1,6 @@
 {
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
+    "source.fixAll.eslint": "explicit"
   },
   "eslint.validate": ["javascript", "typescript"],
   "eslint.workingDirectories": [

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"
   }
-}
+}

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 ? <HamburgerMenuCollapseIcon /> : <HamburgerMenuIcon />}
+      {isExpanded ? (
+        <HamburgerMenuCollapseIcon />
+      ) : (
+        <HamburgerMenuCollapsedIcon />
+      )}
     </SidebarItem>
   )
 }
 
+// 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

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',