CommunityRule/community-rule
2
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Large header breakpoint

Browse Source
This commit is contained in:
adilallo
2025-08-02 14:34:22 -06:00
parent 47f023befa
commit 4a1aa02a28
7 changed files with 100 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/Header.js
+60 -9
View File
@@ -8,7 +8,7 @@ import Avatar from "./Avatar";
export default function Header() {
return (
<header className="bg-[var(--color-surface-default-primary)] w-full border-b border-[var(--border-color-default-tertiary)]">
<div className="flex items-center justify-between mx-auto max-w-[1920px] h-[40px] px-[var(--spacing-measures-spacing-016)] py-[var(--spacing-measures-spacing-008)] lg:px-[var(--spacing-measures-spacing-120,120px)] lg:py-[var(--spacing-measures-spacing-016,16px)]">
<div className="flex items-center justify-between mx-auto max-w-[1920px] h-[40px] lg:h-[84px] px-[var(--spacing-measures-spacing-016)] py-[var(--spacing-measures-spacing-008)] lg:px-[var(--spacing-measures-spacing-64,64px)] lg:py-[var(--spacing-measures-spacing-016,16px)]">
<div>
<div className="block sm:hidden">
<Logo size="header" showText={false} />
@@ -16,9 +16,12 @@ export default function Header() {
<div className="hidden sm:block md:hidden">
<Logo size="header" showText={true} />
</div>
<div className="hidden md:block">
<div className="hidden md:block lg:hidden">
<Logo size="headerMd" showText={true} />
</div>
<div className="hidden lg:block">
<Logo size="headerLg" showText={true} />
</div>
</div>
<div className="flex items-center">
@@ -43,7 +46,7 @@ export default function Header() {
</MenuBar>
</div>
<div className="hidden md:block absolute left-1/2 transform -translate-x-1/2 ml-[var(--spacing-scale-024)]">
<div className="hidden md:block lg:hidden absolute left-1/2 transform -translate-x-1/2 ml-[var(--spacing-scale-024)]">
<MenuBar className="gap-[var(--spacing-scale-001)]">
<MenuBarItem
href="#"
@@ -61,30 +64,78 @@ export default function Header() {
</MenuBar>
</div>
<div className="hidden md:flex items-center">
<div className="hidden lg:block absolute left-1/2 transform -translate-x-1/2 -ml-[var(--spacing-scale-024)]">
<MenuBar size="large">
<MenuBarItem
href="#"
size="large"
className="px-[var(--spacing-scale-002)] py-[var(--spacing-scale-002)]"
>
Use cases
</MenuBarItem>
<MenuBarItem href="#" size="large">
Learn
</MenuBarItem>
<MenuBarItem href="#" size="large">
About
</MenuBarItem>
</MenuBar>
</div>
<div className="hidden md:block lg:hidden">
<MenuBarItem
href="#"
size="xsmall"
className="mr-[var(--spacing-scale-006)]"
className="mr-[var(--spacing-scale-010)]"
>
Log in
</MenuBarItem>
<Button size="xsmall">
<AvatarContainer size="small">
<AvatarContainer size="medium">
<Avatar
src="/assets/Avatar_1.png"
alt="Avatar 1"
size="small"
size="medium"
/>
<Avatar
src="/assets/Avatar_2.png"
alt="Avatar 2"
size="small"
size="medium"
/>
<Avatar
src="/assets/Avatar_3.png"
alt="Avatar 3"
size="small"
size="medium"
/>
</AvatarContainer>
<span>Create rule</span>
</Button>
</div>
<div className="hidden lg:flex items-center">
<MenuBarItem
href="#"
size="large"
className="mr-[var(--spacing-scale-012)]"
>
Log in
</MenuBarItem>
<Button size="large">
<AvatarContainer size="xlarge">
<Avatar
src="/assets/Avatar_1.png"
alt="Avatar 1"
size="xlarge"
/>
<Avatar
src="/assets/Avatar_2.png"
alt="Avatar 2"
size="xlarge"
/>
<Avatar
src="/assets/Avatar_3.png"
alt="Avatar 3"
size="xlarge"
/>
</AvatarContainer>
<span>Create rule</span>