From a713bb540083a8231666c412bd14fa5f762e13a4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rafa=C5=82=20Pryma?=
 <38155668+RafalPe@users.noreply.github.com>
Date: Mon, 10 Oct 2022 18:39:46 +0200
Subject: [PATCH] Create sidebar component (#32)

---
 src/components/atoms/sidebar-item.astro | 24 ++++++++++++++++++++++++
 src/components/organisms/sidebar.astro  |  4 +++-
 src/pages/playground/sidebar-item.astro |  5 +++++
 src/pages/playground/sidebar.astro      |  9 +++++++++
 4 files changed, 41 insertions(+), 1 deletion(-)
 create mode 100644 src/components/atoms/sidebar-item.astro
 create mode 100644 src/pages/playground/sidebar-item.astro
 create mode 100644 src/pages/playground/sidebar.astro

diff --git a/src/components/atoms/sidebar-item.astro b/src/components/atoms/sidebar-item.astro
new file mode 100644
index 0000000..58aaf17
--- /dev/null
+++ b/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>
diff --git a/src/components/organisms/sidebar.astro b/src/components/organisms/sidebar.astro
index 82f23df..8df5a60 100644
--- a/src/components/organisms/sidebar.astro
+++ b/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>
diff --git a/src/pages/playground/sidebar-item.astro b/src/pages/playground/sidebar-item.astro
new file mode 100644
index 0000000..8beb8d4
--- /dev/null
+++ b/src/pages/playground/sidebar-item.astro
@@ -0,0 +1,5 @@
+---
+import SidebarItem from '@/atoms/sidebar-item.astro';
+---
+
+<SidebarItem icon="fa6-brands:accusoft" />
diff --git a/src/pages/playground/sidebar.astro b/src/pages/playground/sidebar.astro
new file mode 100644
index 0000000..7262797
--- /dev/null
+++ b/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>