Files
lightController/src/layouts/MainLayout.vue

40 lines
955 B
Vue

<template>
<q-layout view="lHh Lpr lFf">
<q-header elevated>
<q-toolbar>
<q-btn flat dense round icon="menu" aria-label="Menu" @click="toggleLeftDrawer" />
<q-toolbar-title> Light Control </q-toolbar-title>
<div>Version {{ version }}</div>
</q-toolbar>
</q-header>
<q-drawer v-model="leftDrawerOpen" bordered>
<q-list>
<q-item to="/" clickable v-ripple>
<q-item-section>Home</q-item-section>
</q-item>
<q-item to="/data" clickable v-ripple>
<q-item-section>Data</q-item-section>
</q-item>
</q-list>
</q-drawer>
<q-page-container>
<router-view />
</q-page-container>
</q-layout>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { version } from '../..//package.json';
const leftDrawerOpen = ref(false);
function toggleLeftDrawer() {
leftDrawerOpen.value = !leftDrawerOpen.value;
}
</script>