sendnrw/netbird-docs
2
0
Fork 0
mirror of https://github.com/netbirdio/docs.git synced 2026-09-09 00:21:26 +02:00
Code Issues Packages Projects Releases Wiki Activity

Style Consistency Changes and Element Improvements (#541)

Browse Source 
Co-authored-by: braginini <bangvalo@gmail.com>
This commit is contained in:
Brandon Hopkins
2026-01-11 00:27:56 -08:00
committed by GitHub
parent aef978f63d
commit becf4bd6e4
30 changed files with 645 additions and 283 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
src/components/Header.jsx
View File

@@ -1,7 +1,7 @@
import { forwardRef } from 'react'
import Link from 'next/link'
import clsx from 'clsx'
import { motion, useScroll, useTransform } from 'framer-motion'
import { motion } from 'framer-motion'
import { Button } from '@/components/Button'
import { Logo } from '@/components/Logo'
@@ -16,10 +16,10 @@ import { useAnnouncements } from '@/components/announcement-banner/AnnouncementB
function TopLevelNavItem({ href, children }) {
return (
<li>
<li className="block text-[12px] lg:text-[13.5px] m-0 p-0 leading-none">
<Link
href={href}
className="text-sm leading-5 text-zinc-600 transition hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white"
className="px-2 lg:px-3 py-1 lg:py-2 opacity-60 hover:opacity-100 hover:bg-zinc-900/5 dark:hover:bg-neutral-900/60 hover:border-zinc-900/10 dark:hover:border-neutral-800 border border-transparent rounded-md leading-none transition-all duration-200 text-zinc-900 dark:text-white inline-flex items-center"
>
{children}
</Link>
@@ -32,45 +32,37 @@ export const Header = forwardRef(function Header({ className }, ref) {
let isInsideMobileNavigation = useIsInsideMobileNavigation()
let { bannerHeight } = useAnnouncements()
let { scrollY } = useScroll()
let bgOpacityLight = useTransform(scrollY, [0, 72], [0.5, 0.9])
let bgOpacityDark = useTransform(scrollY, [0, 72], [0.2, 0.8])
return (
<motion.div
ref={ref}
className={clsx(
className,
'fixed inset-x-0 top-0 z-40 flex h-14 items-center justify-between gap-12 px-4 transition sm:px-6 lg:left-72 lg:z-30 lg:px-8 xl:left-80',
!isInsideMobileNavigation &&
'backdrop-blur-sm dark:backdrop-blur lg:left-72 xl:left-80',
isInsideMobileNavigation
? 'bg-white dark:bg-zinc-900'
: 'bg-white/[var(--bg-opacity-light)] dark:bg-zinc-900/[var(--bg-opacity-dark)]'
)}
className={clsx(
className,
'fixed inset-x-0 top-0 z-40 flex items-center justify-between gap-3 px-5 transition h-[64px] lg:left-72 lg:z-50 lg:px-8 xl:left-80 min-h-[64px] lg:pointer-events-auto',
!isInsideMobileNavigation &&
'backdrop-blur-lg bg-white/70 dark:bg-[#181A1D]/95 lg:left-72 xl:left-80',
isInsideMobileNavigation &&
'bg-white/70 dark:bg-[#181A1D]/95 backdrop-blur-lg'
)}
style={{
'--bg-opacity-light': bgOpacityLight,
'--bg-opacity-dark': bgOpacityDark,
top: bannerHeight,
}}
>
<div
className={clsx(
'absolute inset-x-0 top-full h-px transition',
(isInsideMobileNavigation || !mobileNavIsOpen) &&
'bg-zinc-900/7.5 dark:bg-white/7.5'
'absolute inset-x-0 top-full h-px transition border-b border-transparent',
!isInsideMobileNavigation && 'border-zinc-900/10 dark:border-neutral-700/50'
)}
/>
<Search />
<div className="flex items-center gap-5 lg:hidden">
<div className="flex items-center gap-2 lg:hidden">
<MobileNavigation />
<Link href="/" aria-label="Home">
<Logo className="h-6" />
</Link>
</div>
<div className="flex items-center gap-5">
<div className="flex items-center gap-3 xl:gap-2">
<nav className="hidden md:block">
<ul role="list" className="flex items-center gap-8">
<ul role="list" className="flex items-center gap-3 xl:gap-2 m-0 p-0 list-none">
<TopLevelNavItem href="https://netbird.io/">Home</TopLevelNavItem>
<TopLevelNavItem href="/">Docs</TopLevelNavItem>
<TopLevelNavItem href="/api">API</TopLevelNavItem>
@@ -79,8 +71,8 @@ export const Header = forwardRef(function Header({ className }, ref) {
<TopLevelNavItem href="/slack-url">Support</TopLevelNavItem>
</ul>
</nav>
<div className="hidden md:block md:h-5 md:w-px md:bg-zinc-900/10 md:dark:bg-white/15" />
<div className="flex gap-4">
<div className="hidden md:block md:h-5 md:w-px md:bg-zinc-900/10 md:dark:bg-neutral-500/20" />
<div className="flex gap-2">
<MobileSearch />
<ModeToggle />
</div>