Tweak navigation

This commit is contained in:
2024-12-08 00:23:28 +00:00
parent 94a818beda
commit 39625a7d82
2 changed files with 2294 additions and 1856 deletions

3902
WebDisplay/pnpm-lock.yaml generated

File diff suppressed because it is too large Load Diff

View File

@@ -1,52 +1,35 @@
<template> <template>
<v-app> <v-app>
<v-app-bar
title="Home Monitor"
color="primary">
<template v-slot:prepend>
<v-app-bar-nav-icon
v-show="!mdAndUp"
@click="drawer = !drawer"></v-app-bar-nav-icon>
</template>
</v-app-bar>
<v-navigation-drawer <v-navigation-drawer
mobile-breakpoint="md" rail
:expand-on-hover="mdAndUp" permanent>
:rail="mdAndUp"
:model-value="mdAndUp ? true : drawer">
<v-list <v-list
density="compact" density="compact"
nav> nav>
<v-list-item <v-list-item
prepend-icon="mdi-information-outline" prepend-icon="mdi-information-outline"
title="Current" title="Current"
to="/" to="/">
@click="drawer = false">
</v-list-item> </v-list-item>
<v-list-item <v-list-item
prepend-icon="mdi-chart-box-outline" prepend-icon="mdi-chart-box-outline"
title="Summary" title="Summary"
to="summary" to="summary">
@click="drawer = false">
</v-list-item> </v-list-item>
<v-list-item <v-list-item
prepend-icon="mdi-sun-thermometer" prepend-icon="mdi-sun-thermometer"
title="Outdoor" title="Outdoor"
to="outdoor" to="outdoor">
@click="drawer = false">
</v-list-item> </v-list-item>
<v-list-item <v-list-item
prepend-icon="mdi-home-analytics" prepend-icon="mdi-home-analytics"
title="Indoor" title="Indoor"
to="indoor" to="indoor">
@click="drawer = false">
</v-list-item> </v-list-item>
<v-list-item <v-list-item
prepend-icon="mdi-home-lightning-bolt-outline" prepend-icon="mdi-home-lightning-bolt-outline"
title="Power" title="Power"
to="power" to="power">
@click="drawer = false">
</v-list-item> </v-list-item>
</v-list> </v-list>
</v-navigation-drawer> </v-navigation-drawer>
@@ -58,10 +41,5 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from 'vue';
import { useDisplay } from 'vuetify';
const drawer = ref(false);
const { mdAndUp } = useDisplay();
</script> </script>