feat: fix navbar overflowing

Blazity · Nov 13, 2023 · 98c1bb7 · 98c1bb7
1 parent 28d9e37
commit 98c1bb7
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 11 deletions.
diff --git a/src/app/[lang]/layout.tsx b/src/app/[lang]/layout.tsx
@@ -45,12 +45,12 @@ export default async function Layout({ children, params }: { children: React.Rea
  const { navigation, footer, logo } = await getNavigation(locale)
 
  return (
- <html lang={locale}>
+ <html lang={locale} style={{ scrollbarGutter: "stable" }}>
  <GoogleAnalytics />
  <Providers translations={translations} locale={locale}>
- <body className="flex min-h-screen flex-col items-center ">
+ <body className="flex min-h-screen flex-col items-center">
  <div className="z-50 flex w-full justify-center border-b bg-white">
- <nav className="flex w-full max-w-[1200px] items-center justify-end gap-4 py-4">
+ <nav className="flex w-full max-w-[1200px] items-center justify-end gap-4 py-4 ">
  <Navigation navigation={navigation} />
  </nav>
  </div>

diff --git a/src/components/Navigation/Navigation.tsx b/src/components/Navigation/Navigation.tsx
@@ -32,7 +32,7 @@ export function Navigation({ navigation }: NavigationProps) {
  href={url}
  hrefLang={locale}
  onClick={() => setIsSheetOpen(false)}
- className="rounded-xl p-2 font-semibold hover:bg-custom-dim"
+ className="whitespace-nowrap rounded-xl p-2 font-semibold hover:bg-custom-dim"
  >
  {navElement?.element?.title}
  </Link>
@@ -51,15 +51,20 @@ export function Navigation({ navigation }: NavigationProps) {
  >
  <Image src={logo?.url} width={100} height={33} alt="site-logo" quality={100} />
  </Link>
- <ul className="hidden items-center gap-4 sm:flex-wrap lg:flex">
- <li className="-mr-3 flex items-center">
+ <div className="hidden flex-nowrap items-center gap-4 lg:flex">
+ <div className="-mr-3 flex items-center">
  <DynamicSearchDialog />
- </li>
- {navElements}
- <li>
+ </div>
+ <ul
+ className=" flex h-[40px] max-w-[700px] flex-nowrap items-center gap-4 overflow-hidden"
+ style={{ scrollbarGutter: "stable" }}
+ >
+ {navElements}
+ </ul>
+ <div>
  <DynamicLangSelect />
- </li>
- </ul>
+ </div>
+ </div>
  <ul className="flex items-center sm:flex-wrap lg:hidden">
  <li className="flex items-center">
  <DynamicSearchDialog />