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

24: Root layout — CSS Grid shell with NavBar + Sidebar + Content #25

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

Description

Build the root application layout component using CSS Grid — inspired by Odoo's o_web_client and muk_web_appsbar's grid override.

Spec

<div class="o_web_client" style="display: grid; grid-template-areas: 'navbar navbar' 'sidebar content'; grid-template-rows: auto 1fr; grid-template-columns: auto 1fr; height: 100vh;">
  <NavBar />     <!-- grid-area: navbar -->
  <Sidebar />    <!-- grid-area: sidebar -->
  <main>         <!-- grid-area: content; overflow-y: auto -->
    {children}
  </main>
</div>
  • Full viewport height (h-screen)
  • Scroll containment: only main content area scrolls
  • Sidebar width controlled by CSS variable --sidebar-width
  • NavBar fixed-height, no scroll

LayoutComponent

layout.App() {
  <NavBar />
  <Sidebar />
  <main>{ children }</main>
}

References

PRD-003 §1, §3
Odoo: webclient_layout.scss, webclient.xml
muk_web_appsbar: webclient.scss (CSS Grid override)

## Description Build the root application layout component using CSS Grid — inspired by Odoo's `o_web_client` and muk_web_appsbar's grid override. ## Spec ```html <div class="o_web_client" style="display: grid; grid-template-areas: 'navbar navbar' 'sidebar content'; grid-template-rows: auto 1fr; grid-template-columns: auto 1fr; height: 100vh;"> <NavBar /> <!-- grid-area: navbar --> <Sidebar /> <!-- grid-area: sidebar --> <main> <!-- grid-area: content; overflow-y: auto --> {children} </main> </div> ``` - Full viewport height (`h-screen`) - Scroll containment: only main content area scrolls - Sidebar width controlled by CSS variable `--sidebar-width` - NavBar fixed-height, no scroll ## LayoutComponent ```templ layout.App() { <NavBar /> <Sidebar /> <main>{ children }</main> } ``` ## References PRD-003 §1, §3 Odoo: webclient_layout.scss, webclient.xml muk_web_appsbar: webclient.scss (CSS Grid override)
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#25
No description provided.