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

Medium home header

Browse Source
This commit is contained in:
adilallo
2025-08-06 14:50:11 -06:00
parent bc731e2431
commit 6d2e045af6
6 changed files with 70 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/Button.js
+1 -1
View File
@@ -27,7 +27,7 @@ export default function Button({
xsmall: xsmall:
"font-['Inter'] text-[10px] leading-[12px] font-medium tracking-[0%]", "font-['Inter'] text-[10px] leading-[12px] font-medium tracking-[0%]",
small: small:
"font-['Inter'] text-[10px] leading-[12.5px] font-medium tracking-[0%]", "font-['Inter'] text-[12px] leading-[14px] font-medium tracking-[0%]",
large: large:
"font-['Inter'] text-[16px] leading-[20px] font-medium tracking-[0%]", "font-['Inter'] text-[16px] leading-[20px] font-medium tracking-[0%]",
xlarge: xlarge:
app/components/HeaderTab.js
+2 -2
View File
@@ -1,7 +1,7 @@
export default function HeaderTab({ children, className = "", ...props }) { export default function HeaderTab({ children, className = "", ...props }) {
return ( return (
<div <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} {...props}
> >
{children} {children}
@@ -13,7 +13,7 @@ export default function HeaderTab({ children, className = "", ...props }) {
<img <img
src="/assets/Union_sm_md_lg.svg" src="/assets/Union_sm_md_lg.svg"
alt="Union" 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> </div>
); );
app/components/HomeHeader.js
+30 -18
View File
@@ -32,7 +32,7 @@ export default function HomeHeader() {
}, },
{ {
breakpoint: "hidden md:block lg:hidden", breakpoint: "hidden md:block lg:hidden",
size: "headerMd", size: "homeHeaderMd",
showText: true, showText: true,
}, },
{ {
@@ -48,8 +48,25 @@ export default function HomeHeader() {
<MenuBarItem <MenuBarItem
key={index} key={index}
href={item.href} href={item.href}
size={item.extraPadding && size === "xsmall" ? "xsmallUseCases" : size} size={
variant={size === "xsmall" ? "home" : "default"} 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} {item.text}
</MenuBarItem> </MenuBarItem>
@@ -76,7 +93,7 @@ export default function HomeHeader() {
<MenuBarItem <MenuBarItem
href="#" href="#"
size={size} size={size}
variant={size === "xsmall" ? "home" : "default"} variant={size === "xsmall" || size === "default" ? "home" : "default"}
className={marginRight} className={marginRight}
> >
Log in Log in
@@ -104,7 +121,7 @@ export default function HomeHeader() {
return ( return (
<header className="w-full bg-transparent overflow-hidden"> <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"> <HeaderTab className="flex items-center self-end">
<div> <div>
{logoConfig.map((config, index) => ( {logoConfig.map((config, index) => (
@@ -116,23 +133,21 @@ export default function HomeHeader() {
<div className="flex items-center"> <div className="flex items-center">
<div className="block sm:hidden -me-[2px]"> <div className="block sm:hidden -me-[2px]">
<MenuBar size="xsmall"> <MenuBar size="default">
{renderNavigationItems("xsmall")} {renderNavigationItems("xsmall")}
{renderLoginButton("xsmall")} {renderLoginButton("xsmall")}
</MenuBar> </MenuBar>
</div> </div>
<div className="hidden sm:block md:hidden sm:ml-[var(--spacing-scale-002)]"> <div className="hidden sm:block md:hidden sm:ml-[var(--spacing-scale-002)]">
<MenuBar size="xsmall"> <MenuBar size="default">
{renderNavigationItems("xsmall")} {renderNavigationItems("xsmall")}
{renderLoginButton("xsmall")} {renderLoginButton("xsmall")}
</MenuBar> </MenuBar>
</div> </div>
<div className="hidden md:block lg:hidden absolute left-1/2 transform -translate-x-1/2 ml-[var(--spacing-scale-024)]"> <div className="hidden md:block lg:hidden md:-ml-[var(--spacing-scale-012)]">
<MenuBar className="gap-[var(--spacing-scale-001)]"> <MenuBar size="medium">{renderNavigationItems("homeMd")}</MenuBar>
{renderNavigationItems("xsmall")}
</MenuBar>
</div> </div>
<div className="hidden lg:block xl:hidden absolute left-1/2 transform -translate-x-1/2 -ml-[var(--spacing-scale-024)]"> <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> <MenuBar size="large">{renderNavigationItems("xlarge")}</MenuBar>
</div> </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"> <div className="hidden lg:flex xl:hidden items-center">
{renderLoginButton("large", "mr-[var(--spacing-scale-012)]")} {renderLoginButton("large", "mr-[var(--spacing-scale-012)]")}
</div> </div>
@@ -164,7 +173,10 @@ export default function HomeHeader() {
{renderCreateRuleButton("xsmall", "small", "small")} {renderCreateRuleButton("xsmall", "small", "small")}
</div> </div>
<div className="hidden md:block lg:hidden absolute right-[var(--spacing-measures-spacing-016)]"> <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>
<div className="hidden lg:flex xl:hidden items-center"> <div className="hidden lg:flex xl:hidden items-center">
{renderCreateRuleButton("large", "xlarge", "xlarge")} {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]", lineHeight: "leading-[14.39px]",
iconSize: "w-[14.39px] h-[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: { header: {
containerHeight: "h-[20.85px]", containerHeight: "h-[20.85px]",
gap: "gap-[4.21px]", gap: "gap-[4.21px]",
@@ -71,6 +78,8 @@ export default function Logo({ size = "default", showText = true }) {
? sizes.homeHeaderXsmall ? sizes.homeHeaderXsmall
: size === "homeHeaderSm" : size === "homeHeaderSm"
? sizes.homeHeaderSm ? sizes.homeHeaderSm
: size === "homeHeaderMd"
? sizes.homeHeaderMd
: size === "header" : size === "header"
? sizes.header ? sizes.header
: size === "headerMd" : size === "headerMd"
@@ -95,7 +104,9 @@ export default function Logo({ size = "default", showText = true }) {
{showText && ( {showText && (
<div <div
className={`font-['Bricolage_Grotesque'] ${ className={`font-['Bricolage_Grotesque'] ${
size === "homeHeaderXsmall" || size === "homeHeaderSm" size === "homeHeaderXsmall" ||
size === "homeHeaderSm" ||
size === "homeHeaderMd"
? "text-[var(--color-content-inverse-primary)]" ? "text-[var(--color-content-inverse-primary)]"
: "text-[var(--color-content-default-primary)]" : "text-[var(--color-content-default-primary)]"
} ${config.textSize} ${config.lineHeight} font-normal tracking-[0px]`} } ${config.textSize} ${config.lineHeight} font-normal tracking-[0px]`}
@@ -111,7 +122,9 @@ export default function Logo({ size = "default", showText = true }) {
width={27.05} width={27.05}
height={27.05} height={27.05}
className={`flex-shrink-0 ${config.iconSize} ${ className={`flex-shrink-0 ${config.iconSize} ${
size === "homeHeaderXsmall" || size === "homeHeaderSm" size === "homeHeaderXsmall" ||
size === "homeHeaderSm" ||
size === "homeHeaderMd"
? "filter brightness-0" ? "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]", "px-[var(--spacing-scale-004)] py-[var(--spacing-scale-004)] gap-[var(--spacing-scale-001)] rounded-[4px]",
default: default:
"px-[var(--spacing-scale-004)] py-[var(--spacing-scale-004)] gap-[var(--spacing-scale-001)]", "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: large:
"px-[var(--spacing-scale-004)] py-[var(--spacing-scale-004)] gap-[var(--spacing-scale-012)]", "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 = { const activeOutlineStyles = {
xsmall: 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: 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: 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: 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 = { const homeOutlineStyles = {
@@ -30,7 +32,11 @@ export default function MenuBarItem({
xsmallUseCases: xsmallUseCases:
"active:outline-1 active:outline-[var(--color-content-default-primary)]", "active:outline-1 active:outline-[var(--color-content-default-primary)]",
default: 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: large:
"active:outline-[1.75px] active:outline-[var(--color-content-default-primary)]", "active:outline-[1.75px] active:outline-[var(--color-content-default-primary)]",
xlarge: xlarge:
@@ -44,6 +50,10 @@ export default function MenuBarItem({
"px-[var(--spacing-scale-004)] py-[var(--spacing-scale-002)] gap-[var(--spacing-scale-004)]", "px-[var(--spacing-scale-004)] py-[var(--spacing-scale-002)] gap-[var(--spacing-scale-004)]",
xsmallUseCases: xsmallUseCases:
"px-[var(--spacing-scale-002)] py-[var(--spacing-scale-002)] gap-[var(--spacing-scale-004)]", "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: large:
"px-[var(--spacing-scale-012)] py-[var(--spacing-scale-012)] gap-[var(--spacing-scale-004)]", "px-[var(--spacing-scale-012)] py-[var(--spacing-scale-012)] gap-[var(--spacing-scale-004)]",
xlarge: xlarge:
@@ -52,6 +62,8 @@ export default function MenuBarItem({
const smallTextStyle = const smallTextStyle =
"font-['Inter'] text-[10px] leading-[12px] font-medium tracking-[0%]"; "font-['Inter'] text-[10px] leading-[12px] font-medium tracking-[0%]";
const mediumTextStyle =
"font-['Inter'] text-[12px] leading-[14px] font-medium tracking-[0%]";
const largeTextStyle = const largeTextStyle =
"font-['Inter'] text-[16px] leading-[20px] font-medium tracking-[0%]"; "font-['Inter'] text-[16px] leading-[20px] font-medium tracking-[0%]";
const xlargeTextStyle = const xlargeTextStyle =
@@ -61,6 +73,9 @@ export default function MenuBarItem({
default: smallTextStyle, default: smallTextStyle,
xsmall: smallTextStyle, xsmall: smallTextStyle,
xsmallUseCases: smallTextStyle, xsmallUseCases: smallTextStyle,
home: smallTextStyle,
homeMd: mediumTextStyle,
homeUseCases: mediumTextStyle,
large: largeTextStyle, large: largeTextStyle,
xlarge: xlargeTextStyle, xlarge: xlargeTextStyle,
}; };