init repo

src/App.vue

@@ -0,0 +1,78 @@
+<template>
+  <q-layout view="lHh lpr lff">
+    <q-header v-if="!isLoginPage" reveal class="bg-primary text-white">
+      <q-toolbar>
+        <Button dense flat round icon="mdi-menu" @click="toggleLeftDrawer" />
+        <q-toolbar-title> {{ currentRouteTitle }} </q-toolbar-title>
+        <Toggle v-model="darkMode" @toggle="toggleDarkMode" />
+      </q-toolbar>
+    </q-header>
+
+    <q-drawer v-if="!isLoginPage" show-if-above v-model="leftDrawerOpen" side="left" bordered>
+      <div class="row q-pa-md items-center">
+        <div class="col q-ml-xs title">
+          <span>Clipper AI</span>
+        </div>
+      </div>
+
+      <q-separator />
+
+      <q-list>
+        <q-item v-for="route in routes" clickable v-ripple :to="route.path">
+          <q-item-section>{{ route.title }}</q-item-section>
+        </q-item>
+      </q-list>
+    </q-drawer>
+
+    <q-page-container>
+      <router-view />
+    </q-page-container>
+  </q-layout>
+</template>
+
+<script>
+import { Dark } from "quasar";
+
+import Button from "@components/Button";
+import Toggle from "@components/Toggle";
+
+import { routes } from "./auth/router";
+
+export default {
+  components: {
+    Button,
+    Toggle,
+  },
+  data() {
+    return {
+      leftDrawerOpen: false,
+      darkMode: Dark.isActive,
+      routes,
+    };
+  },
+  methods: {
+    toggleLeftDrawer() {
+      this.leftDrawerOpen = !this.leftDrawerOpen;
+    },
+    toggleDarkMode() {
+      Dark.toggle();
+    },
+  },
+  computed: {
+    currentRouteTitle() {
+      const route = this.$route;
+      return route.meta?.title || route.name || 'Clipper AI';
+    },
+    isLoginPage() {
+      return this.$route.path === '/login';
+    }
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.title {
+  font-size: 24px;
+  color: $primary;
+}
+</style>