[{"data":1,"prerenderedAt":155},["ShallowReactive",2],{"$fJ37VhcICjOHvvKdcppBVZ1e2vW2QHBe4f6DLI3C3puk":3},{"item":4,"meta":91},{"id":5,"title":6,"alt":7,"date":8,"design-phase":9,"designer":10,"era":11,"extension":12,"featured":13,"gallery":14,"image":16,"meta":36,"narrative":78,"project":79,"source-file":78,"stem":80,"subject":81,"tags":82,"tool":88,"type":89,"__hash__":90},"archive\u002Farchive\u002F2026-q3\u002F2026-09-26-c98-nav-submenu.md","Nav Submenu — Inventory Opens by URL","qdash \u002Finventory\u002Fmodels: THE FLEET sits second in the sidebar, and Inventory has its nine listing pages open beneath it in italic on a hairline rail, with Models lit in grape.","2026-09-26","1.0","mark","seed","md",false,[15,18,21,24,27,30,33],{"src":16,"alt":17},"\u002Fcycles\u002Fdesign\u002Fc98-qdash-models.png","Models listing: the submenu is open because the route is under \u002Finventory. Models is grape and the Inventory row is back to ink.",{"src":19,"alt":20},"\u002Fcycles\u002Fdesign\u002Fc98-qdash-inventory.png","The Inventory page itself, now titled 'Inventory': the parent row is grape and no child is lit.",{"src":22,"alt":23},"\u002Fcycles\u002Fdesign\u002Fc98-qdash-model-detail.png","Model detail for claude-sonnet-4-6: sub-items prefix-match, so Models stays lit on its own detail pages.",{"src":25,"alt":26},"\u002Fcycles\u002Fdesign\u002Fc98-qdash-overview.png","Fleet Overview: outside \u002Finventory the submenu collapses to its parent row.",{"src":28,"alt":29},"\u002Fcycles\u002Fdesign\u002Fc98-submenu-demo.png","The NavVerticalSubmenu demo at its dialed defaults (italic, med 13, 1px gap), with its DevCanvas controls.",{"src":31,"alt":32},"\u002Fcycles\u002Fdesign\u002Fc98-submenu-demo-full.png","The demo in full: the interactive sidebar, then the empty, minimal, typical, unmatched, button, controlled and overflow scenarios.",{"src":34,"alt":35},"\u002Fcycles\u002Fdesign\u002Fc98-submenu-demo-tuned.png","The tuning knobs pushed to black, 16px and an 8px gap. Only the children change. These are the controls Mark used to dial the defaults.",{"body":37},{"type":38,"value":39,"toc":74},"minimark",[40,60,71],[41,42,43,44,48,49,55,56,59],"p",{},"Inventory had grown into a hub with nine listing pages under it, but the qcontrol sidebar was flat. The only way to reach those pages from it was a dev toggle. c98 added one member to the layer's ",[45,46,47],"code",{},"NavVertical"," family, ",[50,51,52],"strong",{},[45,53,54],{},"NavVerticalSubmenu",": a parent row with a list of child rows that opens whenever the route is under the parent's ",[45,57,58],{},"to",". The sidebar now says where you are without anyone clicking to expand anything.",[41,61,62,63,66,67,70],{},"Children are ordinary ",[45,64,65],{},"NavVerticalItem","s. They pick up the sub treatment by injection (italic, tighter rows, a ",[45,68,69],{},"stroke-strong"," rail matched to the reference pixel), so existing call sites don't change. Weight, size and row gap were exposed as props and dialed in on the demo's controls to med 13 with a 1px gap. In qdash, the Inventory item became the first submenu, THE FLEET moved up to second, and the Inventory page lost its \"Harness\" prefix.",[41,72,73],{},"Captured 2026-09-26: the demo on the design site's dev server, and qdash on its own :3030 server against the live local layer. The component is unreleased until the next layer bump.",{"title":75,"searchDepth":76,"depth":76,"links":77},"",2,[],null,"dashboard","archive\u002F2026-q3\u002F2026-09-26-c98-nav-submenu","product",[83,84,85,86,87],"c98","layer","qcontrol","navigation","components","Playwright capture","screengrab","do0ozagfBoWkrVvAscY1A77fvUDp9Mm5-yfmmwQDWvg",{"eras":92,"designers":115,"subjects":123,"projects":143},[93,100,107,110],{"id":94,"name":95,"description":96,"startDate":97,"endDate":98,"order":99},"ideation","Ideation","First dashboard and site mockups, pre-brand.","2022-01","2025-09",0,{"id":101,"name":102,"description":103,"startDate":104,"endDate":105,"order":106},"pre-seed","Pre-Seed","Establishing identity, voice, and visual language.","2025-10","2026-01",1,{"id":11,"name":108,"description":109,"startDate":105,"order":76},"Seed","Building the product and its interface.",{"id":111,"name":112,"description":113,"order":114},"post-seed","Post-Seed","Scaling the product and expanding reach.",3,[116,119],{"id":10,"name":117,"role":118},"Mark","Founder \u002F Design",{"id":120,"name":121,"role":122},"sarah","Sarah Parson","Illustration \u002F Design",[124,128,132,135,139],{"id":125,"label":126,"description":127},"front-site","Front Site","Public website and marketing pages.",{"id":129,"label":130,"description":131},"pitch-deck","Pitch Deck","Investor and partner presentations.",{"id":81,"label":133,"description":134},"Product","Application UI and dashboard.",{"id":136,"label":137,"description":138},"cli","Command Line Tools","Terminal interfaces and output.",{"id":140,"label":141,"description":142},"brand-system","Brand System","Style guide, brand documents, MCP server.",[144,148,151],{"id":145,"label":146,"description":147},"brochure-site","Brochure Site","Public marketing website — messaging, landing pages, campaigns.",{"id":79,"label":149,"description":150},"Dashboard","Product application UI — the tool customers use.",{"id":152,"label":153,"description":154},"brand","Brand","Brand system, style guides, design tokens, and tooling.",1794599288323]