skills.rest
EZoneLai
EZoneLaiCOMMUNITY
Explore all skills by this author →
GitHub

rsun-sidebar

Implements collapsible sidebar navigation with section groups and mobile drawer for static HTML pages.

Updated May 20, 2026
Search Tags:#html#javascript#css#navigation#responsive#localstorage#sidebar
One-click install
npx skills add https://github.com/EZoneLai/claude-plugin-ronsunai-os --skill rsun-sidebar-ezonelai
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: rsun-sidebar
Source: https://github.com/EZoneLai/claude-plugin-ronsunai-os/tree/main/commands/rsun-sidebar
Command: npx skills add https://github.com/EZoneLai/claude-plugin-ronsunai-os --skill rsun-sidebar-ezonelai

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building a consistent, collapsible sidebar across multiple static HTML pages requires rewriting the same CSS, HTML, and JavaScript each time, and small mistakes (like overflow conflicts or lost collapse state) break the layout. This Skill provides a complete, copy-paste-ready sidebar component with section collapsing, full sidebar collapse, mobile drawer mode, and localStorage state persistence. ## Core Features & Use Cases - Section Group Collapse: Each sidebar section toggles open/closed via a button, with state remembered per group using unique data-id keys in localStorage. - Full Sidebar Collapse & Mobile Drawer: Desktop users can collapse the entire sidebar to a floating expand pill; on screens under 768px the sidebar becomes a slide-in drawer with a backdrop overlay. - Use Case: When adding a new page to the TRACKER dashboard suite, paste the provided CSS, HTML skeleton, and JS into the page, assign unique data-id values per the naming convention, and the page immediately has a working collapsible sidebar consistent with the rest of the site. ## Quick Start Add a collapsible sidebar to my TRACKER HTML page using the rsun-sidebar component with the standard TRACKER and projects groups.

Frequently Asked Questions about rsun-sidebar

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

FAQPage Schema
How do I add a collapsible sidebar to a static HTML page?▼

Paste the provided CSS block before the closing style tag, insert the sidebar HTML skeleton inside the layout container before the main content, and add the JavaScript toggle functions. Assign each group a unique data-id so its collapse state persists in localStorage.

How to persist sidebar collapse state with localStorage?▼

The toggle functions write keys like 'sb-col' for the full sidebar and 'sbg-{data-id}' for each group into localStorage. An initialization script on page load reads these keys and reapplies the collapsed or closed classes.

How do I make a sidebar work as a mobile drawer?▼

Use a media query at max-width 768px that sets the sidebar to position fixed with translateX(-100%), then toggle a mobile-open class from a hamburger button. Add a backdrop overlay element that closes the drawer when clicked.

Why does my sidebar content disappear during the collapse animation?▼

Setting width to 0 with overflow hidden overrides overflow-y auto, so content is clipped until the transition finishes. This is intentional in this component; do not change the overflow settings on the collapsed state.

Why does the active nav link class get removed on my page?▼

If the page uses a showSection() function that clears active classes, class-based highlighting will be wiped out. Use inline styles on the current page link instead, as this component recommends.

Related Skills

Explore More Software Engineering Skills→
pipixia-labspipixia-labs
38

docs-page

Generate a three-column HTML documentation page from a design brief and DESIGN.md.

Official
Advanced
andersoncollabandersoncollab

navigation-patterns

Define responsive navigation architectures with ARIA, keyboard, and focus management.

Community
Intermediate
saleorsaleor
1.0k

saleor-dashboard-styles

Applies macaw-ui design system styling rules to Saleor Dashboard React components.

Official
Intermediate
markhamsquareventuresmarkhamsquareventures

inertia

Integrate Link and Form components for React-based Laravel Inertia navigation and handling.

Official
Intermediate