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

Restore the folder header to Figma layout without cloning the nav, and page-center inner-page links with the home cluster.

Browse Source 
Park the skip link in the Tailwind sheet so it cannot sit in document flow and push the yellow tab down.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
adilallo
2026-09-09 21:39:39 -06:00
co-authored by Cursor
parent b42716c262
commit 4bd9fa6dc6
7 changed files with 110 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/navigation/Top/Top.container.tsx
+25 -6
View File
@@ -1,7 +1,8 @@
"use client";
/**
* Figma: "Navigation / Top" (22078-808559)
* Figma: "Navigation / Top" (22078-808559); Folder-top 430–639 (18582:22056),
* 640–1023 (18580:17113).
*/
import { memo, useCallback } from "react";
@@ -39,6 +40,9 @@ const FOLDER_NAV_ITEM_RESPONSIVE_CLASS =
const CREATE_RULE_RESPONSIVE_CLASS =
"lg:p-[var(--spacing-scale-012)] lg:gap-[var(--spacing-scale-006)] lg:text-medium-label xl:p-[var(--spacing-scale-016)] xl:gap-[var(--spacing-scale-008)] xl:text-x-large-label";
const FOLDER_CREATE_RULE_RESPONSIVE_CLASS =
"md:p-[var(--spacing-scale-008)] md:gap-[var(--spacing-scale-002)] md:text-x-small-label lg:p-[var(--spacing-scale-012)] lg:gap-[var(--spacing-scale-006)] lg:text-medium-label xl:p-[var(--spacing-scale-016)] xl:gap-[var(--spacing-scale-008)] xl:text-x-large-label";
const TopContainer = memo<TopProps>(
({ folderTop = false, loggedIn = false, profile = false, logIn = true }) => {
const pathname = usePathname();
@@ -120,6 +124,9 @@ const TopContainer = memo<TopProps>(
const navSelected =
(loggedIn && pathname === "/profile") ||
(!loggedIn && pathname === "/login");
const loginClassName = folderTop
? FOLDER_NAV_ITEM_RESPONSIVE_CLASS
: NAV_ITEM_RESPONSIVE_CLASS;
if (loggedIn) {
return (
@@ -128,7 +135,7 @@ const TopContainer = memo<TopProps>(
size="X Small"
mode="default"
state={navSelected ? "selected" : "default"}
className={NAV_ITEM_RESPONSIVE_CLASS}
className={loginClassName}
ariaLabel={ariaLabel}
>
{label}
@@ -149,7 +156,7 @@ const TopContainer = memo<TopProps>(
size="X Small"
mode="default"
state={navSelected ? "selected" : "default"}
className={NAV_ITEM_RESPONSIVE_CLASS}
className={loginClassName}
ariaLabel={ariaLabel}
>
{label}
@@ -165,11 +172,19 @@ const TopContainer = memo<TopProps>(
palette="inverse"
onClick={handleCreateRuleClick}
ariaLabel={t("ariaLabels.createNewRule")}
className={CREATE_RULE_RESPONSIVE_CLASS}
className={
folderTop
? FOLDER_CREATE_RULE_RESPONSIVE_CLASS
: CREATE_RULE_RESPONSIVE_CLASS
}
>
<AvatarContainer
size="small"
className="lg:-space-x-[var(--spacing-scale-010)] xl:-space-x-[13px]"
className={
folderTop
? "md:-space-x-[9px] lg:-space-x-[var(--spacing-scale-010)] xl:-space-x-[13px]"
: "lg:-space-x-[var(--spacing-scale-010)] xl:-space-x-[13px]"
}
>
{avatarImageSources.map((src, index) => (
<Avatar
@@ -177,7 +192,11 @@ const TopContainer = memo<TopProps>(
src={src}
alt={tTopNav(`avatarAlts.${3 - index}`)}
size="small"
className="lg:h-[var(--spacing-scale-024)] lg:w-[var(--spacing-scale-024)] xl:h-[var(--spacing-scale-032)] xl:w-[var(--spacing-scale-032)]"
className={
folderTop
? "md:h-[var(--spacing-scale-018)] md:w-[var(--spacing-scale-018)] lg:h-[var(--spacing-scale-024)] lg:w-[var(--spacing-scale-024)] xl:h-[var(--spacing-scale-032)] xl:w-[var(--spacing-scale-032)]"
: "lg:h-[var(--spacing-scale-024)] lg:w-[var(--spacing-scale-024)] xl:h-[var(--spacing-scale-032)] xl:w-[var(--spacing-scale-032)]"
}
/>
))}
</AvatarContainer>