Add user menu sidebar (#195)

src/components/ActionButton.tsx

@@ -1,12 +1,16 @@
 import { Link } from 'react-router-dom'
 import { ActionIcon, ActionIconProps } from './ActionIcon'
+import React from 'react'
 
 interface ActionButtonProps extends React.PropsWithChildren {
   icon?: ActionIconProps
   className?: string
   onClick?: () => void
   to?: string
-  as?: 'button' | 'link'
+  Element?:
+    | 'button'
+    | 'link'
+    | React.ComponentType<React.HTMLAttributes<HTMLButtonElement>>
 }
 
 export const ActionButton = ({
@@ -14,22 +18,33 @@ export const ActionButton = ({
   className,
   onClick,
   to = '/',
-  as = 'button',
+  Element = 'button',
   children,
 }: ActionButtonProps) => {
   const classNames = `group mono flex items-center gap-2 text-chalkboard-110 rounded-sm border border-chalkboard-40 hover:border-liquid-40 p-[3px] ${
     icon ? 'pr-2' : 'px-2'
   } ${className}`
 
-  return as === 'button' ? (
-    <button onClick={onClick} className={classNames}>
-      {icon && <ActionIcon {...icon} />}
-      {children}
-    </button>
-  ) : (
-    <Link to={to} className={classNames}>
-      {icon && <ActionIcon {...icon} />}
-      {children}
-    </Link>
-  )
+  if (Element === 'button') {
+    return (
+      <button onClick={onClick} className={classNames}>
+        {icon && <ActionIcon {...icon} />}
+        {children}
+      </button>
+    )
+  } else if (Element === 'link') {
+    return (
+      <Link to={to} className={classNames}>
+        {icon && <ActionIcon {...icon} />}
+        {children}
+      </Link>
+    )
+  } else {
+    return (
+      <Element onClick={onClick} className={classNames}>
+        {icon && <ActionIcon {...icon} />}
+        {children}
+      </Element>
+    )
+  }
 }