mirrors/recipes
1
0
Fork 0
mirror of https://github.com/TandoorRecipes/recipes.git synced 2026-01-01 20:28:46 -05:00
Code Issues Packages Projects Releases Wiki Activity

playing with navs

Browse Source
This commit is contained in:
vabene1111
2024-02-22 22:19:00 +01:00
parent b0e01e13bf
commit d53706bd5d
2 changed files with 59 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
vue3/src/apps/tandoor/Tandoor.vue
View File

@@ -1,46 +1,64 @@
<template>
<v-app>
<v-layout>
<v-navigation-drawer v-model="drawer"
:rail="rail"
permanent
@click="rail = false">
<v-list-item @click="drawer = false">
<v-img src="../../assets/logo_color.svg" height="48px" v-if="rail"></v-img>
<v-img src="../../assets/brand_logo.svg" max-height="64px" v-if="!rail"></v-img>
</v-list-item>
<v-divider></v-divider>
<v-list density="compact" nav>
<v-list-item prepend-icon="fas fa-book" title="Home" value="home"></v-list-item>
<v-list-item prepend-icon="fas fa-calendar-alt" title="My Account" value="account"></v-list-item>
<v-list-item prepend-icon="fas fa-shopping-cart" title="Users" value="users"></v-list-item>
<v-list-item prepend-icon="fas fa-book-open" title="Users" value="users"></v-list-item>
</v-list>
<v-divider></v-divider>
</v-navigation-drawer>
<!-- <v-app-bar color="tandoor">-->
<!-- <template v-slot:prepend>-->
<!-- <v-app-bar-nav-icon></v-app-bar-nav-icon>-->
<!-- </template>-->
<!-- <v-app-bar-title>-->
<!-- Tandoor-->
<!-- </v-app-bar-title>-->
<!-- </v-app-bar>-->
<v-app-bar color="tandoor" flat>
<template v-slot:prepend>
<v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
</template>
<v-main>
<v-container fluid class="pa-0 ma-0">
<router-view></router-view>
</v-container>
</v-main>
</v-app-bar>
<v-bottom-navigation>
<v-btn value="recent" to="/">
<v-icon icon="fas fa-book"/>
<span>Recipes</span>
</v-btn>
<v-btn value="favorites">
<v-icon icon="fas fa-calendar-alt"></v-icon>
<v-main>
<v-container fluid class="pa-0 ma-0">
<router-view></router-view>
</v-container>
</v-main>
<span>MealPlan</span>
</v-btn>
<v-bottom-navigation>
<v-btn value="recent" to="/search">
<v-icon icon="fas fa-book"/>
<span>Recipes</span>
</v-btn>
<v-btn value="nearby" to="/shopping">
<v-icon icon="fas fa-shopping-cart"></v-icon>
<v-btn value="favorites" to="/mealplan">
<v-icon icon="fas fa-calendar-alt"></v-icon>
<span>Shopping</span>
</v-btn>
<v-btn value="nearby">
<v-icon icon="fas fa-book-open"></v-icon>
<span>MealPlan</span>
</v-btn>
<v-btn value="nearby" to="/shopping">
<v-icon icon="fas fa-shopping-cart"></v-icon>
<span>Shopping</span>
</v-btn>
<v-btn value="nearby" to="/books">
<v-icon icon="fas fa-book-open"></v-icon>
<span>Books</span>
</v-btn>
</v-bottom-navigation>
</v-layout>
<span>Books</span>
</v-btn>
</v-bottom-navigation>
</v-app>
</template>
@@ -53,7 +71,10 @@ export default defineComponent({
components: {},
mixins: [],
data() {
return {}
return {
drawer: true,
rail: true,
}
},
mounted() {

8
vue3/src/apps/tandoor/main.ts
View File

@@ -12,9 +12,11 @@ import RecipeSearchPage from "@/pages/RecipeSearchPage.vue";
import RecipeViewPage from "@/pages/RecipeViewPage.vue";
const routes = [
{path: '/search', component: RecipeSearchPage},
{path: '/shopping', component: ShoppingListPage},
{path: '/recipe/:id', component: RecipeViewPage, props: true},
{path: '/', redirect: '/search', name: 'index'},
{path: '/search', component: RecipeSearchPage, name: 'view_search'},
{path: '/shopping', component: ShoppingListPage, name: 'view_shopping'},
{path: '/recipe/:id', component: RecipeViewPage, name: 'view_recipe', props: true},
{path: '/recipe/edit/:id', component: RecipeViewPage, name: 'view_recipe', props: true},
]
const router = createRouter({