Skip to content

Commit 6a0f398

Browse files
nicholasalanbrownnicholasalanbrown
committed
feat(topnav): simplify nav — Explore, API, About with left-aligned layout
- Remove Home, Grid Operators, Transmission, Power Plants from nav - Add API link (external → https://docs.opengrid.dev) - Layout: logo + nav inline left, icons grouped right - Height: h-14 (was h-16), no backdrop blur - Active state: neutral font-medium (not brand-primary) - Use Button variant=icon from edges for GitHub + theme toggle - external prop on NavigationItem for new-tab links
1 parent b47e35a commit 6a0f398

File tree

2 files changed

+74
-44
lines changed

2 files changed

+74
-44
lines changed

‎app/(shell)/layout.tsx‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,8 @@ import { ShellLayoutClient } from "@/components/ShellLayoutClient";
33

44
export default function ShellLayout({ children }: { children: ReactNode }) {
55
const navigation = [
6-
{ id: "home", label: "Home", href: "/" },
76
{ id: "explore", label: "Explore", href: "/explore" },
8-
{ id: "grid-operators", label: "Grid Operators", href: "/grid-operators", activePatterns: ["/grid-operators"] },
9-
{ id: "transmission-lines", label: "Transmission", href: "/transmission-lines" },
10-
{ id: "power-plants", label: "Power Plants", href: "/power-plants" },
7+
{ id: "api", label: "API", href: "https://docs.opengrid.dev", external: true },
118
{ id: "about", label: "About", href: "/about" },
129
];
1310

‎components/TopBar.tsx‎

Lines changed: 73 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ export type NavigationItem = {
99
id: string;
1010
label: string;
1111
href: string;
12+
external?: boolean;
1213
activePatterns?: string[];
1314
};
1415

@@ -44,41 +45,60 @@ export function TopBar({ navigation }: TopBarProps) {
4445
};
4546

4647
return (
47-
<header className="sticky top-0 z-30 bg-[var(--color-background-subtle)]/95 backdrop-blur-sm border-b border-border-default">
48-
<div className="flex items-center justify-between h-16 px-5">
49-
<Link href="/" className="flex items-center gap-2">
50-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="currentColor" className="h-7 w-7 text-text-heading">
51-
<circle cx="10" cy="10" r="3.5"/><circle cx="25" cy="10" r="3.5"/><circle cx="40" cy="10" r="3.5"/><circle cx="55" cy="10" r="3.5"/><circle cx="70" cy="10" r="3.5"/><circle cx="85" cy="10" r="3.5"/>
52-
<circle cx="10" cy="90" r="3.5"/><circle cx="25" cy="90" r="3.5"/><circle cx="40" cy="90" r="3.5"/><circle cx="55" cy="90" r="3.5"/><circle cx="70" cy="90" r="3.5"/><circle cx="85" cy="90" r="3.5"/>
53-
<circle cx="10" cy="26" r="3.5"/><circle cx="10" cy="42" r="3.5"/><circle cx="10" cy="58" r="3.5"/><circle cx="10" cy="74" r="3.5"/>
54-
<circle cx="85" cy="26" r="3.5"/><circle cx="85" cy="42" r="3.5"/><circle cx="85" cy="58" r="3.5"/><circle cx="85" cy="74" r="3.5"/>
55-
<rect x="28" y="28" width="8" height="44" rx="2"/><rect x="28" y="64" width="30" height="8" rx="2"/><rect x="58" y="28" width="8" height="44" rx="2"/><rect x="44" y="28" width="22" height="8" rx="2"/>
56-
</svg>
57-
<span className="text-lg font-semibold text-text-heading tracking-tight">
58-
OpenGrid
59-
</span>
60-
</Link>
48+
<header className="sticky top-0 z-30 bg-background-surface border-b border-border-default">
49+
<div className="flex items-center h-14 px-5">
50+
{/* Left: logo + nav */}
51+
<div className="flex items-center gap-6">
52+
<Link href="/" className="flex items-center gap-2">
53+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="currentColor" className="h-6 w-6 text-text-heading">
54+
<circle cx="10" cy="10" r="3.5"/><circle cx="25" cy="10" r="3.5"/><circle cx="40" cy="10" r="3.5"/><circle cx="55" cy="10" r="3.5"/><circle cx="70" cy="10" r="3.5"/><circle cx="85" cy="10" r="3.5"/>
55+
<circle cx="10" cy="90" r="3.5"/><circle cx="25" cy="90" r="3.5"/><circle cx="40" cy="90" r="3.5"/><circle cx="55" cy="90" r="3.5"/><circle cx="70" cy="90" r="3.5"/><circle cx="85" cy="90" r="3.5"/>
56+
<circle cx="10" cy="26" r="3.5"/><circle cx="10" cy="42" r="3.5"/><circle cx="10" cy="58" r="3.5"/><circle cx="10" cy="74" r="3.5"/>
57+
<circle cx="85" cy="26" r="3.5"/><circle cx="85" cy="42" r="3.5"/><circle cx="85" cy="58" r="3.5"/><circle cx="85" cy="74" r="3.5"/>
58+
<rect x="28" y="28" width="8" height="44" rx="2"/><rect x="28" y="64" width="30" height="8" rx="2"/><rect x="58" y="28" width="8" height="44" rx="2"/><rect x="44" y="28" width="22" height="8" rx="2"/>
59+
</svg>
60+
<span className="text-[15px] font-semibold text-text-heading tracking-tight">
61+
OpenGrid
62+
</span>
63+
</Link>
6164

62-
<nav className="hidden sm:flex items-center gap-1">
63-
{navigation.map((item) => (
64-
<Link
65-
key={item.id}
66-
href={item.href}
67-
className={`px-3.5 py-2 rounded-md text-[15px] transition-colors ${
68-
isActive(item) ? "text-brand-primary font-semibold" : "text-text-muted hover:text-text-body"
69-
}`}
70-
>
71-
{item.label}
72-
</Link>
73-
))}
65+
<nav className="hidden sm:flex items-center gap-0.5">
66+
{navigation.map((item) =>
67+
item.external ? (
68+
<a
69+
key={item.id}
70+
href={item.href}
71+
target="_blank"
72+
rel="noopener noreferrer"
73+
className="px-3 py-1.5 rounded-md text-sm transition-colors text-text-muted hover:text-text-body"
74+
>
75+
{item.label}
76+
</a>
77+
) : (
78+
<Link
79+
key={item.id}
80+
href={item.href}
81+
className={`px-3 py-1.5 rounded-md text-sm transition-colors ${
82+
isActive(item)
83+
? "text-text-body font-medium"
84+
: "text-text-muted hover:text-text-body"
85+
}`}
86+
>
87+
{item.label}
88+
</Link>
89+
)
90+
)}
91+
</nav>
92+
</div>
7493

94+
{/* Right: icons */}
95+
<div className="ml-auto hidden sm:flex items-center gap-1">
7596
<Button
7697
variant="icon"
7798
href="https://github.com/TextureHQ/opengrid"
7899
target="_blank"
79100
rel="noopener noreferrer"
80101
aria-label="View on GitHub"
81-
className="ml-2"
82102
>
83103
<GitHubIcon />
84104
</Button>
@@ -92,9 +112,10 @@ export function TopBar({ navigation }: TopBarProps) {
92112
<Icon name={isDarkTheme ? "Sun" : "Moon"} size={18} />
93113
</Button>
94114
)}
95-
</nav>
115+
</div>
96116

97-
<div className="flex items-center gap-2 sm:hidden">
117+
{/* Mobile: theme toggle + hamburger */}
118+
<div className="ml-auto flex items-center gap-1 sm:hidden">
98119
{mounted && (
99120
<Button
100121
variant="icon"
@@ -116,17 +137,29 @@ export function TopBar({ navigation }: TopBarProps) {
116137

117138
{mobileMenuOpen && (
118139
<nav className="sm:hidden border-t border-border-default px-4 py-2">
119-
{navigation.map((item) => (
120-
<Link
121-
key={item.id}
122-
href={item.href}
123-
className={`block px-3 py-2 rounded-md text-sm transition-colors ${
124-
isActive(item) ? "text-brand-primary font-semibold" : "text-text-muted hover:text-text-body"
125-
}`}
126-
>
127-
{item.label}
128-
</Link>
129-
))}
140+
{navigation.map((item) =>
141+
item.external ? (
142+
<a
143+
key={item.id}
144+
href={item.href}
145+
target="_blank"
146+
rel="noopener noreferrer"
147+
className="block px-3 py-2 rounded-md text-sm transition-colors text-text-muted hover:text-text-body"
148+
>
149+
{item.label}
150+
</a>
151+
) : (
152+
<Link
153+
key={item.id}
154+
href={item.href}
155+
className={`block px-3 py-2 rounded-md text-sm transition-colors ${
156+
isActive(item) ? "text-text-body font-medium" : "text-text-muted hover:text-text-body"
157+
}`}
158+
>
159+
{item.label}
160+
</Link>
161+
)
162+
)}
130163
<Button
131164
variant="icon"
132165
href="https://github.com/TextureHQ/opengrid"

0 commit comments

Comments
 (0)