Bus UI Shells

SidebarShell combines a navigation rail and main region.

Use SidebarShell for product surfaces that keep a stable left rail beside the active module view.

Public API

Function	`ui.SidebarShell`
Props	`ui.SidebarShellProps`
Use for	Left-rail layouts with required navigation and main content slots.

Example

Loading SidebarShell demo...

Go API

import (
  gx "github.com/busdk/bus-gx/pkg/gx"
  ui "github.com/busdk/bus-ui/pkg/ui"
)

node, err := ui.SidebarShell(ui.SidebarShellProps{
  NavNodes: []gx.Node{
    gx.Element("nav", nil, gx.Text("Module navigation")),
  },
  MainNodes: []gx.Node{
    gx.Element("main", nil, gx.Text("Selected view")),
  },
})

html, err := gx.RenderHTML(node)

In .gx source, wrap the sidebar shell helper so the markup call remains a single uppercase component tag.

In .gx source, the sidebar shell is a visible aside plus main-content markup tree.

.gx source

package shellui

import gx "github.com/busdk/bus-gx/pkg/gx"

type WorkspaceShellProps struct {
  Title string
}

func WorkspaceShell(props WorkspaceShellProps) gx.Node {
  return <section class="sidebar-shell">
  <aside><nav aria-label="Workspace"><a href="/imports/index.html"><Text value={"Imports"}></Text></a></nav></aside>
  <main><h1><Text value={props.Title}></Text></h1></main>
</section>
}

var workspace = <WorkspaceShell title={"Imports"}></WorkspaceShell>