feat: make header links active

Author: beeman

package.json

@@ -33,6 +33,7 @@
     "@swc/helpers": "~0.5.2",
     "@tabler/icons-react": "^2.42.0",
     "@tanstack/react-query": "^5.10.0",
+    "clsx": "^2.0.0",
     "core-js": "^3.33.3",
     "create-nx-workspace": "17.1.3",
     "dayjs": "^1.11.10",

packages/core/src/lib/ui-header/ui-header.module.css

@@ -1,6 +1,6 @@
 .header {
   height: rem(56px);
-  background-color: var(--mantine-color-body);
+  background-color: light-dark(var(--mantine-color-white), var(--mantine-color-dark-9));
   padding-left: var(--mantine-spacing-md);
   padding-right: var(--mantine-spacing-md);
 }
@@ -26,3 +26,7 @@
     background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
   }
 }
+.linkActive {
+  background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
+  color: light-dark(var(--mantine-color-brand-6), var(--mantine-color-brand-4));
+}

packages/core/src/lib/ui-header/ui-header.tsx

@@ -1,6 +1,7 @@
 import { Anchor, Burger, Group } from '@mantine/core'
 import { ReactNode } from 'react'
-import { Link } from 'react-router-dom'
+import cx from 'clsx'
+import { Link, useLocation } from 'react-router-dom'
 import { UiLogo, UiLogoType } from '../ui-logo'
 
 import classes from './ui-header.module.css'
@@ -20,8 +21,14 @@ export interface UiHeaderLink {
 }
 
 export function UiHeader({ base, links = [], logo, logoSmall, opened, profile, toggle }: UiHeaderProps) {
+  const { pathname } = useLocation()
   const items = links.map((link) => (
-    <Anchor component={Link} key={link.label} to={link.link} className={classes.link}>
+    <Anchor
+      component={Link}
+      key={link.label}
+      to={link.link}
+      className={cx(classes.link, { [classes.linkActive]: pathname.startsWith(link.link) })}
+    >
       {link.label}
     </Anchor>
   ))

packages/generators/src/generators/component/files/header/__prefixFileName__-header.module.css.template

@@ -1,6 +1,6 @@
 .header {
   height: rem(56px);
-  background-color: var(--mantine-color-body);
+  background-color: light-dark(var(--mantine-color-white), var(--mantine-color-dark-9));
   padding-left: var(--mantine-spacing-md);
   padding-right: var(--mantine-spacing-md);
 }
@@ -26,3 +26,7 @@
     background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
   }
 }
+.linkActive {
+  background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
+  color: light-dark(var(--mantine-color-brand-6), var(--mantine-color-brand-4));
+}

packages/generators/src/generators/component/files/header/__prefixFileName__-header.tsx.template

@@ -1,6 +1,7 @@
 import { Anchor, Burger, Group } from '@mantine/core'
 import { ReactNode } from 'react'
-import { Link } from 'react-router-dom'
+import cx from 'clsx'
+import { Link, useLocation } from 'react-router-dom'
 import { <%= prefix.className %>Logo, <%= prefix.className %>LogoType } from '../<%= prefix.fileName %>-logo'
 
 import classes from './<%= prefix.fileName %>-header.module.css'
@@ -20,8 +21,14 @@ export interface <%= prefix.className %>HeaderLink {
 }
 
 export function <%= prefix.className %>Header({ base, links = [], logo, logoSmall, opened, profile, toggle }: <%= prefix.className %>HeaderProps) {
+  const { pathname } = useLocation()
   const items = links.map((link) => (
-    <Anchor component={Link} key={link.label} to={link.link} className={classes.link}>
+    <Anchor
+      component={Link}
+      key={link.label}
+      to={link.link}
+      className={cx(classes.link, { [classes.linkActive]: pathname.startsWith(link.link) })}
+    >
       {link.label}
     </Anchor>
   ))

packages/generators/src/generators/theme/__snapshots__/theme-generator.spec.ts.snap

@@ -35,7 +35,9 @@ exports[`theme generator should run successfully 1`] = `
       ""@mantine/modals": "^7.2.2",",
       ""@mantine/notifications": "^7.2.2",",
       ""@tabler/icons-react": "^2.42.0",",
+      ""clsx": "2.0.0",",
       ""dayjs": "^1.11.10",",
+      ""react-router-dom": "6.20.1",",
       ""timeago-react": "^3.0.6"",
       "},",
       ""devDependencies": {",
@@ -636,6 +638,13 @@ exports[`theme generator should run successfully 1`] = `
                           ");",
                           "}",
                           "}",
+                          ".linkActive {",
+                          "background-color: light-dark(",
+                          "var(--mantine-color-gray-0),",
+                          "var(--mantine-color-dark-6)",
+                          ");",
+                          "color: light-dark(var(--mantine-color-brand-6), var(--mantine-color-brand-4));",
+                          "}",
                         ],
                         "isBinary": false,
                         "path": "./test-target/src/app/ui/ui-header/ui-header.module.css",
@@ -644,7 +653,8 @@ exports[`theme generator should run successfully 1`] = `
                         "content": [
                           "import { Anchor, Burger, Group } from '@mantine/core';",
                           "import { ReactNode } from 'react';",
-                          "import { Link } from 'react-router-dom';",
+                          "import cx from 'clsx';",
+                          "import { Link, useLocation } from 'react-router-dom';",
                           "import { UiLogo, UiLogoType } from '../ui-logo';",
                           "import classes from './ui-header.module.css';",
                           "export interface UiHeaderProps {",
@@ -669,12 +679,15 @@ exports[`theme generator should run successfully 1`] = `
                           "profile,",
                           "toggle,",
                           "}: UiHeaderProps) {",
+                          "const { pathname } = useLocation();",
                           "const items = links.map((link) => (",
                           "<Anchor",
                           "component={Link}",
                           "key={link.label}",
                           "to={link.link}",
-                          "className={classes.link}",
+                          "className={cx(classes.link, {",
+                          "[classes.linkActive]: pathname.startsWith(link.link),",
+                          "})}",
                           ">",
                           "{link.label}",
                           "</Anchor>",

packages/generators/src/generators/theme/theme-generator.ts

@@ -28,7 +28,9 @@ export async function themeGenerator(tree: Tree, options: ThemeGeneratorSchema)
       '@mantine/modals': '^7.2.2',
       '@mantine/notifications': '^7.2.2',
       '@tabler/icons-react': '^2.42.0',
+      clsx: '2.0.0',
       dayjs: '^1.11.10',
+      'react-router-dom': '6.20.1',
       'timeago-react': '^3.0.6',
     },
     {