Navigation for frontend projects (#353)

gsoft-inc · Jul 18, 2024 · 23337b8 · 23337b8
2 parents e43931d + 65b01cc
commit 23337b8
Show file tree

Hide file tree

Showing 6 changed files with 158 additions and 7 deletions.
diff --git a/apps/docs/app/ui/layout/header/Header.tsx b/apps/docs/app/ui/layout/header/Header.tsx
@@ -1,20 +1,97 @@
 "use client";
 
+import { useContext, useEffect, useState, useRef, type ReactNode } from "react";
 import Link from "next/link";
+import { SlotProvider } from "@hopper-ui/components";
 
 import ThemeSwitch from "@/components/themeSwitch/ThemeSwitch";
 import IconButton from "@/components/iconButton/IconButton";
+import { Icon, ProductMenuIcon } from "@/components/icon";
+import { ToggleButton, ToggleButtonContext } from "@/components/toggleButton/ToggleButton.tsx";
 import MobileMenu from "@/app/ui/layout/mobileMenu/MobileMenu";
 import MobileMenuTrigger from "@/app/ui/layout/mobileMenu/MobileMenuTrigger";
 import Nav from "@/app/ui/layout/nav/Nav";
 import Wrapper from "@/app/ui/layout/wrapper/Wrapper";
+import { Popover, PopoverTrigger, PopoverContext } from "@/components/popover/Popover";
+import { useIsMobile } from "@/hooks/useIsMobile";
 import { navigation } from "@/configs/navigation";
-import { useContext, useEffect, useState } from "react";
+import { type ColorScheme, ThemeContext } from "@/context/theme/ThemeProvider.tsx";
 
 import HopperLogo from "./assets/hopper-logo.svg";
 import "./header.css";
-import { type ColorScheme, ThemeContext } from "@/context/theme/ThemeProvider.tsx";
-import { useIsMobile } from "@/hooks/useIsMobile";
+
+const designSystemLinks = [
+    {
+        title: "Orbit",
+        url: "https://orbit.sharegate.design/?path=/docs/installation--page"
+    },
+    {
+        title: "Orbiter",
+        url: "https://wl-orbiter-website.netlify.app/?path=/docs/installation--page"
+    },
+    {
+        title: "Igloo",
+        url: "https://igloo.officevibe.design"
+    }
+];
+
+const ToggleTrigger = ({ children }: { children: ReactNode }) => {
+    const triggerRef = useRef(null);
+    const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+
+    return (
+        <SlotProvider values={[
+            [PopoverContext, {
+                isOpen: isPopoverOpen,
+                onOpenChange: setIsPopoverOpen,
+                placement: "bottom start",
+                offset: 20
+            }],
+            [ToggleButtonContext, {
+                onPress: () => setIsPopoverOpen(!isPopoverOpen),
+                ref: triggerRef,
+                isSelected: isPopoverOpen
+            }]
+        ]}
+        >
+            {children}
+        </SlotProvider>
+    );
+};
+
+const ProductMenuAndBrand = () => {
+    return (
+        <span className="hd-product">
+            <ToggleTrigger>
+                <PopoverTrigger>
+                    <ToggleButton>
+                        <Icon slot="icon" src={ProductMenuIcon} />
+                    </ToggleButton>
+                    <Popover
+                        className="hd-product__menu"
+                        aria-label="product menu link"
+                    >
+                        <span className="hd-product__title">Frontend tools</span>
+                        <Link className="hd-product__link"
+                            href="https://gsoft-inc.github.io/wl-idp-docs-hub/"
+                        >IDP hub</Link>
+                        <ul className="hd-product__items">
+                            <span className="hd-product__title">Design System</span>
+                            {designSystemLinks.map(link => (
+                                <li className="hd-product__item" key={link.title}>
+                                    <Link className="hd-product__link" href={link.url}>{link.title}</Link>
+                                </li>
+                            ))}
+                        </ul>
+                    </Popover>
+                    <Link href="/" className="hd-brand" aria-label="Hopper Brand">
+                        <HopperLogo />
+                    </Link>
+                </PopoverTrigger>
+            </ToggleTrigger>
+        </span>
+    );
+};
 
 const Header = () => {
     const { colorMode, setColorMode } = useContext(ThemeContext);
@@ -52,9 +129,7 @@ const Header = () => {
             <header className="hd-header">
                 <Wrapper className="hd-flex">
                     <div className="hd-header__nav">
-                        <Link href="/" className="hd-brand" aria-label="Hopper Brand">
-                            <HopperLogo />
-                        </Link>
+                        <ProductMenuAndBrand />
                         <Nav items={navigation} />
                     </div>
                     <div className="hd-header__quick-actions">

diff --git a/apps/docs/app/ui/layout/header/header.css b/apps/docs/app/ui/layout/header/header.css
@@ -21,6 +21,63 @@
     --hd-header-shadow-3-top-position: -19.5rem;
 }
 
+.hd-product {
+    display: flex;
+    align-items: center;
+    gap: var(--hd-space-1);
+}
+
+.hd-product__menu {
+    width: 11.5rem;
+    box-sizing: border-box;
+}
+
+.hd-product__menu [role="dialog"] {
+    padding-inline: var(--hd-space-2);
+    padding-block: var(--hd-space-3);
+    border-color: transparent;
+}
+
+.hd-product__menu [role="dialog"]:focus-visible {
+    outline: 0;
+    box-shadow: var(--hd-focus-ring);
+    border-radius: var(--hd-space-05);
+}
+
+.hd-product__items {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    list-style: none;
+    margin-top: var(--hd-space-2);
+}
+
+.hd-product__title {
+    font-size: 0.75rem;
+    text-transform: uppercase;
+    color: var(--hd-color-neutral-text-weakest);
+}
+
+.hd-product__title + .hd-product__link {
+    margin-top: var(--hd-space-1);
+}
+
+.hd-product__link {
+    display: block;
+    padding: var(--hd-space-1) var(--hd-space-1);
+    border-radius: var(--hd-border-radius-sm);
+    background-color: var(--hd-color-neutral-surface);
+}
+
+.hd-product__link:hover {
+    background-color: var(--hd-color-neutral-surface-weak);
+}
+
+.hd-product__link:focus-visible {
+    outline: 0;
+    box-shadow: var(--hd-focus-ring);
+}
+
 .hd-header {
     display: flex;
     align-items: center;

diff --git a/apps/docs/components/icon/assets/product-menu.svg b/apps/docs/components/icon/assets/product-menu.svg
diff --git a/apps/docs/components/icon/index.tsx b/apps/docs/components/icon/index.tsx
@@ -20,6 +20,7 @@ import ErrorIcon from "./assets/error.svg";
 import InfoIcon from "./assets/info.svg";
 import MessageIcon from "./assets/message.svg";
 import WarningIcon from "./assets/warning.svg";
+import ProductMenuIcon from "./assets/product-menu.svg";
 
 import Icon, { type IconProps } from "./Icon.tsx";
 
@@ -46,6 +47,7 @@ export {
     InfoIcon,
     MessageIcon,
     WarningIcon,
+    ProductMenuIcon,
     Icon,
     IconProps
 };
diff --git a/apps/docs/components/popover/popover.css b/apps/docs/components/popover/popover.css
@@ -8,3 +8,9 @@
     box-shadow: var(--hd-popover-shadow);
     outline: none;
 }
+
+.hd-popover:focus-visible {
+    outline: 0;
+    box-shadow: var(--hd-focus-ring);
+    border-radius: var(--hd-space-05);
+}
diff --git a/apps/docs/hooks/useIsMobile.ts b/apps/docs/hooks/useIsMobile.ts
@@ -7,7 +7,7 @@ export function useIsMobile(maxWidth: string) {
         const maxWidthInPixels = parseFloat(maxWidth) * 16;
 
         const checkIsMobile = () => {
-            setIsMobile(window.innerWidth <= maxWidthInPixels);
+            setIsMobile(window.innerWidth < maxWidthInPixels);
         };
 
         checkIsMobile();