base structure

ui/src/layouts/panelLayout.vue

@@ -1,26 +1,53 @@
 <template>
   <q-layout view="lHh Lpr lFf" style="background-color: #f8fafc;">
-    <q-header class="bg-white q-py-sm" bordered>
-      <q-toolbar>
+    <q-drawer
+      v-model="ld.leftDrawerOpen"
+      show-if-above
+      bordered
+      content-class="bg-grey-1"
+    >
+      <q-scroll-area class="fit">
+        <q-list>
+          <q-item-label header>
+            <q-img src="notitek.png" width="120px" class="q-mb-lg"/>
+            <br/>
+            Bordro Eşleme
+            <br/>
+            {{ $VERSION.version }}
+            <span style="font-size:0.7rem;">
+                {{ $VERSION.build }}
+            </span>
+          </q-item-label>
 
-        <q-toolbar-title>
-          <q-img src="logo.png" width="120px" fit="contain"/>
-        </q-toolbar-title>
-
-        <q-btn
-          round
-          flat
-          class="on-right"
-          icon="logout"
-          color="pcolor3"
-          @click="logout"
-        />
+          <template v-for="m in ld.menu" :key="m.grantKey">
+            <q-item :to="m.to" v-if="!m.children">
+              <q-item-section avatar v-if="m.icon">
+                <q-icon :name="m.icon"/>
+              </q-item-section>
+              <q-item-section>
+                <q-item-label>{{ m.label }}</q-item-label>
+              </q-item-section>
+            </q-item>
+            <q-expansion-item
+              v-else
+              :icon="m.icon"
+              :label="m.label"
+            >
+              <q-item v-for="c in m.children" :key="c.grantKey" :to="c.to" exact :inset-level=".5">
+                <q-item-section avatar v-if="c.icon">
+                  <q-icon :name="c.icon"/>
+                </q-item-section>
+                <q-item-section>
+                  <q-item-label>{{ c.label }}</q-item-label>
+                </q-item-section>
+              </q-item>
+            </q-expansion-item>
+          </template>
 
 
-
-      </q-toolbar>
-    </q-header>
-
+        </q-list>
+      </q-scroll-area>
+    </q-drawer>
 
     <q-page-container>
       <router-view/>
@@ -29,11 +56,23 @@
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { $VERSION } from 'boot/version'
+import { inject, reactive } from 'vue'
 import { useLoginStore } from 'stores/login'
+import { menu } from 'src/lib/menu'
 
 const loginStore = useLoginStore()
 
+const ld = reactive({
+  leftDrawerOpen: true,
+  menu: menu(),
+})
+
+const bus = inject('bus') // inside setup()
+bus.on('toggleLeftDrawerOpen', () => {
+  ld.leftDrawerOpen = !ld.leftDrawerOpen
+})
+
 const logout = function () {
   loginStore.logout()
 }