mirror of
https://github.com/amir20/dozzle.git
synced 2025-12-30 09:45:15 +01:00
412a10256d
* WIP vue3 * WIP vue3 * WIP vue3 * Migrates to vitejs * Fixes js tests and removes not needed modules * Fixes unmount * Updates to use css instead for space * Fixes tests and rebases one more time * Uses orgua * Fixes migrations bugs with oruga and fixes scroll * Fixes v-deep * Fixes icons to prod * Fixes icons to prod * Adds favicon back * Transitions some to composition api * Updates another component to comp api * Cleans defineProps * Updates log messages * Moves more to compose api * Cleans up styles and rewrites event source * Tries to fix DOMPurify * Removes postcss * WIP typescript * Improves importing * Converts all to ts * Converts main to ts * Makes changes for tsconfig * Moves more to ts * Adds typing to store * More typing * Updates to ts * Updates the rest to ts * Fixes computes * Fixes unmount * Adds cypress with custom base fixed * Fixes jest tests * Fixes golang tests * Adds gitignore for cypress * Removes int in favor of e2e with cypress * Tries to fix int tests again * Adds title * Updates e2e tests * Uses vue for isMobile * Removes app spec * Cleans up docker * Adds drop down for settings * Fixes bug with restart * Fixes scroll up bug * Adds tests for light mode
108 lines
2.2 KiB
Vue
108 lines
2.2 KiB
Vue
<template>
|
|
<aside>
|
|
<div class="columns is-marginless is-gapless is-mobile is-vcentered">
|
|
<div class="column is-narrow">
|
|
<router-link :to="{ name: 'default' }">
|
|
<svg class="logo">
|
|
<use href="#logo"></use>
|
|
</svg>
|
|
</router-link>
|
|
</div>
|
|
<div class="column ml-4 is-family-monospace is-ellipsis" v-if="$route.name == 'container'">
|
|
{{ allContainersById[$route.params.id].name }}
|
|
</div>
|
|
|
|
<div class="column is-narrow push-right">
|
|
<a
|
|
role="button"
|
|
class="navbar-burger burger is-hidden-tablet is-pulled-right"
|
|
@click="showNav = !showNav"
|
|
:class="{ 'is-active': showNav }"
|
|
>
|
|
<span></span> <span></span> <span></span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="menu-label is-hidden-mobile" :class="{ 'is-active': showNav }">Containers</p>
|
|
<ul class="menu-list is-hidden-mobile" :class="{ 'is-active': showNav }">
|
|
<li v-for="item in visibleContainers" :key="item.id">
|
|
<router-link
|
|
:to="{ name: 'container', params: { id: item.id, name: item.name } }"
|
|
active-class="is-active"
|
|
:title="item.name"
|
|
>
|
|
<div class="is-ellipsis">
|
|
{{ item.name }}
|
|
</div>
|
|
</router-link>
|
|
</li>
|
|
</ul>
|
|
</aside>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { mapGetters } from "vuex";
|
|
|
|
export default {
|
|
props: [],
|
|
name: "MobileMenu",
|
|
data() {
|
|
return {
|
|
showNav: false,
|
|
};
|
|
},
|
|
computed: {
|
|
...mapGetters(["visibleContainers", "allContainersById"]),
|
|
},
|
|
watch: {
|
|
$route(to, from) {
|
|
this.showNav = false;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style scoped lang="scss">
|
|
aside {
|
|
padding: 1em;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background: var(--scheme-main-ter);
|
|
z-index: 10;
|
|
max-height: 100vh;
|
|
overflow: auto;
|
|
|
|
.menu-label {
|
|
margin-top: 1em;
|
|
}
|
|
|
|
.title {
|
|
text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.burger {
|
|
color: var(--body-color);
|
|
}
|
|
|
|
.is-hidden-mobile.is-active {
|
|
display: block !important;
|
|
}
|
|
|
|
.navbar-burger {
|
|
height: 2.35rem;
|
|
}
|
|
|
|
.logo {
|
|
width: 82px;
|
|
height: 36px;
|
|
fill: var(--logo-color);
|
|
}
|
|
|
|
.column.push-right {
|
|
margin-left: auto;
|
|
}
|
|
}
|
|
</style>
|