Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: update navbar styling to fit smaller screens on desktop #429

Merged
merged 1 commit into from
Aug 5, 2024
Merged

feat: update navbar styling to fit smaller screens on desktop #429

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/components/src/templates/next/components/internal/Navbar/NavItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ interface NavbarItemProps
const navbarItemStyles = tv({
slots: {
megamenu: "max-h-full overflow-auto bg-white shadow-md",
item: "prose-label-md-medium flex h-[4.25rem] flex-row items-center gap-0.5 border-b-2 border-transparent text-base-content-strong transition-colors hover:text-brand-interaction-hover motion-reduce:transition-none",
item: "prose-label-md-medium flex h-[4.25rem] flex-row items-center border-b-2 border-transparent text-base-content-strong transition-colors hover:text-brand-interaction-hover motion-reduce:transition-none",
chevron:
"text-base transition-transform duration-300 ease-in-out motion-reduce:transition-none",
},
Expand Down
72 changes: 36 additions & 36 deletions packages/components/src/templates/next/components/internal/Navbar/Navbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,16 +15,16 @@ import { NavItem } from "./NavItem"
const navbarStyles = tv({
slots: {
overlay: "fixed inset-0 bg-canvas-overlay bg-opacity-40",
icon: "my-3 lg:my-[1.1875rem]",
logo: "my-3 h-10 w-32 max-w-[6.625rem] object-contain object-center lg:h-12 lg:max-w-32",
logo: "max-h-[68px] object-contain object-center",
navbarContainer: "flex min-h-16 w-full bg-white lg:min-h-[4.25rem]",
navbar:
"mx-auto flex w-full max-w-screen-xl gap-x-4 pl-6 pr-3 lg:gap-x-6 lg:px-10",
navItemContainer: "hidden flex-wrap items-center gap-x-6 lg:flex",
"mx-auto flex w-full max-w-screen-xl justify-between gap-x-2 pl-6 pr-3 lg:px-10",
navItemContainer:
"hidden flex-1 flex-wrap items-center gap-x-3 pl-2 lg:flex",
},
})

const { overlay, navItemContainer, navbarContainer, navbar, logo, icon } =
const { overlay, navItemContainer, navbarContainer, navbar, logo } =
navbarStyles()

export const Navbar = ({
Expand Down Expand Up @@ -102,7 +102,7 @@ export const Navbar = ({
<div className={navbarContainer()} ref={siteHeaderRef}>
<div className={navbar()}>
{/* Logo */}
<LinkComponent href="/">
<LinkComponent className="flex" href="/">
<img src={logoUrl} alt={logoAlt} className={logo()} />
</LinkComponent>

Expand All @@ -129,53 +129,53 @@ export const Navbar = ({
))}
</ul>

{/* Spacer */}
<div className="flex-1" />

<div className="flex flex-row gap-1">
{/* Search icon */}
{search && !isHamburgerOpen && (
<>
<div className="flex h-[68px] items-center">
{isSearchOpen ? (
<IconButton
onPress={() => setIsSearchOpen(!isSearchOpen)}
onPress={() => {
setIsSearchOpen(!isSearchOpen)
}}
aria-label="Close search bar"
icon={BiX}
className={icon()}
/>
) : (
<IconButton
onPress={() => setIsSearchOpen(!isSearchOpen)}
onPress={() => {
setOpenNavItemIdx(-1)
setIsSearchOpen(!isSearchOpen)
}}
aria-label="Open search bar"
icon={BiSearch}
className={icon()}
/>
)}
</>
</div>
)}

{/* Hamburger menu for small screens */}
{isHamburgerOpen ? (
<IconButton
onPress={() => {
setIsHamburgerOpen(false)
setOpenNavItemIdx(-1)
}}
aria-label="Close navigation menu"
icon={BiX}
className={icon({ className: "lg:hidden" })}
/>
) : (
<IconButton
onPress={() => {
setIsHamburgerOpen(true)
setIsSearchOpen(false)
}}
className={icon({ className: "lg:hidden" })}
aria-label="Open navigation menu"
icon={BiMenu}
/>
)}
<div className="flex h-[68px] items-center lg:hidden">
{isHamburgerOpen ? (
<IconButton
onPress={() => {
setIsHamburgerOpen(false)
setOpenNavItemIdx(-1)
}}
aria-label="Close navigation menu"
icon={BiX}
/>
) : (
<IconButton
onPress={() => {
setIsHamburgerOpen(true)
setIsSearchOpen(false)
}}
aria-label="Open navigation menu"
icon={BiMenu}
/>
)}
</div>
</div>
</div>
</div>
Expand Down
Loading