diff --git a/apps/docs/app/ui/layout/header/Header.tsx b/apps/docs/app/ui/layout/header/Header.tsx index 22e4e7350..bc8d1a542 100644 --- 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 ( + setIsPopoverOpen(!isPopoverOpen), + ref: triggerRef, + isSelected: isPopoverOpen + }] + ]} + > + {children} + + ); +}; + +const ProductMenuAndBrand = () => { + return ( + + + + + + + + Frontend tools + IDP hub +
    + Design System + {designSystemLinks.map(link => ( +
  • + {link.title} +
    • + ))} +
+ + + + + + + + ); +}; const Header = () => { const { colorMode, setColorMode } = useContext(ThemeContext); @@ -52,9 +129,7 @@ const Header = () => {
- - - +
diff --git a/apps/docs/app/ui/layout/header/header.css b/apps/docs/app/ui/layout/header/header.css index 4f9b27122..57d55f93e 100644 --- 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 new file mode 100644 index 000000000..e052004e7 --- /dev/null +++ b/apps/docs/components/icon/assets/product-menu.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/apps/docs/components/icon/index.tsx b/apps/docs/components/icon/index.tsx index b1f1e6f0a..5346d15e9 100644 --- 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 index 9b308b4ec..bdc240dd9 100644 --- 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 index 977e5b076..99a558b85 100644 --- 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();