chore(@kadena/react-ui): Cleanup NavHeader and incorporate into the D…

…ocs website
kadena-community · Feb 2, 2024 · 3bb9d5a · 3bb9d5a
2 parents 7011528 + 25eddc6
commit 3bb9d5a
Show file tree

Hide file tree

Showing 40 changed files with 483 additions and 1,076 deletions.
diff --git a/.changeset/tender-roses-cheat.md b/.changeset/tender-roses-cheat.md
@@ -0,0 +1,5 @@
+---
+'@kadena/react-ui': patch
+---
+
+Updated the NavHeader component export structure, components, and styles
diff --git a/packages/apps/docs/src/components/CookieConsent/styles.css.ts b/packages/apps/docs/src/components/CookieConsent/styles.css.ts
@@ -8,7 +8,7 @@ export const containerClass = style([
     backgroundColor: 'semantic.info.default',
   }),
   {
-    top: tokens.kda.foundation.size.n17,
+    top: tokens.kda.foundation.size.n16,
     zIndex: 1000,
   },
 ]);

diff --git a/packages/apps/docs/src/components/Layout/components/DocsLogo/DocsLogo.tsx b/packages/apps/docs/src/components/Layout/components/DocsLogo/DocsLogo.tsx
@@ -1,12 +1,12 @@
 import { useTheme } from 'next-themes';
-import type { FC } from 'react';
+import type { ComponentPropsWithRef, FC } from 'react';
 import React, { useEffect, useState } from 'react';
 
-interface IProps {
+interface IProps extends ComponentPropsWithRef<'svg'> {
   overwriteTheme?: 'light' | 'dark';
 }
 
-export const DocsLogo: FC<IProps> = ({ overwriteTheme }) => {
+export const DocsLogo: FC<IProps> = ({ overwriteTheme, ...props }) => {
   const { theme } = useTheme() ?? 'dark';
   const [innerTheme, setInnerTheme] = useState<string | undefined>(
     overwriteTheme,
@@ -25,10 +25,11 @@ export const DocsLogo: FC<IProps> = ({ overwriteTheme }) => {
     return (
       <svg
         width="216"
-        height="44"
-        viewBox="0 0 216 44"
+        height="42"
+        viewBox="0 0 216 42"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
+        {...props}
       >
         <path
           d="M38.4893 31.4215V12.5754H41.3735V20.4079H41.8195C42.9916 19.1112 45.3246 16.5011 48.8223 12.5754H52.5984C51.1817 14.1359 48.3594 17.2285 44.128 21.8533C45.5956 23.4477 48.525 26.6365 52.9126 31.4215H49.0048C47.8157 30.0891 45.4206 27.4261 41.8195 23.4308H41.3735V31.4215H38.4893Z"

diff --git a/packages/apps/docs/src/components/Layout/components/Header/Header.tsx b/packages/apps/docs/src/components/Layout/components/Header/Header.tsx
@@ -1,96 +1,91 @@
 import { useMenu } from '@/hooks/useMenu/useMenu';
 import type { IMenuItem, LayoutType } from '@kadena/docs-tools';
-import { SystemIcon } from '@kadena/react-ui';
+import {
+  NavHeader,
+  NavHeaderButtonLink,
+  NavHeaderLink,
+  NavHeaderLinkList,
+  Stack,
+  SystemIcon,
+} from '@kadena/react-ui';
 import classNames from 'classnames';
 import Link from 'next/link';
+import { useRouter } from 'next/router';
 import type { FC } from 'react';
 import React from 'react';
 import { globalClass } from '../../global.css';
 import { DocsLogo } from '../DocsLogo/DocsLogo';
 import { HamburgerMenuToggle } from './HamburgerMenuToggle';
-import { NavItemActiveBackground } from './NavItemActiveBackground';
 import { SearchButton } from './SearchButton';
 import { ThemeToggle } from './ThemeToggle';
 import {
-  headerButtonClass,
   headerClass,
-  headerIconGroupClass,
-  hideOnMobileClass,
-  innerWrapperClass,
-  logoClass,
-  navClass,
+  hideOnTabletClass,
   navLinkClass,
   skipNavClass,
-  socialGroupClass,
-  spacerClass,
-  ulClass,
+  socialsClass,
 } from './styles.css';
-import { useHeaderAnimation } from './useHeaderAnimation';
 
 interface IProps {
   menuItems: IMenuItem[];
   layout?: LayoutType;
 }
 
 export const Header: FC<IProps> = ({ menuItems, layout = 'full' }) => {
-  const { hasPath, listRef, backgroundRef } = useHeaderAnimation();
   const { toggleMenu, isMenuOpen } = useMenu();
+  const { pathname } = useRouter();
 
   return (
-    <header className={classNames(globalClass, headerClass)}>
+    <div className={classNames(globalClass, headerClass)}>
       <a className={skipNavClass} href="#maincontent">
         Skip to main content
       </a>
-      <div className={innerWrapperClass}>
-        <div className={logoClass}>
-          <Link href="/" passHref aria-label="Go to the home page">
-            <DocsLogo overwriteTheme="dark" />
-          </Link>
-        </div>
 
-        <div className={hideOnMobileClass}>
-          <NavItemActiveBackground show={hasPath} ref={backgroundRef} />
-          <nav className={navClass}>
-            <ul className={ulClass} ref={listRef}>
-              {menuItems.map((item) => (
-                <li key={item.root}>
-                  <Link href={item.root} className={classNames(navLinkClass)}>
-                    {item.menu}
-                  </Link>
-                </li>
-              ))}
-            </ul>
-          </nav>
-        </div>
-        <div className={spacerClass} />
+      <NavHeader
+        logo={
+          <Link href="/" aria-label="Go to the home page">
+            <DocsLogo overwriteTheme="dark" height={32} />
+          </Link>
+        }
+        activeHref={pathname}
+      >
+        <NavHeaderLinkList className={hideOnTabletClass}>
+          {menuItems.map((item) => (
+            <NavHeaderLink key={item.root} asChild>
+              <Link href={item.root} className={navLinkClass}>
+                {item.menu}
+              </Link>
+            </NavHeaderLink>
+          ))}
+        </NavHeaderLinkList>
 
-        <section className={classNames(headerIconGroupClass, socialGroupClass)}>
-          <a
+        <Stack justifyContent="flex-end" gap="md" flex={1}>
+          <NavHeaderButtonLink
+            className={socialsClass}
             href="https://twitter.com/kadena_io"
             title="Go to our Twitter"
-            className={classNames(headerButtonClass)}
-          >
-            <SystemIcon.Twitter />
-          </a>
-          <a
+            icon={<SystemIcon.Twitter />}
+          />
+
+          <NavHeaderButtonLink
+            className={socialsClass}
             href="https://github.com/kadena-community"
             title="Go to our Github"
-            className={classNames(headerButtonClass)}
-          >
-            <SystemIcon.Github />
-          </a>
-        </section>
-        <section className={headerIconGroupClass}>
+            icon={<SystemIcon.Github />}
+          />
+
           <ThemeToggle />
-          <div className={hideOnMobileClass}>
+
+          <div className={hideOnTabletClass}>
             <SearchButton />
           </div>
+
           <HamburgerMenuToggle
             toggleMenu={toggleMenu}
             isMenuOpen={isMenuOpen}
           />
-        </section>
-      </div>
-    </header>
+        </Stack>
+      </NavHeader>
+    </div>
   );
 };
diff --git a/packages/apps/docs/src/components/Layout/components/Header/NavItemActiveBackground.tsx b/packages/apps/docs/src/components/Layout/components/Header/NavItemActiveBackground.tsx
diff --git a/packages/apps/docs/src/components/Layout/components/Header/ThemeToggle.tsx b/packages/apps/docs/src/components/Layout/components/Header/ThemeToggle.tsx
@@ -1,10 +1,8 @@
 import { EVENT_NAMES, analyticsEvent } from '@/utils/analytics';
-import { SystemIcon } from '@kadena/react-ui';
-import classNames from 'classnames';
+import { NavHeaderButton, SystemIcon } from '@kadena/react-ui';
 import { useTheme } from 'next-themes';
 import type { FC } from 'react';
 import React, { useEffect, useState } from 'react';
-import { headerButtonClass, iconButtonClass } from './styles.css';
 
 export const ThemeToggle: FC = () => {
   const [isMounted, setIsMounted] = useState<boolean>(false);
@@ -25,12 +23,11 @@ export const ThemeToggle: FC = () => {
   if (!isMounted) return null;
 
   return (
-    <button
+    <NavHeaderButton
       onClick={toggleTheme}
       title="Go to our Twitter"
-      className={classNames(headerButtonClass, iconButtonClass)}
-    >
-      <SystemIcon.ThemeLightDark />
-    </button>
+      aria-label="Go to our Twitter"
+      icon={<SystemIcon.ThemeLightDark />}
+    />
   );
 };