Skip to content

fix(theme): sidebar drawer through tablet, persistent rail only at xl #61

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
mmorerasanchez merged 3 commits into from
Jun 2, 2026
Merged

fix(theme): sidebar drawer through tablet, persistent rail only at xl #61

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3f0b833
fix(pages): align content blocks across overview and ai, match overvi…
mmorerasanchez Jun 2, 2026
31d9114
fix(theme): make sidebar a drawer through tablet, persistent rail onl…
mmorerasanchez Jun 2, 2026
6a28a4e
fix(theme): move remaining sidebar rail handle hit-area to xl breakpoint
mmorerasanchez Jun 2, 2026
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
4 changes: 2 additions & 2 deletions src/components/ShowcaseLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,13 +109,13 @@ export function ShowcaseLayout() {
<div className="flex min-w-0 flex-1 flex-col">
<header className="sticky top-0 z-sticky flex h-header items-center justify-between gap-2 border-b border-border bg-surface px-4">
<div className="flex min-w-0 items-center gap-2 sm:gap-3">
<SidebarTrigger className="lg:hidden" />
<SidebarTrigger className="xl:hidden" />
<Logo size={24} />
<TopbarWordmark />
</div>
<ThemeToggle />
</header>
<main id="main-scroll" className="flex-1 overflow-y-auto px-4 py-6 sm:px-6 sm:py-8 lg:px-10">
<main id="main-scroll" className="flex-1 overflow-y-auto px-4 py-6 sm:px-6 sm:py-8 xl:px-10">
<div className="mx-auto w-full max-w-5xl">
<Outlet />
</div>
Expand Down
12 changes: 6 additions & 6 deletions src/components/ui/sidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -173,7 +173,7 @@ const Sidebar = React.forwardRef<
return (
<div
ref={ref}
className="group peer hidden text-sidebar-foreground md:block"
className="group peer hidden text-sidebar-foreground xl:block"

@coderabbitai coderabbitai Bot Jun 2, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

🛠️ Refactor suggestion | 🟠 Major | 🏗️ Heavy lift

Keep the xl behavior out of the shadcn primitive.

These breakpoint changes fork src/components/ui/sidebar.tsx for app-specific behavior. Please move them into a wrapper/composed sidebar variant so future shadcn updates stay mergeable.

As per coding guidelines, "Never directly modify src/components/ui/ files (shadcn/ui primitives) — extend them via CVA variants instead. Compose ui/ primitives into atoms/molecules; never rebuild primitives from scratch"

Also applies to: 195-195, 278-278, 386-386, 493-499

🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/components/ui/sidebar.tsx` at line 176, The shadcn primitive in Sidebar
has app-specific breakpoint classes (e.g., className="group peer hidden
text-sidebar-foreground xl:block" and other occurrences with "xl:" at the same
file) which must be removed; restore the primitive to baseline by stripping all
"xl:" breakpoint utility classes from the Sidebar primitive JSX (search for the
exact class strings like "xl:block" in this file), then create a composed
wrapper component (e.g., SidebarResponsive or a CVA variant) that imports the
original primitive and applies the xl breakpoint behavior (adds the
xl:block/other xl: classes) so app-specific responsiveness lives outside the ui
primitive; update usages to use the new wrapper where the xl behavior is
required.

data-state={state}
data-collapsible={state === "collapsed" ? collapsible : ""}
data-variant={variant}
Expand All @@ -192,7 +192,7 @@ const Sidebar = React.forwardRef<
/>
<div
className={cn(
"fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex",
"fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear xl:flex",
side === "left"
? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
: "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
Expand Down Expand Up @@ -275,7 +275,7 @@ const SidebarInset = React.forwardRef<HTMLDivElement, React.ComponentProps<"main
ref={ref}
className={cn(
"relative flex min-h-svh flex-1 flex-col bg-background",
"peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow",
"peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] xl:peer-data-[variant=inset]:m-2 xl:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 xl:peer-data-[variant=inset]:ml-0 xl:peer-data-[variant=inset]:rounded-xl xl:peer-data-[variant=inset]:shadow",
className,
)}
{...props}
Expand Down Expand Up @@ -383,7 +383,7 @@ const SidebarGroupAction = React.forwardRef<HTMLButtonElement, React.ComponentPr
className={cn(
"absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
// Increases the hit area of the button on mobile.
"after:absolute after:-inset-2 after:md:hidden",
"after:absolute after:-inset-2 after:xl:hidden",
"group-data-[collapsible=icon]:hidden",
className,
)}
Expand Down Expand Up @@ -490,13 +490,13 @@ const SidebarMenuAction = React.forwardRef<
className={cn(
"absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform peer-hover/menu-button:text-sidebar-accent-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
// Increases the hit area of the button on mobile.
"after:absolute after:-inset-2 after:md:hidden",
"after:absolute after:-inset-2 after:xl:hidden",
"peer-data-[size=sm]/menu-button:top-1",
"peer-data-[size=default]/menu-button:top-1.5",
"peer-data-[size=lg]/menu-button:top-2.5",
"group-data-[collapsible=icon]:hidden",
showOnHover &&
"group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0",
"group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground xl:opacity-0",
className,
)}
{...props}
Expand Down
2 changes: 1 addition & 1 deletion src/hooks/use-mobile.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import * as React from "react";

const MOBILE_BREAKPOINT = 768;
const MOBILE_BREAKPOINT = 1280;

export function useIsMobile() {
const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined);
Expand Down
20 changes: 4 additions & 16 deletions src/pages/OverviewPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,29 +52,21 @@ const paths = [
to: "/ai/claude",
icon: ClaudeIcon,
name: "Claude",
badge: "Anthropic",
desc: "Attach context files and describe your brand to create a customized design system.",
},
{
to: "/ai/vibe-coding",
icon: Heart,
name: "Vibe Coding Tools",
badge: "Lovable · Google Stitch · Replit",
desc: "Fork the repo and prompt your visual direction. No terminal needed.",
name: "Vibe Coding",
},
{
to: "/ai/github",
icon: Github,
name: "Terminal",
badge: "GitHub",
desc: "Edit src/index.css directly, modify context files with your brand and get started with the baseline made.",
},
{
to: "/ai/examples",
icon: Layers,
name: "Examples",
badge: "Violet · Blue · Amber",
desc: "Three worked customizations — token overrides only, no component files touched.",
},
];

Expand Down Expand Up @@ -188,13 +180,9 @@ export default function OverviewPage() {
<item.icon className="h-4 w-4 text-accent" />
<ArrowRight className="h-3.5 w-3.5 text-muted-foreground group-hover:text-accent transition-colors" />
</div>
<div>
<p className="font-display text-sm font-semibold text-foreground group-hover:text-accent transition-colors">
{item.name}
</p>
<p className="font-mono text-xs text-muted-foreground">{item.badge}</p>
</div>
<p className="font-body text-sm text-muted-foreground">{item.desc}</p>
<p className="font-display text-sm font-semibold text-foreground group-hover:text-accent transition-colors">
{item.name}
</p>
</Link>
))}
</div>
Expand Down
Loading