Create sidebar component (#32)

src/components/atoms/sidebar-item.astro

@@ -0,0 +1,24 @@
+---
+import type { Icon as IconName } from '@/types/icon';
+
+import Icon from './icon';
+
+export interface Props extends astroHTML.JSX.ButtonHTMLAttributes {
+  icon: IconName;
+  active?: boolean;
+}
+
+const { props } = Astro;
+---
+
+<button
+  type="button"
+  class:list={[
+    `inline-flex justify-center items-center h-10 w-10 rounded-lg transition hover:bg-primary-600`,
+    props.active && 'bg-primary-600',
+    props.class,
+  ]}
+>
+  <Icon client:load name={props.icon} size={20} color={props.active ? 'white' : 'gray'} />
+  <slot />
+</button>

src/components/organisms/sidebar.astro

@@ -4,4 +4,6 @@ export interface Props extends astroHTML.JSX.HTMLAttributes {}
 const { props } = Astro;
 ---
 
-<nav class:list={['w-14 min-w-[56px] h-72 rounded-lg bg-white shadow-md', props.class]}></nav>
+<nav class:list={['flex flex-col w-max p-2 rounded-lg gap-2 bg-white shadow-md', props.class]}>
+  <slot />
+</nav>

src/pages/playground/sidebar-item.astro

@@ -0,0 +1,5 @@
+---
+import SidebarItem from '@/atoms/sidebar-item.astro';
+---
+
+<SidebarItem icon="fa6-brands:accusoft" />

src/pages/playground/sidebar.astro

@@ -0,0 +1,9 @@
+---
+import SidebarItem from '@/atoms/sidebar-item.astro';
+import Sidebar from '@/organisms/sidebar.astro';
+---
+
+<Sidebar>
+  <SidebarItem icon="fa6-brands:accusoft" />
+  <SidebarItem icon="fa6-brands:accusoft" active={true} />
+</Sidebar>