Merge pull request #319 from vordgi/rd-318

rd-318 improve header links style
vordgi · Oct 15, 2024 · 8e6ec63 · 8e6ec63
2 parents 4c238da + a33a971
commit 8e6ec63
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 14 deletions.
diff --git a/docs/03-customization/01-elements/page.md b/docs/03-customization/01-elements/page.md
@@ -2,7 +2,7 @@
 
 `Page` is a block responsible for the content of the document itself. It handles displaying markdown-based files as HTML.
 
-```tsx filename ="/docs/example/page.tsx"
+```tsx filename="/docs/example/page.tsx"
 import { Page } from "./robindoc";
 
 export const Page = ({ children }) => {

diff --git a/packages/robindoc/package.json b/packages/robindoc/package.json
@@ -1,6 +1,6 @@
 {
   "name": "robindoc",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "",
   "main": "./lib/index.js",
   "scripts": {

diff --git a/packages/robindoc/src/components/blocks/nav-link/index.tsx b/packages/robindoc/src/components/blocks/nav-link/index.tsx
@@ -1,19 +1,40 @@
 "use client";
 
 import React, { forwardRef } from "react";
-import Link, { LinkProps } from "next/link";
+import Link, { type LinkProps } from "next/link";
+import { usePathname } from "next/navigation";
+import clsx from "clsx";
 
 import { useNavigate } from "@src/components/contexts/navigate/use-navigate";
 
-type NavLinkProps = React.AnchorHTMLAttributes<HTMLAnchorElement> & React.PropsWithChildren<LinkProps>;
+type NavLinkProps = React.AnchorHTMLAttributes<HTMLAnchorElement> &
+    React.PropsWithChildren<LinkProps> & {
+        activeClassName?: string;
+        targetClassName?: string;
+    };
 
-export const NavLink = forwardRef<HTMLAnchorElement, NavLinkProps>(({ onClick, ...props }, ref) => {
-    const { listeners } = useNavigate();
+export const NavLink = forwardRef<HTMLAnchorElement, NavLinkProps>(
+    ({ onClick, className, href, targetClassName, activeClassName, ...props }, ref) => {
+        const { listeners } = useNavigate();
+        const pathname = usePathname();
 
-    const clickHandler = (e: React.MouseEvent<HTMLAnchorElement>) => {
-        [...listeners].forEach((el) => el.listener());
-        if (onClick) onClick(e);
-    };
+        const clickHandler = (e: React.MouseEvent<HTMLAnchorElement>) => {
+            [...listeners].forEach((el) => el.listener());
+            if (onClick) onClick(e);
+        };
 
-    return <Link ref={ref} onClick={clickHandler} {...props} />;
-});
+        return (
+            <Link
+                href={href}
+                className={clsx(
+                    pathname.startsWith(href) && targetClassName,
+                    pathname === href && activeClassName,
+                    className,
+                )}
+                ref={ref}
+                onClick={clickHandler}
+                {...props}
+            />
+        );
+    },
+);
diff --git a/packages/robindoc/src/components/elements/header/header.scss b/packages/robindoc/src/components/elements/header/header.scss
@@ -46,11 +46,20 @@
   transition: color 0.2s;
 
   &:hover,
-  &:focus {
+  &:focus-visible {
     color: var(--neutral950);
   }
 }
 
+.r-header-link._target {
+  color: var(--primary800);
+
+  &:hover,
+  &:focus-visible {
+    color: var(--primary700);
+  }
+}
+
 .r-header-actions {
   display: flex;
   flex-direction: column-reverse;

diff --git a/packages/robindoc/src/components/elements/header/index.tsx b/packages/robindoc/src/components/elements/header/index.tsx
@@ -50,7 +50,12 @@ export const Header: React.FC<HeaderProps> = ({ logo, versions, locales, links =
                 <HeaderMenu translations={{ menu }}>
                     <nav className="r-header-nav">
                         {links.map((link) => (
-                            <NavLink href={link.href} className="r-header-link" key={link.title}>
+                            <NavLink
+                                href={link.href}
+                                className="r-header-link"
+                                targetClassName="_target"
+                                key={link.title}
+                            >
                                 {link.title}
                             </NavLink>
                         ))}