From 16715318570b33ce4a63dbb82128fdf93b22b6e7 Mon Sep 17 00:00:00 2001
From: rrr-marble <rrr@marble.lan>
Date: Thu, 27 Oct 2022 21:33:11 +0300
Subject: [PATCH] add: empty cart

---
 frontend/src/components/Navbar.vue | 38 ++++++++++++++++++++++++++++++
 frontend/src/main.js               |  4 ++++
 2 files changed, 42 insertions(+)

diff --git a/frontend/src/components/Navbar.vue b/frontend/src/components/Navbar.vue
index c68751f..449b763 100644
--- a/frontend/src/components/Navbar.vue
+++ b/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>
\ No newline at end of file
diff --git a/frontend/src/main.js b/frontend/src/main.js
index 7654a03..7a403a9 100644
--- a/frontend/src/main.js
+++ b/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,
     }
 }));