fix docs-menu, leftbar, sublink

components/docs-menu.tsx

@@ -4,21 +4,42 @@ import { ROUTES } from "@/lib/routes-config";
 import SubLink from "./sublink";
 import { usePathname } from "next/navigation";
 
-export default function DocsMenu({ isSheet = false }) {
+interface DocsMenuProps {
+  isSheet?: boolean;
+  className?: string;
+}
+
+export default function DocsMenu({ isSheet = false, className = "" }: DocsMenuProps) {
   const pathname = usePathname();
+
+  // Skip rendering if not on a docs page
   if (!pathname.startsWith("/docs")) return null;
 
   return (
-    <div className="flex flex-col gap-3.5 mt-5 pr-2 pb-6">
-      {ROUTES.map((item, index) => {
-        const modifiedItems = {
-          ...item,
-          href: `/docs${item.href}`,
-          level: 0,
-          isSheet,
-        };
-        return <SubLink key={item.title + index} {...modifiedItems} />;
-      })}
-    </div>
+    <nav
+      aria-label="Documentation navigation"
+      className={className}
+    >
+      <ul className="flex flex-col gap-3.5 mt-5 pr-2 pb-6">
+        {ROUTES.map((item, index) => {
+          // Normalize href - hapus leading/trailing slashes
+          const normalizedHref = `/${item.href.replace(/^\/+|\/+$/g, '')}`;
+          const itemHref = `/docs${normalizedHref}`;
+
+          const modifiedItems = {
+            ...item,
+            href: itemHref,
+            level: 0,
+            isSheet,
+          };
+
+          return (
+            <li key={`${item.title}-${index}`}>
+              <SubLink {...modifiedItems} />
+            </li>
+          );
+        })}
+      </ul>
+    </nav>
   );
 }