fix: navbar left gap (#1277) (#1465)

SarthakMeshram · Sarthak Meshram · web-flow · commit 4985d6294313 · 2025-11-12T16:37:59.000+09:00
* fix(demo/next-app): remove unintended left offset in navbar and announcement bar (#1277) * fix(demo/next-app): remove unintended left offset in navbar and announcement bar (#1277) * chore: add missing files for navbar fix --------- Co-authored-by: Sarthak Meshram <sarthakm@Sarthaks-MacBook-Air.local>
diff --git a/demo/next-app/src/app/globals.css b/demo/next-app/src/app/globals.css
@@ -10,6 +10,7 @@
   --color-foreground: var(--foreground);
   --font-sans: var(--font-geist-sans);
   --font-mono: var(--font-geist-mono);
+  --max-container-width: 1200px;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -18,3 +19,19 @@
     --foreground: #ededed;
   }
 }
+/* Stabilize layout when Windows scrollbars appear */
+html {
+  scrollbar-gutter: stable;
+}
+
+/* Ensure full-bleed bars actually span the viewport width */
+.site-announcement,
+.site-navbar {
+  width: 100%; /* never use 100vw — prevents scrollbar gutter */
+}
+
+/* Optional: small polish — consistent font smoothing */
+body {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
diff --git a/demo/next-app/src/app/layout.tsx b/demo/next-app/src/app/layout.tsx
@@ -6,6 +6,10 @@ import "./globals.css";
 import { LocaleSwitcher } from "lingo.dev/react/client";
 import { LingoProvider, loadDictionary } from "lingo.dev/react/rsc";
 
+// NEW: bring in the full-bleed components
+import AnnouncementBar from "@/components/AnnouncementBar";
+import Navbar from "@/components/Navbar";
+
 const geistSans = Geist({
   variable: "--font-geist-sans",
   subsets: ["latin"],
@@ -23,21 +27,22 @@ export const metadata: Metadata = {
 
 export default function RootLayout({
   children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
+}: Readonly<{ children: React.ReactNode }>) {
   // Compiler: wrap with LingoProvider and render LocaleSwitcher
   return (
-    <LingoProvider loadDictionary={(locale) => loadDictionary(locale)}>
+    <LingoProvider loadDictionary={(Locale: any) => loadDictionary(Locale)}>
       <html lang="en">
-        <body
-          className={`${geistSans.variable} ${geistMono.variable} antialiased`}
-        >
+        <body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
+          {/* Locale switcher (kept as-is) */}
           <div className="absolute top-2 right-3">
-            <LocaleSwitcher
-              locales={["en", "es", "zh", "ja", "fr", "de", "ru", "ar", "ko"]}
-            />
+            <LocaleSwitcher locales={["en", "es", "zh", "ja", "fr", "de", "ru", "ar", "ko"]} />
           </div>
+
+          {/* Full-bleed top bars */}
+          <AnnouncementBar />
+          <Navbar />
+
+          {/* Page content */}
           {children}
         </body>
       </html>
diff --git a/demo/next-app/src/components/AnnouncementBar.tsx b/demo/next-app/src/components/AnnouncementBar.tsx
@@ -0,0 +1,12 @@
+// Full-bleed announcement bar with inner constrained container.
+// Background lives on the OUTER shell so it truly hits the viewport edge.
+export default function AnnouncementBar() {
+  return (
+    <div className="w-full bg-lime-500 site-announcement">
+      <div className="mx-auto w-full max-w-[var(--max-container-width)] px-4 py-1 text-sm">
+        {/* Replace with real copy if you like */}
+        <span className="font-medium">Lingo.dev</span>&nbsp;— experimental compiler & tooling demo
+      </div>
+    </div>
+  );
+}
diff --git a/demo/next-app/src/components/Navbar.tsx b/demo/next-app/src/components/Navbar.tsx
@@ -0,0 +1,26 @@
+// Full-bleed navbar wrapper; inner container holds padding/centering.
+// No 100vw/w-screen anywhere → avoids Windows scrollbar gutter.
+export default function Navbar() {
+  return (
+    <div className="w-full bg-lime-500 site-navbar">
+      <div className="mx-auto w-full max-w-[var(--max-container-width)] px-4">
+        <nav className="flex items-center h-12">
+          {/* Left: Logo */}
+          <a href="/" className="flex items-center gap-2 no-underline">
+            <span className="text-base font-semibold">Lingo.dev</span>
+          </a>
+
+          {/* Spacer */}
+          <div className="grow" />
+
+          {/* Right: Simple links (demo only) */}
+          <ul className="flex items-center gap-2">
+            <li><a className="px-3 py-1.5 rounded-lg hover:bg-black/10" href="/get-started">Get started</a></li>
+            <li><a className="px-3 py-1.5 rounded-lg hover:bg-black/10" href="/cli">CLI</a></li>
+            <li><a className="px-3 py-1.5 rounded-lg hover:bg-black/10" href="/sdk">SDK</a></li>
+          </ul>
+        </nav>
+      </div>
+    </div>
+  );
+}
