Skip to content

feat: 29 Global Layout Wrapper Refactor #119

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Icebear-16 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat: 29 Global Layout Wrapper Refactor #119

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 9 additions & 4 deletions src/app/components/server/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,13 @@
export default function Header() {
return (
<header className="h-16 px-6 flex items-center justify-between bg-white border-b">
<h1 className="text-lg font-semibold">Dashboard</h1>
<div>User Menu</div>
<header className="sticky top-0 z-20 flex h-16 items-center justify-between border-b border-white/10 bg-[#020817]/90 px-6 backdrop-blur">
<div>
<p className="text-xs font-semibold uppercase tracking-[0.28em] text-[#D9F99D]/80">
Operations
</p>
<h1 className="text-lg font-semibold text-white">StellarFlow Console</h1>
</div>
<div className="text-sm text-slate-300">User Menu</div>
</header>
)
}
}
22 changes: 14 additions & 8 deletions src/app/components/server/Sidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,21 @@ import Link from 'next/link'

export default function Sidebar() {
return (
<aside className="w-64 h-screen bg-gray-900 text-white p-4">
<h2 className="text-xl font-bold mb-6">Dashboard</h2>
<aside className="flex h-screen w-64 shrink-0 flex-col border-r border-white/10 bg-[#0A1020] px-5 py-6 text-white">
<div className="mb-8">
<p className="text-xs font-semibold uppercase tracking-[0.28em] text-[#D9F99D]/80">
StellarFlow
</p>
<h2 className="mt-2 text-2xl font-semibold text-white">Dashboard</h2>
</div>

<nav className="space-y-4">
<Link href="/">Home</Link>
<Link href="/analytics">Analytics</Link>
<Link href="/transactions">Transactions</Link>
<Link href="/settings">Settings</Link>
<nav className="flex flex-col gap-2 text-sm text-slate-300">
<Link className="rounded-lg px-3 py-2 transition hover:bg-white/5 hover:text-white" href="/">Home</Link>
<Link className="rounded-lg px-3 py-2 transition hover:bg-white/5 hover:text-white" href="/contracts">Contracts</Link>
<Link className="rounded-lg px-3 py-2 transition hover:bg-white/5 hover:text-white" href="/relayers">Relayers</Link>
<Link className="rounded-lg px-3 py-2 transition hover:bg-white/5 hover:text-white" href="/logs">Logs</Link>
<Link className="rounded-lg px-3 py-2 transition hover:bg-white/5 hover:text-white" href="/settings">Settings</Link>
</nav>
</aside>
)
}
}
14 changes: 12 additions & 2 deletions src/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@ import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";
import { ThemeProvider } from "./components/ThemeProvider";
import { ProgressBarProvider } from "./components/TopLoadingBar";
import Sidebar from "./components/server/Sidebar";
import Header from "./components/server/Header";

const geistSans = Geist({
variable: "--font-geist-sans",
Expand Down Expand Up @@ -36,7 +38,7 @@ export default function RootLayout({
<style>{`html { background-color: #0d1117; }`}</style>
</head>
<body
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
className={`${geistSans.variable} ${geistMono.variable} h-screen overflow-hidden antialiased`}
>
<ThemeProvider
attribute="class"
Expand All @@ -45,7 +47,15 @@ export default function RootLayout({
disableTransitionOnChange
>
<ProgressBarProvider>
{children}
<div className="flex h-screen flex-row bg-[#020817] text-white">
<Sidebar />
<div className="flex min-h-0 min-w-0 flex-1 flex-col">
<Header />
<main className="min-h-0 flex-1 overflow-y-auto">
{children}
</main>
</div>
</div>
</ProgressBarProvider>
</ThemeProvider>
</body>
Expand Down
14 changes: 3 additions & 11 deletions src/app/page.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,6 @@
import React, { useEffect, useState } from "react";
import dynamic from "next/dynamic";
import { Loader2 } from "lucide-react";
import Nav from "./components/nav";
import FloatingSidebar from "./components/FloatingSidebar";
import SystemStats from "./components/SystemStats";
import ModularStatsCard from "./components/ModularStatsCard";
import PriceFeedCard from "./components/PriceFeedCard";
Expand Down Expand Up @@ -53,13 +51,8 @@ export default function DashboardPage() {
}, []);

return (
<div className="min-h-screen bg-[#020817] text-white selection:bg-[#CBF34D]/30">
<Nav />
{/* Sidebar - Positioned for the dashboard layout */}
<FloatingSidebar />

<main className="pl-24 pr-8 py-10 md:py-16">
<div className="max-w-6xl mx-auto space-y-12">
<div className="min-h-full bg-[#020817] px-8 py-10 text-white selection:bg-[#CBF34D]/30 md:py-16">
<div className="mx-auto max-w-6xl space-y-12">
{/* System At-A-Glance Stats Section */}
<SystemStats />

Expand Down Expand Up @@ -152,8 +145,7 @@ export default function DashboardPage() {
</div>
</div>
</section>
</div>
</main>
</div>
</div>
);
};