upd: qAppLayout uses mdNavRail

Quasi-Studio · Nov 24, 2023 · 3fb6655 · 3fb6655
1 parent 8c62fdb
commit 3fb6655
Showing 1 changed file with 43 additions and 12 deletions.
diff --git a/packages/runtime/src/components/appLayout.r.ts b/packages/runtime/src/components/appLayout.r.ts
@@ -1,40 +1,71 @@
 /// <reference types="vite/client" />
-import { ComponentContext, Content, OutputComponent } from "refina";
+import { ComponentContext, Content, HTMLElementComponent, OutputComponent, ref } from "refina";
 import QuasiRuntime from "../plugin";
 import { Direction, component, content, textProp } from "../types";
 
 export default component({
   displayName: () => "App layout",
+  model: "AppLayoutModel",
   contents: {
     title: content("title", "as-primary"),
     topBar: content("top bar", "as-socket"),
-    main: content("main", "as-socket", Direction.BOTTOM),
+    content: content("content", "as-socket", Direction.BOTTOM),
   },
   props: {
     class: textProp("class"),
   },
 });
 
+export const currentNavSymbol = Symbol("currentNav");
+
 export interface AppLayoutProps {
   class: string;
   title: string;
   topBar: Content;
-  main: Content;
+  content: Content;
+}
+
+export class AppLayoutModel {
+  renderingState: "nav" | "main";
+  items: [value: string, iconName?: string][];
+  current: string;
 }
 
 @QuasiRuntime.outputComponent("qAppLayout")
 export class QAppLayout extends OutputComponent {
-  main(_: ComponentContext, props: AppLayoutProps): void {
+  navRailRef = ref<HTMLElementComponent<"mdui-navigation-rail">>();
+  main(_: ComponentContext, model: AppLayoutModel, props: AppLayoutProps): void {
     _.$cls(props.class);
-    _.mdTopAppBar(_ => {
-      _.mdTopAppBarTitle(
-        _ =>
-          _.$css`user-select:none;text-decoration:none;color:inherit` &&
-          _._a({ href: window.__QUASI_PREVIEW__ ? "" : import.meta.env.BASE_URL }, props.title),
-      );
-      _.embed(props.topBar);
+    _.$css`position:fixed;width:100%;height:100%`;
+    _.mdLayout(_ => {
+      _.mdTopAppBar(_ => {
+        _.mdTopAppBarTitle(
+          _ =>
+            _.$css`user-select:none;text-decoration:none;color:inherit` &&
+            _._a({ href: window.__QUASI_PREVIEW__ ? "" : import.meta.env.BASE_URL }, props.title),
+        );
+        _.embed(props.topBar);
+      });
+
+      _.provide(currentNavSymbol, model, _ => {
+        model.renderingState = "nav";
+        model.items = [];
+        _.embed(props.content);
+      });
+
+      _.$css`height:100%`;
+      model.current = _.mdNavRail(model.items);
+
+      _.mdLayoutMain(_ => {
+        _.$css`padding:18px;padding-right:64px`;
+        _._div({}, _ =>
+          _.provide(currentNavSymbol, model, _ => {
+            model.renderingState = "main";
+            _.embed(props.content);
+          }),
+        );
+      });
     });
-    _.mdLayoutMain(props.main);
   }
 }