Add headerClientRoutes and update main header component

src/components/header-client-routes.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import { cn } from "@/utils";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+
+const headerClientClassname =
+  "text-sm text-neutral-700 hover:opacity-80 dark:text-neutral-300 transition-opacity";
+
+const HeaderClientRoutes = () => {
+  const pathname = usePathname();
+  return (
+    <>
+      <Link
+        href="/docs/getting-started"
+        className={cn(
+          headerClientClassname,
+          pathname.includes("/docs") &&
+            "font-medium underline underline-offset-8 dark:text-white  dark:decoration-neutral-600",
+        )}
+      >
+        Docs
+      </Link>
+    </>
+  );
+};
+
+export default HeaderClientRoutes;

src/components/header.tsx

@@ -11,24 +11,35 @@ import UserButton from "@/components/auth/user-btn";
 import Logo from "@/components/icons/logo";
 import { GithubLogo } from "@/components/icons/logos";
 import CommandK from "@/components/commandK";
+import HeaderClientRoutes from "./header-client-routes";
 
 const Header = () => {
   return (
-    <nav className={cn("flex w-full", "sticky top-0 z-50", "bg-white dark:bg-neutral-900")}>
+    <nav
+      className={cn(
+        "flex w-full",
+        "sticky top-0 z-50",
+        "bg-white dark:bg-neutral-900",
+      )}
+    >
       <Container>
         <div className="flex w-full items-center justify-between pb-2 pt-4">
-          <Link
-            href="/"
-            className="flex items-center space-x-3 transition-opacity hover:opacity-80 rtl:space-x-reverse"
-          >
-            <Logo width={30} />
-            <span className="self-center whitespace-nowrap text-lg font-medium tracking-tight dark:text-white">
-              slug
-            </span>
-            <Badge className="cursor-pointer">beta</Badge>
-          </Link>
+          <div className="flex items-center space-x-5">
+            <div className="flex items-center space-x-1 border-r border-neutral-200 dark:border-neutral-800 pr-4">
+              <Link
+                href="/"
+                className="flex items-center space-x-3 transition-opacity hover:opacity-80 rtl:space-x-reverse"
+              >
+                <Logo width={30} />
+                <span className="self-center whitespace-nowrap text-lg font-medium tracking-tight dark:text-white">
+                  slug
+                </span>
+                <Badge className="cursor-pointer">beta</Badge>
+              </Link>
+            </div>
+            <HeaderClientRoutes />
+          </div>
           <div className="flex items-center space-x-1">
-            <Link href="/docs">Docs</Link>
             <ExternalLink
               href="https://github.com/pheralb/slug"
               className={buttonVariants({