fix(Sidebar): active parameter追加 (#87)

4-design · Jun 25, 2021 · a63383b · a63383b · vercel · Jun 25, 2021
1 parent 6ae3ef9
commit a63383b
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 1 deletion.
diff --git 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
@@ -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}