Template

This is a VTT application, with the following top-level entities: Map, Campaign, System, Character.

Level 1 nav is a left-side strip with icons, tooltips describing the icon on hover, one per top level item.

The landing page for each route is a list of entities, underneath a header saying what entity (i.e. 'Campaigns'), a Create button (with a dropdown for alternate Creation options beyond the default), and some light filtering and sorting for the entity list.

Entity lists are cards; some have images, but most don't, so these will tend to be wide rectangles which arrange key properties of the entity in a readable, artful way. Each card links to a detail page.

On the detail pages, the same header component from the list page shows a title such as "Campaign: {campaignName", with a left-arrow icon button above it linking back to the list page.

The detail page body content can be a placeholder at this point, because it varies quite a bit between entities.

Each detail page has a left-mounted level 2 nav (left edge abuts the right edge of the level 1 nav), which has context-specific navigation. For example, Campaign and System both have the same level 2 nav with items:

Properties Functions Variables Conditions Light Sources etc The main content area should be 40-60rem, centered in the negative space not taken up by any nav spaces.

On large desktop monitors, there is enough room for a right-mounted aside (visually distinct from the flush-mounted nav, more like a traditional aside), which offers "bonus" nav. For example, Campaigns and Systems detail pages can have a bonus nav to switch to sibling campaigns/systems. For monitors that don't have enough room, this can be accessed as a popup.

On portrait phone-sized monitors, level 1 nav becomes bottom-mounted, and level 2 is in a popup, spawned by the same bottom-mounted nav as level 1 in a hamburger button.

For now I want to establish a common design language and patterns for that described above. When that foundation is complete, we'll move onto detail pages.

I'd like to see mobile, mid-size, and full-size mockups for each detail and list page