You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
ui/src/pages/Editor.vue

58 lines
1.4 KiB

<template>
<q-layout view="hHh Lpr fff">
<q-header reveal bordered class="bg-primary text-white" height-hint="98">
<q-toolbar>
<q-btn dense flat round icon="menu" @click="toggleLeftDrawer" />
<q-toolbar-title>
<q-avatar>
<img src="https://cdn.quasar.dev/logo-v2/svg/logo-mono-white.svg" />
</q-avatar>
Title
</q-toolbar-title>
</q-toolbar>
<q-tabs align="left">
<q-route-tab to="/Scratch" label="Scratch" />
<q-route-tab to="/Editor" label="Editor" />
</q-tabs>
</q-header>
<q-drawer show-if-above v-model="leftDrawerOpen" side="left" bordered>
<div class="column" style="height: 100%">
<div class="col">
variables
</div>
<div class="col">
<q-separator />
function
</div>
</div>
<!-- drawer content -->
</q-drawer>
<q-page-container>
<WrapperBox />
</q-page-container>
<q-footer reveal elevated class="bg-grey-8 text-white">
<q-toolbar>
<q-toolbar-title>
<div>Status</div>
</q-toolbar-title>
</q-toolbar>
</q-footer>
</q-layout>
</template>
<script setup lang="ts">
import { ref } from "vue";
import WrapperBox from "../components/WrapperBox.vue";
const leftDrawerOpen = ref(false);
function toggleLeftDrawer() {
leftDrawerOpen.value = !leftDrawerOpen.value;
}
</script>