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

Header #3

Merged
an.di merged 16 commits from adilallo/Header into main 2025-08-07 22:58:34 +00:00
Conversation 0 Commits 16 Files Changed 26
+70 -28
6 changed files with 70 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 6d2e045af6 - Show all commits
app/components/Button.js
+1 -1
View File
@@ -27,7 +27,7 @@ export default function Button({
xsmall:
"font-['Inter'] text-[10px] leading-[12px] font-medium tracking-[0%]",
small:
"font-['Inter'] text-[10px] leading-[12.5px] font-medium tracking-[0%]",
"font-['Inter'] text-[12px] leading-[14px] font-medium tracking-[0%]",
large:
"font-['Inter'] text-[16px] leading-[20px] font-medium tracking-[0%]",
xlarge:
app/components/HeaderTab.js
+2 -2
View File
@@ -1,7 +1,7 @@
export default function HeaderTab({ children, className = "", ...props }) {
return (
<div
className={`relative bg-[var(--color-surface-default-brand-primary)] rounded-t-[16px] sm:rounded-t-[24px] pl-[var(--spacing-measures-spacing-012)] h-[40px] sm:h-[52px] sm:pr-[var(--spacing-scale-006)] ${className}`}
className={`relative bg-[var(--color-surface-default-brand-primary)] rounded-t-[16px] sm:rounded-t-[24px] md:rounded-t-[24px] pl-[var(--spacing-measures-spacing-012)] h-[40px] sm:h-[52px] md:h-[52px] sm:pr-[var(--spacing-scale-006)] md:pl-[var(--spacing-scale-024)] md:pr-[var(--spacing-scale-012)] md:gap-[var(--spacing-scale-032)] ${className}`}
{...props}
>
{children}
@@ -13,7 +13,7 @@ export default function HeaderTab({ children, className = "", ...props }) {
<img
src="/assets/Union_sm_md_lg.svg"
alt="Union"
className="absolute -bottom-[3px] -right-[55px] w-[61px] h-[24px] sm:w-[61px] sm:h-[31.5px] hidden sm:block"
className="absolute -bottom-[2.5px] -right-[55px] w-[61px] h-[24px] sm:w-[61px] sm:h-[31.5px] hidden sm:block"
/>
</div>
);
app/components/HomeHeader.js
+30 -18
View File
@@ -32,7 +32,7 @@ export default function HomeHeader() {
},
{
breakpoint: "hidden md:block lg:hidden",
size: "headerMd",
size: "homeHeaderMd",
showText: true,
},
{
@@ -48,8 +48,25 @@ export default function HomeHeader() {
<MenuBarItem
key={index}
href={item.href}
size={item.extraPadding && size === "xsmall" ? "xsmallUseCases" : size}
variant={size === "xsmall" ? "home" : "default"}
size={
item.extraPadding &&
(size === "xsmall" ||
size === "default" ||
size === "home" ||
size === "homeMd")
? size === "home" || size === "homeMd"
? "homeMd"
: "xsmallUseCases"
: size
}
variant={
size === "xsmall" ||
size === "default" ||
size === "home" ||
size === "homeMd"
? "home"
: "default"
}
>
{item.text}
</MenuBarItem>
@@ -76,7 +93,7 @@ export default function HomeHeader() {
<MenuBarItem
href="#"
size={size}
variant={size === "xsmall" ? "home" : "default"}
variant={size === "xsmall" || size === "default" ? "home" : "default"}
className={marginRight}
>
Log in
@@ -104,7 +121,7 @@ export default function HomeHeader() {
return (
<header className="w-full bg-transparent overflow-hidden">
<div className="relative flex items-center justify-between mx-auto max-w-[1920px] h-[50px] sm:h-[62px] lg:h-[84px] xl:h-[88px] px-[var(--spacing-scale-008)] pr-[var(--spacing-scale-016)] pt-[var(--spacing-scale-010)] sm:px-[var(--spacing-scale-010)] sm:pr-[var(--spacing-scale-020)] sm:pt-[var(--spacing-scale-010)] lg:px-[var(--spacing-measures-spacing-64,64px)] lg:py-[var(--spacing-measures-spacing-016,16px)]">
<div className="relative flex items-center justify-between mx-auto max-w-[1920px] h-[50px] sm:h-[62px] md:h-[68px] lg:h-[84px] xl:h-[88px] px-[var(--spacing-scale-008)] pr-[var(--spacing-scale-016)] pt-[var(--spacing-scale-010)] sm:px-[var(--spacing-scale-010)] sm:pr-[var(--spacing-scale-020)] sm:pt-[var(--spacing-scale-010)] md:px-[var(--spacing-scale-016)] md:pr-[var(--spacing-scale-032)] md:pt-[var(--spacing-scale-016)] lg:px-[var(--spacing-measures-spacing-64,64px)] lg:py-[var(--spacing-measures-spacing-016,16px)]">
<HeaderTab className="flex items-center self-end">
<div>
{logoConfig.map((config, index) => (
@@ -116,23 +133,21 @@ export default function HomeHeader() {
<div className="flex items-center">
<div className="block sm:hidden -me-[2px]">
<MenuBar size="xsmall">
<MenuBar size="default">
{renderNavigationItems("xsmall")}
{renderLoginButton("xsmall")}
</MenuBar>
</div>
<div className="hidden sm:block md:hidden sm:ml-[var(--spacing-scale-002)]">
<MenuBar size="xsmall">
<MenuBar size="default">
{renderNavigationItems("xsmall")}
{renderLoginButton("xsmall")}
</MenuBar>
</div>
<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)]">
{renderNavigationItems("xsmall")}
</MenuBar>
<div className="hidden md:block lg:hidden md:-ml-[var(--spacing-scale-012)]">
<MenuBar size="medium">{renderNavigationItems("homeMd")}</MenuBar>
</div>
<div className="hidden lg:block xl:hidden absolute left-1/2 transform -translate-x-1/2 -ml-[var(--spacing-scale-024)]">
@@ -143,12 +158,6 @@ export default function HomeHeader() {
<MenuBar size="large">{renderNavigationItems("xlarge")}</MenuBar>
</div>
<div className="hidden md:block lg:hidden absolute right-[var(--spacing-measures-spacing-016)]">
<div className="flex items-center">
{renderLoginButton("xsmall", "mr-[var(--spacing-scale-010)]")}
</div>
</div>
<div className="hidden lg:flex xl:hidden items-center">
{renderLoginButton("large", "mr-[var(--spacing-scale-012)]")}
</div>
@@ -164,7 +173,10 @@ export default function HomeHeader() {
{renderCreateRuleButton("xsmall", "small", "small")}
</div>
<div className="hidden md:block lg:hidden absolute right-[var(--spacing-measures-spacing-016)]">
{renderCreateRuleButton("xsmall", "medium", "medium")}
<div className="flex items-center">
{renderLoginButton("homeMd", "mr-[var(--spacing-scale-010)]")}
{renderCreateRuleButton("small", "medium", "medium")}
</div>
</div>
<div className="hidden lg:flex xl:hidden items-center">
{renderCreateRuleButton("large", "xlarge", "xlarge")}
app/components/Logo.js
+15 -2
View File
@@ -22,6 +22,13 @@ export default function Logo({ size = "default", showText = true }) {
lineHeight: "leading-[14.39px]",
iconSize: "w-[14.39px] h-[14.39px]",
},
homeHeaderMd: {
containerHeight: "h-[32.24px]",
gap: "gap-[4.89px]",
textSize: "text-[17.89px]",
lineHeight: "leading-[22.02px]",
iconSize: "w-[22.02px] h-[22.02px]",
},
header: {
containerHeight: "h-[20.85px]",
gap: "gap-[4.21px]",
@@ -71,6 +78,8 @@ export default function Logo({ size = "default", showText = true }) {
? sizes.homeHeaderXsmall
: size === "homeHeaderSm"
? sizes.homeHeaderSm
: size === "homeHeaderMd"
? sizes.homeHeaderMd
: size === "header"
? sizes.header
: size === "headerMd"
@@ -95,7 +104,9 @@ export default function Logo({ size = "default", showText = true }) {
{showText && (
<div
className={`font-['Bricolage_Grotesque'] ${
size === "homeHeaderXsmall" || size === "homeHeaderSm"
size === "homeHeaderXsmall" ||
size === "homeHeaderSm" ||
size === "homeHeaderMd"
? "text-[var(--color-content-inverse-primary)]"
: "text-[var(--color-content-default-primary)]"
} ${config.textSize} ${config.lineHeight} font-normal tracking-[0px]`}
@@ -111,7 +122,9 @@ export default function Logo({ size = "default", showText = true }) {
width={27.05}
height={27.05}
className={`flex-shrink-0 ${config.iconSize} ${
size === "homeHeaderXsmall" || size === "homeHeaderSm"
size === "homeHeaderXsmall" ||
size === "homeHeaderSm" ||
size === "homeHeaderMd"
? "filter brightness-0"
: ""
}`}
app/components/MenuBar.js
+2
View File
@@ -9,6 +9,8 @@ export default function MenuBar({
"px-[var(--spacing-scale-004)] py-[var(--spacing-scale-004)] gap-[var(--spacing-scale-001)] rounded-[4px]",
default:
"px-[var(--spacing-scale-004)] py-[var(--spacing-scale-004)] gap-[var(--spacing-scale-001)]",
medium:
"px-[var(--spacing-scale-004)] py-[var(--spacing-scale-004)] gap-[var(--spacing-scale-004)]",
large:
"px-[var(--spacing-scale-004)] py-[var(--spacing-scale-004)] gap-[var(--spacing-scale-012)]",
};
app/components/MenuBarItem.js
+20 -5
View File
@@ -15,13 +15,15 @@ export default function MenuBarItem({
const activeOutlineStyles = {
xsmall:
"active:outline-1 active:outline-[var(--color-content-default-primary)] active:outline-offset-1",
"active:outline-1 active:outline-[var(--color-content-default-primary)]",
default:
"active:outline-1 active:outline-[var(--color-content-default-brand-primary)] active:outline-offset-1",
"active:outline-1 active:outline-[var(--color-content-default-brand-primary)]",
homeMd:
"active:outline-[1.5px] active:outline-[var(--color-content-default-brand-primary)]",
large:
"active:outline-[1.75px] active:outline-[var(--color-content-default-brand-primary)] active:outline-offset-1",
"active:outline-[1.75px] active:outline-[var(--color-content-default-brand-primary)]",
xlarge:
"active:outline-2 active:outline-[var(--color-content-default-brand-primary)] active:outline-offset-1",
"active:outline-2 active:outline-[var(--color-content-default-brand-primary)]",
};
const homeOutlineStyles = {
@@ -30,7 +32,11 @@ export default function MenuBarItem({
xsmallUseCases:
"active:outline-1 active:outline-[var(--color-content-default-primary)]",
default:
"active:outline-1 active:outline-[var(--color-content-default-primary)]",
"active:outline-[1.5px] active:outline-[var(--color-content-default-primary)]",
homeMd:
"active:outline-[1.5px] active:outline-[var(--color-content-default-primary)]",
homeUseCases:
"active:outline-[1.5px] active:outline-[var(--color-content-default-primary)]",
large:
"active:outline-[1.75px] active:outline-[var(--color-content-default-primary)]",
xlarge:
@@ -44,6 +50,10 @@ export default function MenuBarItem({
"px-[var(--spacing-scale-004)] py-[var(--spacing-scale-002)] gap-[var(--spacing-scale-004)]",
xsmallUseCases:
"px-[var(--spacing-scale-002)] py-[var(--spacing-scale-002)] gap-[var(--spacing-scale-004)]",
homeMd:
"px-[var(--spacing-scale-008)] py-[var(--spacing-scale-008)] gap-[var(--spacing-scale-004)]",
homeUseCases:
"px-[var(--spacing-scale-002)] py-[var(--spacing-scale-008)] gap-[var(--spacing-scale-004)]",
large:
"px-[var(--spacing-scale-012)] py-[var(--spacing-scale-012)] gap-[var(--spacing-scale-004)]",
xlarge:
@@ -52,6 +62,8 @@ export default function MenuBarItem({
const smallTextStyle =
"font-['Inter'] text-[10px] leading-[12px] font-medium tracking-[0%]";
const mediumTextStyle =
"font-['Inter'] text-[12px] leading-[14px] font-medium tracking-[0%]";
const largeTextStyle =
"font-['Inter'] text-[16px] leading-[20px] font-medium tracking-[0%]";
const xlargeTextStyle =
@@ -61,6 +73,9 @@ export default function MenuBarItem({
default: smallTextStyle,
xsmall: smallTextStyle,
xsmallUseCases: smallTextStyle,
home: smallTextStyle,
homeMd: mediumTextStyle,
homeUseCases: mediumTextStyle,
large: largeTextStyle,
xlarge: xlargeTextStyle,
};