r2-dev-layout

Create a responsive frontend layout with a YAML-driven sidebar and route-aware navigation.

2|1|Updated Nov 20, 2025

Search Tags:#layout #frontend #navigation #tailwind #menu #leptos

Ready to run

npx skills add https://github.com/silentbalanceyh/r2mo-lain --skill r2-dev-layout

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: r2-dev-layout
Source: https://github.com/silentbalanceyh/r2mo-lain/tree/main/skills/r2-dev-layout
Command: npx skills add https://github.com/silentbalanceyh/r2mo-lain --skill r2-dev-layout

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provides a reusable, scalable application layout with global navigation, a dynamic left menu driven by YAML definitions, and a consistent content area for authenticated users and business modules.

Core Features & Use Cases

Top navigation bar with system title/logo, user info, and logout
Left sidebar menu driven from menu.yaml (dynamic, collapsible)
Main content area with page outlet
User profile display and dropdown
Logout functionality
Menu highlighting based on current route and responsive behavior
Menu state management and responsive layout for desktop/tablet/mobile
Design-system-aligned styling using Tailwind and a shared structure

Quick Start

Create a new app layout by implementing src/components/layout.rs and wiring it to your menu.yaml definitions.

Frequently Asked Questions about r2-dev-layout

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I create a dynamic sidebar menu from a YAML file in a Leptos app?▼

You can build a menu-driven app layout by defining your navigation structure in menu.yaml and wiring it into a Leptos layout component that renders the sidebar dynamically from those YAML definitions.

How does route-aware menu highlighting work with Leptos Router and Tailwind?▼

Route-aware menu highlighting tracks the current route via Leptos Router integration and AppContext, applying Tailwind-based design-system styling to the active menu item matching the URL path.

Can I build a responsive frontend layout for desktop, tablet, and mobile using Tailwind and Leptos?▼

Yes, you can build responsive frontend layouts for desktop, tablet, and mobile using Tailwind and Leptos by managing menu state and applying responsive utility classes across Sidebar, TopBar, and Content components.

What's the best way to structure a reusable application layout with global navigation and a collapsible sidebar?▼

The best way to structure a reusable application layout is to separate TopBar, Sidebar, and Content into distinct components, driving the collapsible sidebar dynamically from a central menu.yaml configuration.

Do I need AppContext integration to manage user profile display and logout in a Leptos layout?▼

AppContext integration is needed to manage user profile display and logout in a Leptos layout, providing the shared application state required to handle authentication data across the TopBar and content modules.