diff options
Diffstat (limited to 'iridescence/src/components/Navbar.vue')
| -rw-r--r-- | iridescence/src/components/Navbar.vue | 50 |
1 files changed, 30 insertions, 20 deletions
diff --git a/iridescence/src/components/Navbar.vue b/iridescence/src/components/Navbar.vue index c4e9c35..0a66fa8 100644 --- a/iridescence/src/components/Navbar.vue +++ b/iridescence/src/components/Navbar.vue @@ -29,34 +29,44 @@ </router-link> </div> - <div class="navbar-end" v-if="routeName == 'Administration'"> - <div class="navbar-item"> - <NewProduct></NewProduct> - </div> - </div> - <div class="navbar-end" v-else> + <transition + mode="out-in" + enter-active-class="animate__animated animate__flipInX" + leave-active-class="animate__animated animate__flipOutX" + > <div - class="navbar-item has-dropdown is-active" - v-for="category in categories.keys()" - :key="category" + class="navbar-end" + v-if="routeName == 'Administration'" + key="newProduct" > - <div class="navbar-link"> - {{ category }} + <div class="navbar-item"> + <NewProduct></NewProduct> </div> - + </div> + <div class="navbar-end" v-else key="cartCheckout"> <div - class="navbar-dropdown" - v-for="subcategory in categories.get(category)" - :key="subcategory" + class="navbar-item has-dropdown is-active" + v-for="category in categories.keys()" + :key="category" > - {{ subcategory }} + <div class="navbar-link"> + {{ category }} + </div> + + <div + class="navbar-dropdown" + v-for="subcategory in categories.get(category)" + :key="subcategory" + > + {{ subcategory }} + </div> </div> - </div> - <div class="navbar-item"> - <CartCheckout></CartCheckout> + <div class="navbar-item"> + <CartCheckout></CartCheckout> + </div> </div> - </div> + </transition> </div> </nav> </div> |