Skip to content

fix(console-ui): make sidebar navigation native #458

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

Merged
Gajesh2007 merged 1 commit into from
Jun 24, 2026
+12 −9
Merged

fix(console-ui): make sidebar navigation native #458

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
21 changes: 12 additions & 9 deletions console-ui/src/components/Sidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
"use client";

/* eslint-disable @next/next/no-html-link-for-pages */
import { useStore } from "@/lib/store";
import { useAuth } from "@/hooks/useAuth";
import { useTheme } from "@/components/providers/ThemeProvider";
Expand All @@ -19,7 +20,6 @@ import {
Sun,
Moon,
} from "lucide-react";

@ethenotethan ethenotethan Jun 24, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🔵 [INFO] 🧩 useRouter import is no longer used after removing Next.js Link components

💡 Suggestion: Remove unused useRouter import from next/navigation

📊 Score: 2×3 = 6 · Category: dead code

import Link from "next/link";
import { usePathname, useRouter } from "next/navigation";
import { CommunityLinks } from "@/components/community/CommunityLinks";

Expand All @@ -41,19 +41,22 @@ export function Sidebar() {
if (!sidebarOpen) return null;

const isChatActive = pathname === "/";
const closeSidebarOnMobile = () => {
if (window.innerWidth < 640) setSidebarOpen(false);
};
Comment on lines +44 to +46

@ethenotethan ethenotethan Jun 24, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🟡 [MEDIUM] ⚡ Window width check repeated on every mobile click instead of using media query or cached value

💡 Suggestion: Use CSS media queries for responsive behavior or cache window.innerWidth check with resize listener to avoid repeated DOM queries

📊 Score: 2×4 = 8 · Category: Repeated work


return (
<aside className="sidebar-animate fixed inset-0 z-50 w-full sm:static sm:w-[260px] h-screen flex flex-col bg-bg-secondary sm:border-r sm:border-border-default shrink-0">
{/* Brand header */}
<div className="px-5 pt-5 pb-4 flex items-center justify-between">
<Link href="/" className="group">
<a href="/" className="group" onClick={closeSidebarOnMobile}>
<h1 className="text-2xl text-ink tracking-tight" style={{ fontFamily: "'Louize', Georgia, serif" }}>
Darkbloom
</h1>
<p className="text-[10px] font-mono text-text-tertiary tracking-wide uppercase mt-1">
An Eigen Labs project · Public Alpha
</p>
</Link>
</a>
<button
onClick={() => setSidebarOpen(false)}
className="p-1.5 rounded-lg hover:bg-bg-hover text-text-tertiary hover:text-text-primary transition-colors"
Expand All @@ -76,10 +79,10 @@ export function Sidebar() {
? pathname === "/"
: pathname.startsWith(href);
return (
<Link
<a
key={href}
href={href}
onClick={() => { if (window.innerWidth < 640) setSidebarOpen(false); }}
onClick={closeSidebarOnMobile}
className={`flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-semibold transition-all ${
isActive
? "bg-coral/15 text-coral border-2 border-coral"
Expand All @@ -88,7 +91,7 @@ export function Sidebar() {
>
<Icon size={18} className={isActive ? "text-coral" : "opacity-60"} />
{label}
</Link>
</a>
);
})}
</nav>
Expand Down Expand Up @@ -151,10 +154,10 @@ export function Sidebar() {
{ href: "/billing", icon: CreditCard, label: "Billing" },
{ href: "/settings", icon: Settings, label: "Settings" },
].map(({ href, icon: Icon, label }) => (
<Link
<a
key={href}
href={href}
onClick={() => { if (window.innerWidth < 640) setSidebarOpen(false); }}
onClick={closeSidebarOnMobile}
className={`flex items-center gap-3 px-3 py-2 rounded-lg text-sm transition-all ${
pathname === href
? "bg-bg-elevated text-text-primary font-semibold"
Expand All @@ -163,7 +166,7 @@ export function Sidebar() {
>
<Icon size={16} className="opacity-50" />
{label}
</Link>
</a>
))}
</nav>

Expand Down
Loading