87 lines
2.1 KiB
Vue
87 lines
2.1 KiB
Vue
<template>
|
||
<v-app id="inspire">
|
||
<v-app-bar flat>
|
||
<v-container class="mx-auto d-flex align-center justify-center">
|
||
<v-avatar
|
||
class="me-4"
|
||
color="grey-darken-1"
|
||
size="32"
|
||
text="ML"
|
||
></v-avatar>
|
||
<v-chip text="MainLayout"></v-chip>
|
||
<v-btn
|
||
v-for="link in links"
|
||
:key="link"
|
||
:text="link.text"
|
||
variant="text"
|
||
:to="link.to"
|
||
></v-btn>
|
||
|
||
<v-spacer></v-spacer>
|
||
|
||
<v-responsive max-width="160">
|
||
<v-text-field
|
||
density="compact"
|
||
label="Поиск"
|
||
rounded="lg"
|
||
variant="solo-filled"
|
||
flat
|
||
hide-details
|
||
single-line
|
||
></v-text-field>
|
||
</v-responsive>
|
||
</v-container>
|
||
</v-app-bar>
|
||
|
||
<v-main class="bg-grey-lighten-3">
|
||
<v-container>
|
||
<v-row>
|
||
<v-col cols="2">
|
||
<v-sheet rounded="lg">
|
||
<v-list rounded="lg">
|
||
<v-list-item
|
||
v-for="n in 5"
|
||
:key="n"
|
||
:title="`List Item ${n}`"
|
||
link
|
||
></v-list-item>
|
||
|
||
<v-divider class="my-2"></v-divider>
|
||
|
||
<v-list-item
|
||
v-if="auth.user()"
|
||
@click="auth.logout()"
|
||
color="grey-lighten-4"
|
||
title="Выход"
|
||
link
|
||
></v-list-item>
|
||
</v-list>
|
||
</v-sheet>
|
||
</v-col>
|
||
|
||
<v-col>
|
||
<v-sheet
|
||
class="pa-5"
|
||
min-height="70vh"
|
||
rounded="lg"
|
||
>
|
||
<slot></slot>
|
||
</v-sheet>
|
||
</v-col>
|
||
</v-row>
|
||
</v-container>
|
||
</v-main>
|
||
</v-app>
|
||
</template>
|
||
|
||
<script setup>
|
||
import {useAuth} from "vue-auth3";
|
||
|
||
const auth = useAuth()
|
||
const links = [
|
||
{text: 'Главная', to: '/'},
|
||
{text: 'О сервисе', to: '/about'},
|
||
{text: 'Авторизация', to: '/login'},
|
||
|
||
]
|
||
</script> |