ppreeper/webtemplate
1
0
Fork 0
Code Issues 33 Projects Releases Packages Wiki Activity

26: Sidebar — collapsible left app tray (3 modes) #27

New issue
Open
opened 2026-07-05 00:45:32 -06:00 by ppreeper · 0 comments
ppreeper commented 2026-07-05 00:45:32 -06:00
Owner
Copy link

Description

Build the left collapsible sidebar — inspired by muk_web_appsbar's AppsBar.

Three Modes

Mode Width Content CSS Class
Large 200px Icon + text .sidebar-large
Small 50px Icon only .sidebar-small
Hidden 0 None .sidebar-hidden

Toggle button at top of sidebar cycles through modes. State persisted to localStorage.

Spec

type SidebarProps struct {
    Apps       []AppItem
    ActiveApp  string    // app ID
    Logo       string    // optional company logo at bottom
    OnSelect   func(appID string)
}

type AppItem struct {
    ID    string
    Name  string
    Icon  templ.Component   // SVG or img
    URL   string
    Active bool
}

<aside class="sidebar" t-att-class="sidebarModeClass">
  <div class="sidebar-toggle" t-on-click="toggleMode">
    <i class="fa fa-bars" />
  </div>
  <nav class="sidebar-menu">
    {apps list, each with icon + name}
  </nav>
  <div class="sidebar-logo">
    <img src="{logo}" />
  </div>
</aside>

References

PRD-003 §2 sidebar
muk_web_appsbar: appsbar.xml, appsbar.scss, appsbar.js
Three modes: .mk_sidebar_type_large, .mk_sidebar_type_small, .mk_sidebar_type_invisible

## Description Build the left collapsible sidebar — inspired by muk_web_appsbar's `AppsBar`. ## Three Modes | Mode | Width | Content | CSS Class | |------|-------|---------|-----------| | Large | 200px | Icon + text | `.sidebar-large` | | Small | 50px | Icon only | `.sidebar-small` | | Hidden | 0 | None | `.sidebar-hidden` | Toggle button at top of sidebar cycles through modes. State persisted to localStorage. ## Spec ```go type SidebarProps struct { Apps []AppItem ActiveApp string // app ID Logo string // optional company logo at bottom OnSelect func(appID string) } type AppItem struct { ID string Name string Icon templ.Component // SVG or img URL string Active bool } ``` ```html <aside class="sidebar" t-att-class="sidebarModeClass"> <div class="sidebar-toggle" t-on-click="toggleMode"> <i class="fa fa-bars" /> </div> <nav class="sidebar-menu"> {apps list, each with icon + name} </nav> <div class="sidebar-logo"> <img src="{logo}" /> </div> </aside> ``` ## References PRD-003 §2 sidebar muk_web_appsbar: appsbar.xml, appsbar.scss, appsbar.js Three modes: .mk_sidebar_type_large, .mk_sidebar_type_small, .mk_sidebar_type_invisible
Sign in to join this conversation.
No Branch/Tag specified
Branches Tags
main
No results found.
Labels
Clear labels
No items
No labels
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
ppreeper/webtemplate#27
No description provided.