add: empty cart

frontend/src/components/Navbar.vue

@@ -10,6 +10,27 @@
                 <slot></slot>
             </template>
             <template #right>
+                <va-dropdown :close-on-content-click="false" :modelValue="true" placement="bottom-end" prevent-overflow>
+                    <template #anchor>
+                        <va-navbar-item class="top-icon">
+                            <va-popover message="Корзина">
+                                <va-icon size="3rem" color="gray" name="shopping_basket" @click="" />
+                            </va-popover>
+                        </va-navbar-item>
+                    </template>
+                    <va-dropdown-content>
+                        <va-card>
+                            <va-card-title>Корзина</va-card-title>
+                            <va-card-content class="cart-inner">
+                                <p class="cart-empty">Корзина пуста</p>
+                                <p class="cart-empty">Попробуйте перейти на страницу образца</p>
+                                <p v-if="isItemPath" class="cart-empty">
+                                    и <va-button>Добавить в корзину</va-button>
+                                </p>
+                            </va-card-content>
+                        </va-card>
+                    </va-dropdown-content>
+                </va-dropdown>
                 <va-navbar-item class="top-icon">
                     <va-popover message="Аккаунт">
                         <va-icon size="3rem" color="gray" name="account_box" @click="$emit('accountClick')" />
@@ -24,6 +45,11 @@
 <script>
 export default {
     name: "navbar",
+    computed: {
+        isItemPath() {
+            return this.$route.name === "item-details";
+        }
+    },
 }
 </script>
 
@@ -32,4 +58,16 @@ export default {
 .navbar {
     position: relative;
 }
+
+.cart-inner {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    min-width: 30rem;
+    min-height: 40rem;
+}
+
+.cart-empty {
+    margin: 1rem auto;
+}
 </style>

frontend/src/main.js

@@ -31,6 +31,8 @@ import {
     VaModal,
     VaPopover,
     VaScrollContainer,
+    VaDropdown,
+    VaDropdownContent,
 } from 'vuestic-ui'
 import 'vuestic-ui/dist/styles/essential.css'
 import 'vuestic-ui/dist/styles/grid.css'
@@ -76,6 +78,8 @@ app.use(createVuesticEssential({
         VaModal,
         VaPopover,
         VaScrollContainer,
+        VaDropdown,
+        VaDropdownContent,
     }
 }));