Split left fullwidth

<div class="min-h-screen bg-muted/30 lg:h-[100dvh] lg:overflow-hidden" style="--layout-max-width: 1920px;">
  <div class="mx-auto grid min-h-screen w-full max-w-[var(--layout-max-width)] grid-cols-1 lg:grid-cols-[17rem_minmax(0,1fr)] bg-background shadow-sm lg:h-[100dvh] lg:min-h-0 lg:overflow-hidden">

      <aside class="hidden h-[100dvh] overflow-x-hidden overflow-y-auto border-border bg-muted/20 lg:border-r lg:block">
        <div id="layout-side-panel-content" class="flex min-h-full min-w-0 flex-col p-4">
          <div class="border-b border-border pb-4">
            <a href="/" class="font-semibold">Product</a>
            <p class="mt-1 text-sm text-muted-foreground">Workspace navigation</p>
          </div>

          <nav class="flex-1 py-4">
            <%- include('ui/nav', { orientation: 'vertical', items: navItems }) %>
          </nav>

          <div class="border-t border-border pt-4">
            <button class="ui-btn ui-btn-outline ui-btn-color-primary ui-btn-sm w-full">Action</button>
          </div>
        </div>
      </aside>
      <section class="flex min-h-screen min-w-0 flex-col lg:h-[100dvh] lg:min-h-0 lg:overflow-hidden">
        <div class="border-b border-border bg-background/95 p-3 lg:hidden">
          <button id="layout-nav-trigger"
                  data-ui="drawer-trigger"
                  data-target="layout-nav-drawer"
                  class="ui-btn ui-btn-outline ui-btn-color-primary ui-btn-sm"
                  hidden>
            Navigation
          </button>
        </div>

        <main class="min-w-0 flex-1 lg:min-h-0 lg:overflow-y-auto">
          <div class="p-4 sm:p-6 lg:p-8">
            <%- body %>
          </div>
          <footer id="template-footer" class="shrink-0 border-t border-border bg-background/95">
          <div class="flex min-h-14 items-center justify-between gap-4 px-4 text-sm text-muted-foreground sm:px-6">
            <span>Footer</span>
            <a href="/settings">Settings</a>
          </div>
        </footer>
        </main>
      </section>
  </div>


  <%- include('ui/drawer', {
    id:        'layout-nav-drawer',
    title:     'Navigation',
    titleIcon: 'panel-left',
    side:      'left',
    width:     { base: 'calc(100vw - 2rem)', sm: '22rem' },
    responsive: {
      source:     '#layout-side-panel-content',
      breakpoint: 'lg',
      controls:   '#layout-nav-trigger',
    },
  }) %>
</div>