mirror of
https://github.com/mealie-recipes/mealie.git
synced 2025-08-02 20:15:24 +02:00
reorganize all frontend items
This commit is contained in:
hay-kot
parent
d67240d449
commit
00a8fdda41
147 changed files with 3845 additions and 743 deletions
|
|
@ -1,17 +1,96 @@
|
|||
<template>
|
||||
<v-app dark> </v-app>
|
||||
<v-app dark>
|
||||
<!-- <TheSnackbar /> -->
|
||||
|
||||
<AppSidebar
|
||||
v-model="sidebar"
|
||||
absolute
|
||||
:top-link="topLinks"
|
||||
:secondary-links="$auth.user.admin ? adminLinks : null"
|
||||
:bottom-links="$auth.user.admin ? bottomLinks : null"
|
||||
:user="{ data: true }"
|
||||
@input="sidebar = !sidebar"
|
||||
/>
|
||||
|
||||
<AppHeader>
|
||||
<v-btn icon @click.stop="sidebar = !sidebar">
|
||||
<v-icon> {{ $globals.icons.menu }}</v-icon>
|
||||
</v-btn>
|
||||
</AppHeader>
|
||||
<v-main>
|
||||
<v-scroll-x-transition>
|
||||
<Nuxt />
|
||||
</v-scroll-x-transition>
|
||||
</v-main>
|
||||
</v-app>
|
||||
</template>
|
||||
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from '@nuxtjs/composition-api'
|
||||
import { defineComponent } from "@nuxtjs/composition-api";
|
||||
import AppHeader from "@/components/Layout/AppHeader.vue";
|
||||
import AppSidebar from "@/components/Layout/AppSidebar.vue";
|
||||
|
||||
export default defineComponent({
|
||||
components: { AppHeader, AppSidebar },
|
||||
middleware: "auth",
|
||||
auth: true,
|
||||
setup() {
|
||||
return {}
|
||||
}
|
||||
})
|
||||
return {};
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
sidebar: null,
|
||||
topLinks: [
|
||||
{
|
||||
icon: this.$globals.icons.user,
|
||||
to: "/user/profile",
|
||||
title: this.$t("sidebar.profile"),
|
||||
},
|
||||
],
|
||||
adminLinks: [
|
||||
{
|
||||
icon: this.$globals.icons.viewDashboard,
|
||||
to: "/admin/dashboard",
|
||||
title: this.$t("sidebar.dashboard"),
|
||||
},
|
||||
{
|
||||
icon: this.$globals.icons.cog,
|
||||
to: "/admin/site-settings",
|
||||
title: this.$t("sidebar.site-settings"),
|
||||
},
|
||||
{
|
||||
icon: this.$globals.icons.tools,
|
||||
to: "/admin/toolbox",
|
||||
title: this.$t("sidebar.toolbox"),
|
||||
},
|
||||
{
|
||||
icon: this.$globals.icons.group,
|
||||
to: "/admin/manage-users",
|
||||
title: this.$t("sidebar.manage-users"),
|
||||
},
|
||||
{
|
||||
icon: this.$globals.icons.import,
|
||||
to: "/admin/migrations",
|
||||
title: this.$t("sidebar.migrations"),
|
||||
},
|
||||
],
|
||||
bottomLinks: [
|
||||
{
|
||||
icon: this.$globals.icons.heart,
|
||||
title: this.$t("about.support"),
|
||||
href: "https://github.com/sponsors/hay-kot",
|
||||
},
|
||||
{
|
||||
icon: this.$globals.icons.information,
|
||||
title: this.$t("about.about"),
|
||||
to: "/admin/about",
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
</style>+
|
||||
30
frontend/layouts/basic.vue
Normal file
30
frontend/layouts/basic.vue
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
<template>
|
||||
<v-app dark>
|
||||
<!-- <TheSnackbar /> -->
|
||||
|
||||
<AppHeader :menu="false"> </AppHeader>
|
||||
<v-main>
|
||||
<v-scroll-x-transition>
|
||||
<Nuxt />
|
||||
</v-scroll-x-transition>
|
||||
</v-main>
|
||||
<AppFooter />
|
||||
</v-app>
|
||||
</template>
|
||||
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from "@nuxtjs/composition-api";
|
||||
import AppFooter from "@/components/Layout/AppFooter.vue";
|
||||
import AppHeader from "@/components/Layout/AppHeader.vue";
|
||||
|
||||
export default defineComponent({
|
||||
components: { AppHeader, AppFooter },
|
||||
setup() {
|
||||
return {};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>+
|
||||
|
|
@ -1,117 +1,71 @@
|
|||
<template>
|
||||
<v-app dark>
|
||||
<v-navigation-drawer
|
||||
v-model="drawer"
|
||||
:mini-variant="miniVariant"
|
||||
:clipped="clipped"
|
||||
fixed
|
||||
app
|
||||
>
|
||||
<v-list>
|
||||
<v-list-item
|
||||
v-for="(item, i) in items"
|
||||
:key="i"
|
||||
:to="item.to"
|
||||
router
|
||||
exact
|
||||
>
|
||||
<v-list-item-action>
|
||||
<v-icon>{{ item.icon }}</v-icon>
|
||||
</v-list-item-action>
|
||||
<v-list-item-content>
|
||||
<v-list-item-title v-text="item.title" />
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-navigation-drawer>
|
||||
<v-app-bar
|
||||
:clipped-left="clipped"
|
||||
fixed
|
||||
app
|
||||
>
|
||||
<v-app-bar-nav-icon @click.stop="drawer = !drawer" />
|
||||
<v-btn
|
||||
icon
|
||||
@click.stop="miniVariant = !miniVariant"
|
||||
>
|
||||
<v-icon>mdi-{{ `chevron-${miniVariant ? 'right' : 'left'}` }}</v-icon>
|
||||
<!-- <TheSnackbar /> -->
|
||||
|
||||
<AppSidebar v-model="sidebar" absolute :top-link="topLinks" @input="sidebar = !sidebar" />
|
||||
|
||||
<AppHeader>
|
||||
<v-btn icon @click.stop="sidebar = !sidebar">
|
||||
<v-icon> {{ $globals.icons.menu }}</v-icon>
|
||||
</v-btn>
|
||||
<v-btn
|
||||
icon
|
||||
@click.stop="clipped = !clipped"
|
||||
>
|
||||
<v-icon>mdi-application</v-icon>
|
||||
</v-btn>
|
||||
<v-btn
|
||||
icon
|
||||
@click.stop="fixed = !fixed"
|
||||
>
|
||||
<v-icon>mdi-minus</v-icon>
|
||||
</v-btn>
|
||||
<v-toolbar-title v-text="title" />
|
||||
<v-spacer />
|
||||
<v-btn
|
||||
icon
|
||||
@click.stop="rightDrawer = !rightDrawer"
|
||||
>
|
||||
<v-icon>mdi-menu</v-icon>
|
||||
</v-btn>
|
||||
</v-app-bar>
|
||||
</AppHeader>
|
||||
<v-main>
|
||||
<v-container>
|
||||
<v-scroll-x-transition>
|
||||
<Nuxt />
|
||||
</v-container>
|
||||
</v-scroll-x-transition>
|
||||
</v-main>
|
||||
<v-navigation-drawer
|
||||
v-model="rightDrawer"
|
||||
:right="right"
|
||||
temporary
|
||||
fixed
|
||||
>
|
||||
<v-list>
|
||||
<v-list-item @click.native="right = !right">
|
||||
<v-list-item-action>
|
||||
<v-icon light>
|
||||
mdi-repeat
|
||||
</v-icon>
|
||||
</v-list-item-action>
|
||||
<v-list-item-title>Switch drawer (click me)</v-list-item-title>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-navigation-drawer>
|
||||
<v-footer
|
||||
:absolute="!fixed"
|
||||
app
|
||||
>
|
||||
<span>© {{ new Date().getFullYear() }}</span>
|
||||
</v-footer>
|
||||
<AppFloatingButton absolute />
|
||||
</v-app>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
<script lang="ts">
|
||||
import { defineComponent } from "@nuxtjs/composition-api";
|
||||
import AppHeader from "@/components/Layout/AppHeader.vue";
|
||||
import AppSidebar from "@/components/Layout/AppSidebar.vue";
|
||||
import AppFloatingButton from "@/components/Layout/AppFloatingButton.vue";
|
||||
|
||||
export default defineComponent({
|
||||
components: { AppHeader, AppSidebar, AppFloatingButton },
|
||||
// @ts-ignore
|
||||
middleware: process.env.PUBLIC_SITE ? null : "auth",
|
||||
setup() {
|
||||
return {};
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
clipped: false,
|
||||
drawer: false,
|
||||
fixed: false,
|
||||
items: [
|
||||
sidebar: null,
|
||||
topLinks: [
|
||||
{
|
||||
icon: 'mdi-apps',
|
||||
title: 'Welcome',
|
||||
to: '/'
|
||||
icon: this.$globals.icons.home,
|
||||
to: "/",
|
||||
title: this.$t("sidebar.home-page"),
|
||||
},
|
||||
{
|
||||
icon: 'mdi-chart-bubble',
|
||||
title: 'Inspire',
|
||||
to: '/inspire'
|
||||
}
|
||||
icon: this.$globals.icons.search,
|
||||
to: "/search",
|
||||
title: this.$t("sidebar.search"),
|
||||
},
|
||||
{
|
||||
icon: this.$globals.icons.viewModule,
|
||||
to: "/recipes/all",
|
||||
title: this.$t("sidebar.all-recipes"),
|
||||
},
|
||||
{
|
||||
icon: this.$globals.icons.tags,
|
||||
to: "/recipes/category",
|
||||
title: this.$t("sidebar.categories"),
|
||||
},
|
||||
{
|
||||
icon: this.$globals.icons.tags,
|
||||
to: "/recipes/tag",
|
||||
title: this.$t("sidebar.tags"),
|
||||
},
|
||||
],
|
||||
miniVariant: false,
|
||||
right: true,
|
||||
rightDrawer: false,
|
||||
title: 'Vuetify.js'
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>+
|
||||
|
|
@ -6,35 +6,32 @@
|
|||
<h1 v-else>
|
||||
{{ otherError }}
|
||||
</h1>
|
||||
<NuxtLink to="/">
|
||||
Home page
|
||||
</NuxtLink>
|
||||
<NuxtLink to="/"> Home page </NuxtLink>
|
||||
</v-app>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
layout: 'empty',
|
||||
layout: "empty",
|
||||
props: {
|
||||
error: {
|
||||
type: Object,
|
||||
default: null
|
||||
}
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
data () {
|
||||
data() {
|
||||
return {
|
||||
pageNotFound: '404 Not Found',
|
||||
otherError: 'An error occurred'
|
||||
}
|
||||
pageNotFound: "404 Not Found",
|
||||
otherError: "An error occurred",
|
||||
};
|
||||
},
|
||||
head () {
|
||||
const title =
|
||||
this.error.statusCode === 404 ? this.pageNotFound : this.otherError
|
||||
head() {
|
||||
const title = this.error.statusCode === 404 ? this.pageNotFound : this.otherError;
|
||||
return {
|
||||
title
|
||||
}
|
||||
}
|
||||
}
|
||||
title,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue