Display nav-link states

pudek357 · Aug 17, 2024 · 7c3df62 · 7c3df62
1 parent 9ce6a5f
commit 7c3df62
Show file tree

Hide file tree

Showing 4 changed files with 89 additions and 6 deletions.
diff --git a/src/Bar.tsx b/src/Bar.tsx
diff --git a/src/Foo.tsx b/src/Foo.tsx
diff --git a/src/RootLayout.tsx b/src/RootLayout.tsx
@@ -1,4 +1,35 @@
-import { Link, Outlet, useLocation, useNavigation } from "react-router-dom";
+import { ComponentProps, ReactNode } from "react";
+import {
+  Link,
+  NavLink as BaseNavLink,
+  Outlet,
+  useLocation,
+  useNavigation,
+} from "react-router-dom";
+
+const NavLink = ({
+  to,
+  children,
+}: ComponentProps<typeof BaseNavLink> & { children: ReactNode }) => (
+  <BaseNavLink
+    to={to}
+    className="nav-link"
+    end={to === "/react-router-route-lazy/"}
+    unstable_viewTransition
+  >
+    {({ isActive, isPending, isTransitioning }) => (
+      <>
+        <span className="nav-link-route">{children}</span>
+
+        <span className="nav-link-state">
+          {isActive && <span className="nav-link-state-item">A</span>}
+          {isPending && <span className="nav-link-state-item">P</span>}
+          {isTransitioning && <span className="nav-link-state-item">T</span>}
+        </span>
+      </>
+    )}
+  </BaseNavLink>
+);
 
 export const RootLayout = () => {
   const { pathname } = useLocation();
@@ -11,13 +42,13 @@ export const RootLayout = () => {
       <div className="main-content">
         <div className="sidebar">
           <div>
-            <Link to="/react-router-route-lazy/">root</Link>
+            <NavLink to="/react-router-route-lazy/">root</NavLink>
           </div>
           <div>
-            <Link to="/react-router-route-lazy/foo">foo</Link>
+            <NavLink to="/react-router-route-lazy/foo">foo</NavLink>
           </div>
           <div>
-            <Link to="/react-router-route-lazy/bar">bar</Link>
+            <NavLink to="/react-router-route-lazy/bar">bar</NavLink>
           </div>
         </div>
 

diff --git a/src/index.css b/src/index.css
@@ -80,3 +80,25 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }
+
+.nav-link {
+  display: flex;
+  height: 22px;
+  text-decoration: none;
+}
+
+.nav-link-route {
+  width: 40px;
+}
+
+.nav-link-state {
+  margin-left: 4px;
+  display: flex;
+}
+
+.nav-link-state-item {
+  width: 20px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}