Skip to content

Commit 4985d62

Browse files
SarthakMeshramSarthak Meshram
SarthakMeshram
and
Sarthak Meshram
authored
fix: navbar left gap (#1277) (#1465)
* 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>
1 parent 336e377 commit 4985d62

4 files changed

Lines changed: 70 additions & 10 deletions

File tree

‎demo/next-app/src/app/globals.css‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
--color-foreground: var(--foreground);
1111
--font-sans: var(--font-geist-sans);
1212
--font-mono: var(--font-geist-mono);
13+
--max-container-width: 1200px;
1314
}
1415

1516
@media (prefers-color-scheme: dark) {
@@ -18,3 +19,19 @@
1819
--foreground: #ededed;
1920
}
2021
}
22+
/* Stabilize layout when Windows scrollbars appear */
23+
html {
24+
scrollbar-gutter: stable;
25+
}
26+
27+
/* Ensure full-bleed bars actually span the viewport width */
28+
.site-announcement,
29+
.site-navbar {
30+
width: 100%; /* never use 100vw — prevents scrollbar gutter */
31+
}
32+
33+
/* Optional: small polish — consistent font smoothing */
34+
body {
35+
-webkit-font-smoothing: antialiased;
36+
-moz-osx-font-smoothing: grayscale;
37+
}

‎demo/next-app/src/app/layout.tsx‎

Lines changed: 15 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,10 @@ import "./globals.css";
66
import { LocaleSwitcher } from "lingo.dev/react/client";
77
import { LingoProvider, loadDictionary } from "lingo.dev/react/rsc";
88

9+
// NEW: bring in the full-bleed components
10+
import AnnouncementBar from "@/components/AnnouncementBar";
11+
import Navbar from "@/components/Navbar";
12+
913
const geistSans = Geist({
1014
variable: "--font-geist-sans",
1115
subsets: ["latin"],
@@ -23,21 +27,22 @@ export const metadata: Metadata = {
2327

2428
export default function RootLayout({
2529
children,
26-
}: Readonly<{
27-
children: React.ReactNode;
28-
}>) {
30+
}: Readonly<{ children: React.ReactNode }>) {
2931
// Compiler: wrap with LingoProvider and render LocaleSwitcher
3032
return (
31-
<LingoProvider loadDictionary={(locale) => loadDictionary(locale)}>
33+
<LingoProvider loadDictionary={(Locale: any) => loadDictionary(Locale)}>
3234
<html lang="en">
33-
<body
34-
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
35-
>
35+
<body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
36+
{/* Locale switcher (kept as-is) */}
3637
<div className="absolute top-2 right-3">
37-
<LocaleSwitcher
38-
locales={["en", "es", "zh", "ja", "fr", "de", "ru", "ar", "ko"]}
39-
/>
38+
<LocaleSwitcher locales={["en", "es", "zh", "ja", "fr", "de", "ru", "ar", "ko"]} />
4039
</div>
40+
41+
{/* Full-bleed top bars */}
42+
<AnnouncementBar />
43+
<Navbar />
44+
45+
{/* Page content */}
4146
{children}
4247
</body>
4348
</html>

‎demo/next-app/src/components/AnnouncementBar.tsx‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
// Full-bleed announcement bar with inner constrained container.
2+
// Background lives on the OUTER shell so it truly hits the viewport edge.
3+
export default function AnnouncementBar() {
4+
return (
5+
<div className="w-full bg-lime-500 site-announcement">
6+
<div className="mx-auto w-full max-w-[var(--max-container-width)] px-4 py-1 text-sm">
7+
{/* Replace with real copy if you like */}
8+
<span className="font-medium">Lingo.dev</span>&nbsp;— experimental compiler & tooling demo
9+
</div>
10+
</div>
11+
);
12+
}

‎demo/next-app/src/components/Navbar.tsx‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
// Full-bleed navbar wrapper; inner container holds padding/centering.
2+
// No 100vw/w-screen anywhere → avoids Windows scrollbar gutter.
3+
export default function Navbar() {
4+
return (
5+
<div className="w-full bg-lime-500 site-navbar">
6+
<div className="mx-auto w-full max-w-[var(--max-container-width)] px-4">
7+
<nav className="flex items-center h-12">
8+
{/* Left: Logo */}
9+
<a href="/" className="flex items-center gap-2 no-underline">
10+
<span className="text-base font-semibold">Lingo.dev</span>
11+
</a>
12+
13+
{/* Spacer */}
14+
<div className="grow" />
15+
16+
{/* Right: Simple links (demo only) */}
17+
<ul className="flex items-center gap-2">
18+
<li><a className="px-3 py-1.5 rounded-lg hover:bg-black/10" href="/get-started">Get started</a></li>
19+
<li><a className="px-3 py-1.5 rounded-lg hover:bg-black/10" href="/cli">CLI</a></li>
20+
<li><a className="px-3 py-1.5 rounded-lg hover:bg-black/10" href="/sdk">SDK</a></li>
21+
</ul>
22+
</nav>
23+
</div>
24+
</div>
25+
);
26+
}

0 commit comments

Comments
 (0)