mirror of
https://github.com/amir20/dozzle.git
synced 2025-12-24 06:28:42 +01:00
14fc1190a8
* feat: updates host menu to be part of side menu * updates routes to be host/id * fixes go tests * fixes js tests * fixes typescheck * fixes int tests * fixes mobile * fixes bug in merging containers * fixed minor bug with menu
72 lines
1.8 KiB
Vue
72 lines
1.8 KiB
Vue
<template>
|
|
<aside>
|
|
<div class="columns is-marginless">
|
|
<div class="column is-paddingless">
|
|
<h1>
|
|
<router-link :to="{ name: 'index' }">
|
|
<svg class="logo">
|
|
<use href="#logo"></use>
|
|
</svg>
|
|
</router-link>
|
|
|
|
<small class="subtitle is-6 is-block mb-4" v-if="hostname">
|
|
{{ hostname }}
|
|
</small>
|
|
</h1>
|
|
</div>
|
|
</div>
|
|
<div class="columns is-marginless">
|
|
<div class="column is-narrow py-0 pl-0 pr-1">
|
|
<button class="button is-rounded is-small" @click="$emit('search')" :title="$t('tooltip.search')">
|
|
<span class="icon">
|
|
<mdi:light-magnify />
|
|
</span>
|
|
</button>
|
|
</div>
|
|
<div class="column is-narrow py-0" :class="secured ? 'pl-0 pr-1' : 'px-0'">
|
|
<router-link
|
|
:to="{ name: 'settings' }"
|
|
active-class="is-active"
|
|
class="button is-rounded is-small"
|
|
:aria-label="$t('title.settings')"
|
|
>
|
|
<span class="icon">
|
|
<mdi:light-cog />
|
|
</span>
|
|
</router-link>
|
|
</div>
|
|
<div class="column is-narrow py-0 px-0" v-if="secured">
|
|
<a class="button is-rounded is-small" :href="`${base}/logout`" :title="$t('button.logout')">
|
|
<span class="icon">
|
|
<mdi:light-logout />
|
|
</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<side-menu class="mt-4"></side-menu>
|
|
</aside>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
const { base, secured, hostname } = config;
|
|
</script>
|
|
<style scoped lang="scss">
|
|
aside {
|
|
padding: 1em;
|
|
height: 100vh;
|
|
overflow: auto;
|
|
position: fixed;
|
|
width: inherit;
|
|
|
|
.is-hidden-mobile.is-active {
|
|
display: block !important;
|
|
}
|
|
}
|
|
|
|
.logo {
|
|
width: 122px;
|
|
height: 54px;
|
|
fill: var(--logo-color);
|
|
}
|
|
</style>
|