iqbal/learning-lab-express
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make the sidebar collapsible and let the knowledge graph go full screen

Browse Source 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Iqbal
2026-10-29 10:14:34 +07:00
parent bcd7964e0b
commit 278c66897a
5 changed files with 104 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/styles/theme.css
View File

@@ -377,8 +377,15 @@ dialog::backdrop{background:rgba(16,24,40,.45);backdrop-filter:blur(4px)}
.graph-empty a,.graph-more{color:#84caff}
.graph-more{display:block;font-size:12px;margin:8px 4px 0}
.graph-fullscreen{position:absolute;top:16px;right:316px;z-index:3;display:grid;place-items:center;width:34px;height:34px;padding:0;border:1px solid rgba(255,255,255,.14);border-radius:10px;background:rgba(10,22,40,.6);backdrop-filter:blur(8px);color:#d0d5dd;cursor:pointer;transition:background .15s,color .15s}
.graph-fullscreen:hover{background:rgba(46,144,250,.25);color:#fff}
.graph-fullscreen svg{width:16px;height:16px}
.graph-stage.full{border-radius:0;min-height:0;height:100vh;height:100dvh;box-shadow:none}
.graph-stage.pinned{position:fixed;inset:0;z-index:50}
@media(max-width:900px){
.graph-stage{min-height:0;display:flex;flex-direction:column}
.graph-stage.full{overflow:auto}
.graph-fullscreen{right:16px}
.graph-svg{position:relative;width:100%;height:auto;aspect-ratio:1000/640}
.graph-loading{position:relative;inset:auto;min-height:280px}
.graph-note{position:relative;top:auto;left:auto;margin:16px 16px 0;max-width:none;align-self:flex-start}
@@ -395,3 +402,26 @@ dialog::backdrop{background:rgba(16,24,40,.45);backdrop-filter:blur(4px)}
.activity-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.activity-empty{padding:28px 0;text-align:center}
@media(max-width:1000px){.activity-grid{grid-template-columns:1fr}}
/* Collapsible sidebar: the toggle in the topbar shrinks it to an icon rail (desktop only) */
.sidebar,.workspace-main{transition:width .2s,margin-left .2s}
.sidebar-toggle{flex-shrink:0;margin-right:12px}
.topbar{justify-content:flex-start}.topbar-right{margin-left:auto}
.sidebar-help-icon{align-self:center;margin:auto 0 12px}
@media(min-width:701px){
.sidebar-collapsed .sidebar{width:76px;padding-left:12px;padding-right:12px}
.sidebar-collapsed .workspace-main{margin-left:76px;width:calc(100% - 76px)}
.sidebar-collapsed .sidebar>a>.brand{margin:0 0 24px;justify-content:center}
.sidebar-collapsed .sidebar .brand>span:last-child,
.sidebar-collapsed .workspace>div,.sidebar-collapsed .workspace>svg,
.sidebar-collapsed .sidebar nav button.nav-label,.sidebar-collapsed .nav-text,
.sidebar-collapsed .profile>div{display:none}
.sidebar-collapsed button.workspace{justify-content:center;padding:8px}
.sidebar-collapsed .workspace-menu{right:auto;width:240px}
.sidebar-collapsed .sidebar nav :is(button,a){justify-content:center;padding:11px 0}
.sidebar-collapsed .sidebar nav .nav-items~.nav-items>:first-child{margin-top:12px}
.sidebar-collapsed .profile{flex-direction:column;padding-left:0;padding-right:0}
.sidebar-collapsed .profile>.icon-btn{margin-left:0}
}
@media(max-width:700px){.sidebar-toggle,.sidebar-help-icon{display:none}}
@media(prefers-reduced-motion:reduce){.sidebar,.workspace-main{transition:none}}