feat: Reduce spacing between icons in sidebar and add vertical padding (

#648)

src/components/Menu.tsx

@@ -0,0 +1,18 @@
+import { Menu as HonorableMenu } from 'honorable'
+import type { MenuProps as HonorableMenuProps } from 'honorable'
+import { type MutableRefObject, forwardRef } from 'react'
+
+export type MenuProps = HonorableMenuProps
+
+function MenuRef({ ...props }: MenuProps, ref: MutableRefObject<any>) {
+  return (
+    <HonorableMenu
+      ref={ref}
+      {...props}
+    />
+  )
+}
+
+const Menu = forwardRef(MenuRef)
+
+export default Menu

src/components/MenuItem.tsx

@@ -0,0 +1,18 @@
+import { MenuItem as HonorableMenuItem } from 'honorable'
+import type { MenuItemProps as HonorableMenuItemProps } from 'honorable'
+import { type MutableRefObject, forwardRef } from 'react'
+
+export type MenuItemProps = HonorableMenuItemProps
+
+function MenuItemRef({ ...props }: MenuItemProps, ref: MutableRefObject<any>) {
+  return (
+    <HonorableMenuItem
+      ref={ref}
+      {...props}
+    />
+  )
+}
+
+const MenuItem = forwardRef(MenuItemRef)
+
+export default MenuItem

src/components/SidebarItem.tsx

@@ -87,7 +87,7 @@ const ItemSC = styled.div<{
   textDecoration: 'none',
   whiteSpace: 'nowrap',
   width: $isHorizontal ? undefined : '100%',
-  height: $isHorizontal ? undefined : 32,
+  height: $isHorizontal ? undefined : 39,
   flexGrow: 0,
   padding: $isHorizontal ? undefined : theme.spacing.small,
   borderRadius: '3px',

src/components/SidebarSection.tsx

@@ -27,7 +27,7 @@ function SidebarSectionRef(
       align="center"
       ref={ref}
       borderBottom={isHorizontal ? '' : '1px solid border'}
-      gap={isHorizontal ? 'medium' : 'xsmall'}
+      gap={isHorizontal ? 'medium' : 'xxsmall'}
       padding={12}
       width={isHorizontal ? 'auto' : '100%'}
       {...styles}

src/index.ts

@@ -1,4 +1,4 @@
-export { Avatar, Menu, MenuItem } from 'honorable'
+export { Avatar } from 'honorable'
 
 // Icons
 export * from './icons'
@@ -35,6 +35,8 @@ export { default as IconFrame } from './components/IconFrame'
 export { default as Input } from './components/Input'
 export { default as Input2 } from './components/Input2'
 export { default as Markdown } from './components/Markdown'
+export { default as Menu } from './components/Menu'
+export { default as MenuItem } from './components/MenuItem'
 export type { PageCardProps } from './components/PageCard'
 export { default as PageCard } from './components/PageCard'
 export { default as PageTitle } from './components/PageTitle'