small ui fixes

src/components/AppMenu.vue

@@ -1,21 +1,48 @@
 <script setup lang="ts">
-const menu = [
-  { id: 1, title: 'home', to: '/' },
-  { id: 2, title: 'issues', to: '/issues' },
-  { id: 3, title: 'summary', to: '/summary' },
-  { id: 4, title: 'reports', to: '/reports' },
-]
+import { ref } from 'vue'
+
+interface Props {
+  isAuth: boolean
+}
+
+const { isAuth } = defineProps<Props>()
+
+const menu = ref([
+  {
+    title: 'Home',
+    value: 1,
+    props: { prependIcon: 'mdi-home', to: '/', requiresAuth: false },
+  },
+  {
+    title: 'Issues',
+    value: 2,
+    props: { prependIcon: 'mdi-list-status', to: '/issues', requiresAuth: true },
+  },
+  {
+    title: 'Games',
+    value: 3,
+    props: { prependIcon: 'mdi-view-dashboard', to: '/games', requiresAuth: false },
+  },
+])
 </script>
 
 <template>
-  <v-list class="mt-1" width="200" density="compact">
-    <v-list-item v-for="item in menu" :key="item.id" :to="item.to">
-      <v-list-item-title class="d-flex align-center ga-4">
-        <v-icon icon="mdi-information-outline" />
-        <div>{{ item.title }}</div>
-      </v-list-item-title>
-    </v-list-item>
-  </v-list>
+  <v-menu>
+    <template v-slot:activator="{ props }">
+      <v-app-bar-nav-icon variant="text" density="comfortable" v-bind="props" />
+    </template>
+
+    <v-list class="mt-1" width="200" density="compact">
+      <template v-for="item in menu" :key="item.value">
+        <v-list-item v-if="!item.props.requiresAuth || isAuth === item.props.requiresAuth" :to="item.props.to">
+          <v-list-item-title class="d-flex align-center ga-4">
+            <v-icon :icon="item.props.prependIcon" />
+            <div>{{ item.title }}</div>
+          </v-list-item-title>
+        </v-list-item>
+      </template>
+    </v-list>
+  </v-menu>
 </template>
 
 <style scoped lang="scss"></style>

src/components/IssueDetails.vue

@@ -32,7 +32,7 @@ const activity = ref()
 const { ckey } = defineProps<Props>()
 
 const splitContainer = useTemplateRef<HTMLElement>('splitContainer')
-const { gridTemplate, handleProps } = useSplitPane(splitContainer, { storageKey: 'issue-details' })
+const { gridTemplate, handleProps } = useSplitPane(splitContainer, { storageKey: 'issue-details', min: 0.3, max: 0.7 })
 
 const createdAtFormatted = computed(() => {
   if (!issue.value?.createdAt) return ''

src/components/NavigationMenu.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+interface Props {
+  isAuth: boolean
+}
+
+const { isAuth } = defineProps<Props>()
+
+const menu = ref([
+  {
+    title: 'Home',
+    value: 1,
+    props: { prependIcon: 'mdi-home', to: '/', requiresAuth: false },
+  },
+  {
+    title: 'Issues',
+    value: 2,
+    props: { prependIcon: 'mdi-list-status', to: '/issues', requiresAuth: true },
+  },
+  {
+    title: 'Games',
+    value: 3,
+    props: { prependIcon: 'mdi-view-dashboard', to: '/games', requiresAuth: false },
+  },
+])
+</script>
+
+<template>
+  <v-navigation-drawer rounded="0" width="200" persistent permanent class="pt-4">
+    <template v-for="item in menu" :key="item.value">
+      <v-list-item
+        density="compact"
+        rounded="0"
+        v-if="!item.props.requiresAuth || isAuth === item.props.requiresAuth"
+        :to="item.props.to"
+      >
+        <v-list-item-title class="d-flex align-center ga-4">
+          <v-icon :icon="item.props.prependIcon" />
+          <div>{{ item.title }}</div>
+        </v-list-item-title>
+      </v-list-item>
+    </template>
+  </v-navigation-drawer>
+</template>
+
+<style scoped lang="scss"></style>

src/components/ProjectMenu.vue

@@ -32,7 +32,7 @@ onMounted(async () => {
 
 <template>
   <div v-if="projects.length" class="d-flex align-center ga-2">
-    <div>Project:</div>
+    <div>Current project:</div>
     <v-menu>
       <template v-slot:activator="{ props }">
         <v-btn density="comfortable" v-bind="props" slim>