From a63383bf4679393899952d1cf011da5f589ea833 Mon Sep 17 00:00:00 2001
From: Miyamae Yuuya <locona.0810@gmail.com>
Date: Fri, 25 Jun 2021 21:44:32 +0900
Subject: [PATCH] =?UTF-8?q?fix(Sidebar):=20active=20parameter=E8=BF=BD?=
 =?UTF-8?q?=E5=8A=A0=20(#87)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/Sidebar.stories.tsx | 1 +
 src/layout/Sidebar.tsx         | 5 ++++-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/layout/Sidebar.stories.tsx b/src/layout/Sidebar.stories.tsx
index bcb8405e1..79685a5cd 100644
--- a/src/layout/Sidebar.stories.tsx
+++ b/src/layout/Sidebar.stories.tsx
@@ -28,6 +28,7 @@ export const SidebarTemplate = () => (
         href="/applicants"
         icon={<MdGroup />}
         label="候補者一覧"
+        active
       />
 
       <SidebarMenuItem href="/orgs" icon={<MdFolder />} label="企業一覧" />
diff --git a/src/layout/Sidebar.tsx b/src/layout/Sidebar.tsx
index 46264df7a..3188948c7 100644
--- a/src/layout/Sidebar.tsx
+++ b/src/layout/Sidebar.tsx
@@ -5,23 +5,26 @@ export interface SidebarMenuItemProps {
   href: string
   icon: React.ReactNode
   label: string | React.ReactNode // NOTE: 一時的に文字列とコンポーネントを許容
+  active?: boolean
 }
 
 export const SidebarMenuItem: React.FC<SidebarMenuItemProps> = ({
   href,
   icon,
   label,
+  active = false,
 }) => (
   <a
     href={href}
     className="group"
     css={[
-      tw`flex items-center pl-6 h-10 text-base font-medium rounded-md text-gray-low cursor-pointer hover:text-accent transition duration-300 ease-in-out`,
+      tw`flex items-center h-10 pl-6 text-base font-medium transition duration-300 ease-in-out rounded-md cursor-pointer text-gray-low hover:text-accent`,
       css`
         & > svg {
           ${tw`w-6 h-6 mr-4`}
         }
       `,
+      active && tw`text-accent`,
     ]}
   >
     {icon}