aragrp/docs/design-system/navbar.md at main

ar.badiei/aragrp

Fork 0

Files

T

ar.badieiandCursor c2376b3b9e

Build & Push Docker Image / build (push) Has been cancelled

Details

feat: redesign landing page with brand system and section blocks

Refresh the homepage around new hero/services/roadmap sections, shared design tokens, and updated brand assets.

Co-authored-by: Cursor <cursoragent@cursor.com>

2026-07-23 17:00:55 +03:30

3.1 KiB

Raw Permalink Blame History

Canonical header: HeroHeader in components/header.tsx.

Do not create a second site header. Extend the existing component when navigation changes.

Structure

Fixed to the top (fixed inset-x-0 top-0 z-50).
Content constrained with <Container>.
Safe area: pt-[env(safe-area-inset-top,0px)].
RTL reading order: Logo → primary links → utilities (English, theme, CTA, menu).

Heights

State	Height
Default (top)	`h-14` mobile / `h-16` desktop
Scrolled glass	`h-12`

Logo scales slightly on scroll (scale-[0.97]).

States

Default (scrollY ≤ 24px)

Transparent background, no border, no blur.
Full height bar flush with top (mt-0).

Sticky / scrolled (scrollY > 24px)

Threshold: SCROLL_THRESHOLD = 24.

Same vertical position as default — no top margin / vertical shift of chrome.
Glass: bg-background/75 (or /65 when backdrop-filter supported).
Blur: backdrop-blur-xl backdrop-saturate-150.
Border: border-border/50.
Shadow: shadow-sm.
Radius: rounded-2xl.
Width: identical to unscrolled — never a narrower/wider max-width.
Horizontal inset only: px-4 md:px-6 so logo / nav / CTA move inward and the glass rim shows.

Transition: duration-300 ease-out across padding, background, border, shadow, backdrop-filter, radius.

Desktop (≥ xl)

Horizontal NavigationMenu with underline affordance on links.
Dropdown panels: rounded-xl, bg-popover/95, backdrop-blur-xl, shadow-md.
Primary CTA: Button size="sm".
English link + ThemeToggle visible.

Tablet / mobile (< xl)

Hamburger Button variant="ghost" size="icon".
Sheet from the right (side="right"), width min(100%, 20rem).
Sheet glass: bg-background/95 backdrop-blur-xl shadow-xl.
Accordion for grouped links (e.g. خدمات).
Staggered enter animation (header-nav-in, ~320ms) — disabled under prefers-reduced-motion.

Padding & alignment

Always inside site Container (layout.container: max-w-[76.8rem] + px-6).
Top of page: inner padding px-0 — logo and CTA align with section content edges.
Scrolled: glass fills the container; inner padding px-4 md:px-6 insets chrome toward the center so the glass rim shows.
Do not use a different max-w-* for the sticky state.
Nav link padding ≈ px-2 py-1.5; mobile rows px-3 py-2.5.
Keep CTA and icon buttons on the trailing side; do not center-float disconnected controls.

Accessibility

nav has aria-label="ناوبری اصلی".
Mobile toggle: aria-expanded, aria-controls="mobile-nav", aria-label.
Sheet title available to SR (sr-only).
Active routes reflected visually (underline / foreground) without relying on color alone when possible.

Forbidden

Second fixed header on inner pages.
Opaque solid bar that ignores glass tokens when scrolled.
Breaking out of Container alignment (e.g. max-w-[68rem] or max-w-[90rem] shells).
Animating layout width with JS reflow—use transform/opacity/height transitions already defined.

3.1 KiB Raw Permalink Blame History

Navbar