fix navbar alignement on mobile when Navbar.align prop is set to left (#4214)

dimaMachina · web-flow · commit 8805d3f1a2f6 · 2025-02-15T02:06:22.000+07:00
upd
diff --git a/.changeset/green-drinks-heal.md b/.changeset/green-drinks-heal.md
@@ -0,0 +1,7 @@
+---
+"nextra-theme-docs": patch
+---
+
+- add `overflow: hidden` on `<html>` element instead of `<body>` to lock scroll when mobile nav is open
+- increase z-index for mobile nav  from `10` to `20`, in navbar from `20` to `30`
+- fix navbar alignement on mobile when `Navbar.align` prop is set to `left`
diff --git a/packages/nextra-theme-docs/src/components/navbar/index.tsx b/packages/nextra-theme-docs/src/components/navbar/index.tsx
@@ -42,13 +42,13 @@ export const Navbar: FC<NavbarProps> = props => {
 
   const logoClass = cn(
     'x:flex x:items-center',
-    align === 'right' && 'x:me-auto'
+    align === 'left' ? 'x:max-md:me-auto' : 'x:me-auto'
   )
 
   return (
     <header
       className={cn(
-        'nextra-navbar x:sticky x:top-0 x:z-20 x:w-full x:bg-transparent x:print:hidden',
+        'nextra-navbar x:sticky x:top-0 x:z-30 x:w-full x:bg-transparent x:print:hidden',
         'x:max-md:[.nextra-banner:not([class$=hidden])~&]:top-(--nextra-banner-height)'
       )}
     >
@@ -64,7 +64,7 @@ export const Navbar: FC<NavbarProps> = props => {
         style={{ height: 'var(--nextra-navbar-height)' }}
         className={cn(
           'x:mx-auto x:flex x:max-w-(--nextra-content-width) x:items-center x:gap-4 x:pl-[max(env(safe-area-inset-left),1.5rem)] x:pr-[max(env(safe-area-inset-right),1.5rem)]',
-          align === 'right' && 'x:justify-end',
+          'x:justify-end',
           className
         )}
       >
diff --git a/packages/nextra-theme-docs/src/components/sidebar.tsx b/packages/nextra-theme-docs/src/components/sidebar.tsx
@@ -322,7 +322,7 @@ export const MobileNav: FC = () => {
       className={cn(
         'nextra-mobile-nav', // targeted from userspace
         'x:flex x:flex-col',
-        'x:fixed x:inset-0 x:pt-(--nextra-navbar-height) x:z-10 x:overscroll-contain',
+        'x:fixed x:inset-0 x:pt-(--nextra-navbar-height) x:z-20 x:overscroll-contain',
         'x:[contain:layout_style]',
         'x:md:hidden',
         'x:[.nextra-banner:not([class$=hidden])~&]:pt-[calc(var(--nextra-banner-height)+var(--nextra-navbar-height))]',
diff --git a/packages/nextra-theme-docs/src/stores/menu.ts b/packages/nextra-theme-docs/src/stores/menu.ts
@@ -15,7 +15,10 @@ export const setMenu: Dispatch<SetStateAction<boolean>> = fn => {
   useMenuStore.setState(state => {
     const hasMenu = typeof fn === 'function' ? fn(state.hasMenu) : fn
     // Lock background scroll when menu is opened
-    document.body.classList.toggle('x:max-md:overflow-hidden', hasMenu)
+    document.documentElement.classList.toggle(
+      'x:max-md:overflow-hidden',
+      hasMenu
+    )
     return { hasMenu }
   })
 }
