{
    "id": "bhaskar/collapsible-icon-rail-sidebar",
    "kind": "component",
    "title": "Collapsible Icon Rail Sidebar",
    "summary": "App sidebar with workspace switcher, nav items and badges that folds down to a focused icon rail with a smooth width animation.",
    "author": "Admin",
    "stars": 0,
    "url": "https://ownlyplans.com/bhaskar/collapsible-icon-rail-sidebar/",
    "stack": [],
    "tools": [
        "claude-code"
    ],
    "difficulty": "beginner",
    "license": "cc-by-4.0",
    "version": "1.0",
    "overview": "",
    "steps": [],
    "files": [],
    "install": "",
    "how_to_use": "Use the component code (html, css, js, or react) directly, or run the install command.",
    "component": {
        "category": "Navigation",
        "html": "<div class=\"as\"><aside class=\"sb\"><div class=\"ws\"><span class=\"lg\">⌘</span><b class=\"tx\">Acme Inc</b></div><a class=\"ni\"><i>⌕</i><span class=\"tx\">Search</span></a><a class=\"ni\"><i>✦</i><span class=\"tx\">AI Assistant</span></a><a class=\"ni\"><i>✉</i><span class=\"tx\">Inbox</span><u class=\"tx\">4</u></a><small class=\"tx\">WORKSPACES</small><a class=\"ni on\"><i>◉</i><span class=\"tx\">People</span></a><a class=\"ni\"><i>▣</i><span class=\"tx\">Companies</span></a><a class=\"ni\"><i>◎</i><span class=\"tx\">Opportunities</span></a></aside><main><div class=\"tb\"><button class=\"tg\" type=\"button\">▤</button><b>People</b></div><div class=\"bd\"><small>Wednesday, July 29</small><h3>Good morning, Ava.</h3><p>Your workspace stays in place while the navigation folds down to a focused icon rail.</p></div></main></div>",
        "css": ".as{display:flex;width:100%;height:100%;min-height:380px;font-family:system-ui,-apple-system,sans-serif;color:#eee;overflow:hidden}.sb{width:190px;flex:none;background:#141414;border-right:1px solid #222;padding:12px 10px;box-sizing:border-box;display:flex;flex-direction:column;gap:2px;transition:width .45s cubic-bezier(.3,1.1,.4,1);overflow:hidden}.as.c .sb{width:60px}.ws{display:flex;align-items:center;gap:10px;margin-bottom:12px;white-space:nowrap}.lg{width:28px;height:28px;border-radius:8px;background:#f2f2f2;color:#111;display:grid;place-items:center;flex:none}.ni{display:flex;align-items:center;gap:10px;padding:8px;border-radius:9px;font-size:12px;color:#aaa;cursor:pointer;white-space:nowrap}.ni:hover{background:#1c1c1c}.ni.on{background:#222;color:#fff}.ni i{width:16px;text-align:center;font-style:normal;flex:none}.ni u{margin-left:auto;text-decoration:none;font-size:10px;color:#888}.tx{transition:opacity .25s}.as.c .tx{opacity:0}.sb small{font-size:9px;letter-spacing:.12em;color:#666;margin:14px 8px 4px;white-space:nowrap}main{flex:1;min-width:0}.tb{display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid #222;font-size:12px}.tg{background:none;border:0;color:#aaa;font-size:15px;cursor:pointer}.bd{padding:22px 20px}.bd small{font-size:10px;color:#777}.bd h3{margin:6px 0;font-size:20px}.bd p{margin:0;font-size:12px;color:#888;line-height:1.6;max-width:280px}",
        "js": "(function(){var R=document.querySelector(\".as\");R.querySelector(\".tg\").onclick=function(){R.classList.toggle(\"c\")};[].forEach.call(R.querySelectorAll(\".ni\"),function(n){n.onclick=function(){[].forEach.call(R.querySelectorAll(\".ni\"),function(x){x.classList.remove(\"on\")});n.classList.add(\"on\");R.querySelector(\".tb b\").textContent=n.querySelector(\"span\").textContent}})})();",
        "react": "",
        "dependencies": [],
        "install": "",
        "licence_notice": ""
    }
}