fix: refactor sidebar item to accept a component as wrapper

themesberg · May 9, 2022 · 1c964eb · 1c964eb
1 parent ffd8323
commit 1c964eb
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 12 deletions.
diff --git a/src/docs/Root.tsx b/src/docs/Root.tsx
@@ -2,13 +2,14 @@ import { FC, Suspense, useState } from 'react';
 import { BsGithub } from 'react-icons/bs';
 import { HiMenuAlt1 } from 'react-icons/hi';
 import { SiStorybook } from 'react-icons/si';
-import { Route, Routes } from 'react-router-dom';
+import { Link, Route, Routes, useLocation } from 'react-router-dom';
 
 import { DarkThemeToggle, Navbar, Sidebar, Spinner } from '../lib';
 import { routes } from './routes';
 
 export const Root: FC = () => {
   const [collapsed, setCollapsed] = useState(false);
+  const { pathname } = useLocation();
 
   return (
     <div className="flex h-screen w-full flex-col overflow-hidden">
@@ -47,7 +48,7 @@ export const Root: FC = () => {
           <Sidebar.Items>
             <Sidebar.ItemGroup>
               {routes.map(({ href, icon, title }, key) => (
-                <Sidebar.Item key={key} href={href} icon={icon}>
+                <Sidebar.Item key={key} icon={icon} as={Link} to={href} active={href === pathname}>
                   {title}
                 </Sidebar.Item>
               ))}

diff --git a/src/lib/components/Sidebar/SidebarItem.tsx b/src/lib/components/Sidebar/SidebarItem.tsx
@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { ComponentProps, FC, PropsWithChildren } from 'react';
+import { ComponentProps, ElementType, FC, PropsWithChildren } from 'react';
 import { Badge, BadgeColor } from '../Badge';
 import { Tooltip } from '../Tooltip';
 import { useSidebarContext } from './SidebarContext';
@@ -12,22 +12,23 @@ export interface SidebarItem {
   labelColor?: BadgeColor;
 }
 
-export interface SidebarItemProps extends PropsWithChildren<SidebarItem> {
-  href: string;
+export interface SidebarItemProps extends PropsWithChildren<SidebarItem & Record<string, unknown>> {
+  as?: ElementType;
+  active?: boolean;
 }
 
 const SidebarItem: FC<SidebarItemProps> = ({
   children,
   className,
-  href,
+  as: Component = 'a',
+  active,
   icon: Icon,
   label,
   labelColor = 'blue',
   ...rest
 }) => {
   const { collapsed } = useSidebarContext();
   const { insideCollapse } = useSidebarItemContext();
-  const isCurrentPage = typeof window !== 'undefined' && window.location.pathname === href;
 
   const Wrapper = ({ children: wrapperChildren }: PropsWithChildren<Record<string, unknown>>) => (
     <li data-testid="sidebar-item">
@@ -43,23 +44,22 @@ const SidebarItem: FC<SidebarItemProps> = ({
 
   return (
     <Wrapper>
-      <a
+      <Component
         className={classNames(
           'flex items-center rounded-lg p-2 text-base font-normal text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700',
           {
-            'bg-gray-100 dark:bg-gray-700': isCurrentPage,
+            'bg-gray-100 dark:bg-gray-700': active,
             'group w-full pl-8 transition duration-75': !collapsed && insideCollapse,
           },
           className,
         )}
-        href={href}
         {...rest}
       >
         {Icon && (
           <Icon
             className={classNames(
               'h-6 w-6 flex-shrink-0 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white',
-              { 'text-gray-700 dark:text-gray-100': isCurrentPage },
+              { 'text-gray-700 dark:text-gray-100': active },
             )}
           />
         )}
@@ -73,7 +73,7 @@ const SidebarItem: FC<SidebarItemProps> = ({
             {label}
           </Badge>
         )}
-      </a>
+      </Component>
     </Wrapper>
   );
 };