Improved app layout a bit

This commit is contained in:
Stefan Zermatten
2020-03-13 14:56:59 +02:00
parent 7fe2292c2a
commit e0e7693fff
3 changed files with 19 additions and 15 deletions

View File

@@ -1,6 +1,6 @@
<template> <template>
<v-app :dark="darkMode" :light="!darkMode"> <v-app :dark="darkMode" :light="!darkMode">
<v-navigation-drawer app v-model="drawer"> <v-navigation-drawer app v-model="drawer" clipped>
<Sidebar/> <Sidebar/>
</v-navigation-drawer> </v-navigation-drawer>
<router-view></router-view> <router-view></router-view>

View File

@@ -1,18 +1,5 @@
<template> <template>
<div class="sidebar"> <div class="sidebar">
<v-toolbar color="secondary" dark>
<v-layout row align-center v-if="signedIn">
{{userName}}
<v-spacer></v-spacer>
<v-tooltip bottom>
<v-btn flat icon slot="activator" to="/account"><v-icon>settings</v-icon></v-btn>
<span>Account Settings</span>
</v-tooltip>
</v-layout>
<v-layout row justify-center v-else="signedIn">
<v-btn flat to="/sign-in">Sign in</v-btn>
</v-layout>
</v-toolbar>
<v-alert <v-alert
:value="showWarning" :value="showWarning"
type="warning" type="warning"
@@ -25,7 +12,24 @@
<v-btn @click="showWarning = false">I won't</v-btn> <v-btn @click="showWarning = false">I won't</v-btn>
</div> </div>
</v-alert> </v-alert>
<v-layout row justify-center v-if="!signedIn">
<v-btn flat to="/sign-in">Sign in</v-btn>
</v-layout>
<v-list> <v-list>
<v-list-tile v-if="signedIn">
<v-list-tile-content>
<v-list-tile-title>
{{userName}}
</v-list-tile-title>
</v-list-tile-content>
<v-list-tile-action>
<v-tooltip bottom>
<v-btn flat icon slot="activator" to="/account"><v-icon>settings</v-icon></v-btn>
<span>Account Settings</span>
</v-tooltip>
</v-list-tile-action>
</v-list-tile>
<v-list-tile <v-list-tile
v-for="(link, i) in links" v-for="(link, i) in links"
v-if="link.vif || link.vif === undefined" v-if="link.vif || link.vif === undefined"

View File

@@ -1,6 +1,6 @@
<template> <template>
<div> <div>
<v-toolbar app color="secondary" dark> <v-toolbar app color="secondary" dark clipped-left>
<v-btn flat icon @click="toggleDrawer"> <v-btn flat icon @click="toggleDrawer">
<v-icon>menu</v-icon> <v-icon>menu</v-icon>
</v-btn> </v-btn>