feat(seed-docs): highlight sidebar item, category item when reload page

docs/src/components/ComponentDocumentCategoryNav.tsx

@@ -1,34 +1,61 @@
 import { Link } from "gatsby";
+import * as React from "react";
 
 import * as style from "./ComponentDocumentCategoryNav.css";
 
+type Category = "overview" | "usage" | "style";
 interface ComponentDocumentCategoryNavProps {
   currentPath: string;
 }
 
 const ComponentDocumentCategoryNav = ({
   currentPath,
 }: ComponentDocumentCategoryNavProps) => {
+  const [currentCategory, setCurrentCategory] = React.useState<Category>();
+
+  const isOverview = /overview/g.test(currentPath);
+  const isUsage = /usage/g.test(currentPath);
+  const isStyle = /style/g.test(currentPath);
+
+  // NOTE: /component/alert-dialog/overview/ -> /component/alert-dialog/
+  const removedCategoryPath = currentPath.split("/").slice(0, -2).join("/");
+
+  React.useEffect(() => {
+    if (isOverview) {
+      setCurrentCategory("overview");
+      return;
+    }
+    if (isUsage) {
+      setCurrentCategory("usage");
+      return;
+    }
+    if (isStyle) {
+      setCurrentCategory("style");
+      return;
+    }
+    setCurrentCategory(undefined);
+  }, []);
+
   return (
     <>
       <nav className={style.navContainer}>
         <Link
           className={style.navLink({
-            active: currentPath.includes("overview"),
+            active: currentCategory === "overview",
           })}
-          to={`${currentPath.split("/").slice(0, -2).join("/")}/overview`}
+          to={`${removedCategoryPath}/overview`}
         >
           <p className={style.navLinkText}>Overview</p>
         </Link>
         <Link
-          className={style.navLink({ active: currentPath.includes("usage") })}
-          to={`${currentPath.split("/").slice(0, -2).join("/")}/usage`}
+          className={style.navLink({ active: currentCategory === "usage" })}
+          to={`${removedCategoryPath}/usage`}
         >
           <p className={style.navLinkText}>Usage</p>
         </Link>
         <Link
-          className={style.navLink({ active: currentPath.includes("style") })}
-          to={`${currentPath.split("/").slice(0, -2).join("/")}/style`}
+          className={style.navLink({ active: currentCategory === "style" })}
+          to={`${removedCategoryPath}/style`}
         >
           <p className={style.navLinkText}>Style</p>
         </Link>

docs/src/components/sidebar/Sidebar.tsx

@@ -35,27 +35,17 @@ const SidebarItemContainer = ({ logo }: { logo?: boolean }) => {
           }
         }
       }
-
-      allPrimitiveMetaJson(sort: { name: ASC }) {
-        nodes {
-          name
-          description
-          primitive {
-            childMdx {
-              frontmatter {
-                slug
-              }
-            }
-          }
-        }
-      }
     }
   `);
 
-  const currentPath = typeof window !== "undefined" ? location.pathname : "";
-  const componentData = data.allComponentMetaJson.nodes;
-  const primitiveData = data.allPrimitiveMetaJson.nodes;
+  const [currentPath, setCurrentPath] = useState<string>("");
+  const currentPathname =
+    typeof window !== "undefined" ? window.location.pathname : "";
+  useEffect(() => {
+    setCurrentPath(currentPathname);
+  }, [currentPathname]);
 
+  const componentData = data.allComponentMetaJson.nodes;
   const groupedComponentData = groupby(componentData, (data) =>
     !data.group ? data.name : data.group,
   );
@@ -74,27 +64,24 @@ const SidebarItemContainer = ({ logo }: { logo?: boolean }) => {
       <SidebarTitleWithNoLink title="overview" />
 
       <SidebarItem
-        currentPath={currentPath}
         to="/overview/progress-board"
         name="Progress Board"
-        title="overview"
+        highlight={currentPath === "/overview/progress-board/"}
         onClick={closeSidebar}
       />
 
       <SidebarTitleWithNoLink title="foundation" />
 
       <SidebarItem
-        currentPath={currentPath}
         to="/foundation/color"
         name="Color"
-        title="foundation"
+        highlight={currentPath === "/foundation/color/"}
         onClick={closeSidebar}
       />
       <SidebarItem
-        currentPath={currentPath}
         to="/foundation/typography"
+        highlight={currentPath === "/foundation/typography/"}
         name="Typography"
-        title="foundation"
         onClick={closeSidebar}
       />
 
@@ -106,14 +93,18 @@ const SidebarItemContainer = ({ logo }: { logo?: boolean }) => {
           return (
             <SidebarCollapse title={groupName}>
               {groupItems?.map((item) => {
+                const convertedName = item?.name
+                  ?.replaceAll(" ", "-")
+                  .toLowerCase()!;
+                const regex = new RegExp(`^/component/${convertedName}/`, "g");
+
                 if (item?.platform?.docs?.overview?.status! === "todo") {
                   return (
                     <SidebarItem
                       key={`${item?.name}-todo`}
-                      currentPath={currentPath}
+                      highlight={regex.test(currentPath)}
                       to={item?.name!}
                       name={item?.name!}
-                      title="component"
                       onClick={closeSidebar}
                       status={item?.platform?.docs?.overview?.status!}
                       hasDeps
@@ -124,14 +115,13 @@ const SidebarItemContainer = ({ logo }: { logo?: boolean }) => {
                 return (
                   <SidebarItem
                     key={`${item?.name}-done-or-wip`}
-                    currentPath={currentPath}
                     to={
                       item?.platform?.docs?.overview?.mdx?.childMdx?.frontmatter
                         ?.slug!
                     }
                     alias={item?.alias!}
+                    highlight={regex.test(currentPath)}
                     name={item?.name!}
-                    title="component"
                     onClick={closeSidebar}
                     status={item?.platform?.docs?.overview?.status! as Status}
                     hasDeps
@@ -142,36 +132,27 @@ const SidebarItemContainer = ({ logo }: { logo?: boolean }) => {
           );
         }
 
+        const convertedName = groupItems[0]?.name
+          ?.replaceAll(" ", "-")
+          .toLowerCase()!;
+        const regex = new RegExp(`^/component/${convertedName}/`, "g");
+
         // non-그룹
         return (
           <SidebarItem
             key={`${groupItems[0]?.name}-only-one-component`}
-            currentPath={currentPath}
             to={
               groupItems[0]?.platform?.docs?.overview?.mdx?.childMdx
                 ?.frontmatter?.slug!
             }
             name={groupItems[0]?.name!}
             alias={groupItems[0]?.alias!}
-            title="component"
+            highlight={regex.test(currentPath)}
             onClick={closeSidebar}
             status={groupItems[0]?.platform?.docs?.overview?.status! as Status}
           />
         );
       })}
-
-      <SidebarTitleWithLink title="primitive" onClick={closeSidebar} />
-
-      {primitiveData!.map((node) => (
-        <SidebarItem
-          key={`${node.name!}-primitive-done-or-in-progress`}
-          currentPath={currentPath}
-          to={node?.primitive?.childMdx?.frontmatter?.slug!}
-          name={node.name!}
-          title="primitive"
-          onClick={closeSidebar}
-        />
-      ))}
     </div>
   );
 };

docs/src/components/sidebar/SidebarItem.tsx

@@ -1,35 +1,30 @@
 import type { GatsbyLinkProps } from "gatsby";
 import { Link } from "gatsby";
+import * as React from "react";
 
 import * as style from "./SidebarItem.css";
 
 type Status = "done" | "in-progress" | "todo";
 interface SidebarItemProps {
-  /**
-   * sidebar에 같은 이름으로 존재하는 컴포넌트가 있기 때문에 상위 카테고리로 구별해서 하이라이팅 해줌.
-   */
-  title: "component" | "primitive" | "foundation" | "overview";
   name: string;
+  highlight?: boolean;
   alias?: string;
-  currentPath: string;
   status?: Status;
   hasDeps?: boolean;
 }
 
+// localhost:8000/component/alert-dialog/overview/
+// {domain}/{category}/{component}/{section}/
 const SidebarItem = ({
-  currentPath,
   name,
-  title,
   alias,
   status,
   to,
+  highlight,
   hasDeps,
   onClick,
   onMouseEnter,
 }: GatsbyLinkProps<{}> & SidebarItemProps) => {
-  const currentPathName = currentPath.split("/")[2];
-  const currentname = name.replaceAll(" ", "-").toLowerCase();
-  const active = currentPathName === currentname && currentPath.includes(title);
   const displayName = alias || name;
 
   return (
@@ -42,7 +37,7 @@ const SidebarItem = ({
       <li
         className={style.item({
           disable: status === "todo",
-          highlight: active,
+          highlight,
           hasDeps,
         })}
       >