@crm-market/template-shared 1.0.6 → 1.0.8

package/components/Layout/ResponsiveNavbar.vue

@@ -1,433 +1,47 @@
+<script setup lang="ts">
+// Мобільне меню (offcanvas): ті самі пункти, що й у десктопному меню
+import stateStore from '~/utils/store';
+import { NAV_ITEMS, useLayoutData } from './layoutData';
+
+const { t } = useI18n();
+const { phone, email, workingHours } = useLayoutData();
+</script>
+
 <template>
-  <div
-    :class="[
-      'mobile-navbar offcanvas offcanvas-end border-0',
-      { show: stateStoreInstance.show },
-    ]"
-  >
+  <div :class="['mobile-navbar offcanvas offcanvas-end border-0', { show: stateStore.show }]">
     <div class="offcanvas-header justify-space-between">
-      <NuxtLink to="/" class="logo d-inline-block">
-        <img src="~/assets/images/logo.png" alt="logo" />
+      <NuxtLink to="/" class="logo d-inline-block" @click="stateStore.onChangeShow">
+        <LayoutHeaderLogo />
       </NuxtLink>
-
       <button
         type="button"
         class="close-btn bg-transparent position-relative lh-1 p-0 border-0"
-        @click="stateStoreInstance.onChangeShow"
+        :aria-label="t('layout.menu.close')"
+        @click="stateStore.onChangeShow"
       >
         <i class="ri-close-fill"></i>
       </button>
     </div>
 
     <div class="offcanvas-body">
-      <v-expansion-panels variant="accordion" v-model="panel">
-        <v-expansion-panel>
-          <v-expansion-panel-title>{{ t('nav.home') }}</v-expansion-panel-title>
-          <v-expansion-panel-text>
-            <ul class="mobile-menu-items">
-              <li>
-                <NuxtLink
-                  class="dropdown-item"
-                  to="/"
-                  @click="stateStoreInstance.onChangeShow"
-                >
-                  Electronics & Telemobile Online Shop
-                </NuxtLink>
-              </li>
-              <li>
-                <NuxtLink
-                  class="dropdown-item"
-                  to="/grocery-shop"
-                  @click="stateStoreInstance.onChangeShow"
-                >
-                  Grocery Shop
-                </NuxtLink>
-              </li>
-              <li>
-                <NuxtLink
-                  class="dropdown-item"
-                  to="/healthy-diet-foods-shop"
-                  @click="stateStoreInstance.onChangeShow"
-                >
-                  Healthy Diet Foods Shop
-                </NuxtLink>
-              </li>
-            </ul>
-          </v-expansion-panel-text>
-        </v-expansion-panel>
-        <v-expansion-panel>
-          <v-expansion-panel-title>{{ t('nav.pages') }}</v-expansion-panel-title>
-          <v-expansion-panel-text>
-            <ul class="mobile-menu-items">
-              <li>
-                <NuxtLink
-                  class="dropdown-item"
-                  to="/about-us"
-                  @click="stateStoreInstance.onChangeShow"
-                >
-                  {{ t('nav.aboutUs') }}
-                </NuxtLink>
-              </li>
-              <li class="mobile-menu-list">
-                <v-expansion-panels variant="accordion">
-                  <v-expansion-panel>
-                    <v-expansion-panel-title>
-                      {{ t('nav.authentication') }}
-                    </v-expansion-panel-title>
-                    <v-expansion-panel-text>
-                      <ul class="mobile-menu-items sub-dropdown">
-                        <li>
-                          <NuxtLink
-                            class="dropdown-item"
-                            to="/login"
-                            @click="stateStoreInstance.onChangeShow"
-                          >
-                            {{ t('auth.login') }}
-                          </NuxtLink>
-                        </li>
-                        <li>
-                          <NuxtLink
-                            class="dropdown-item"
-                            to="/register"
-                            @click="stateStoreInstance.onChangeShow"
-                          >
-                            {{ t('auth.register') }}
-                          </NuxtLink>
-                        </li>
-                        <li>
-                          <NuxtLink
-                            class="dropdown-item"
-                            to="/my-account"
-                            @click="stateStoreInstance.onChangeShow"
-                          >
-                            {{ t('account.myAccount') }}
-                          </NuxtLink>
-                        </li>
-                        <li>
-                          <NuxtLink
-                            class="dropdown-item"
-                            to="/change-password"
-                            @click="stateStoreInstance.onChangeShow"
-                          >
-                            {{ t('auth.changePassword') }}
-                          </NuxtLink>
-                        </li>
-                        <li>
-                          <NuxtLink
-                            class="dropdown-item"
-                            to="/forgot-password"
-                            @click="stateStoreInstance.onChangeShow"
-                          >
-                            {{ t('auth.forgotPassword') }}
-                          </NuxtLink>
-                        </li>
-                      </ul>
-                    </v-expansion-panel-text>
-                  </v-expansion-panel>
-                </v-expansion-panels>
-              </li>
-              <li>
-                <NuxtLink
-                  class="dropdown-item"
-                  to="/faq"
-                  @click="stateStoreInstance.onChangeShow"
-                >
-                  {{ t('nav.faqs') }}
-                </NuxtLink>
-              </li>
-              <li>
-                <NuxtLink
-                  class="dropdown-item"
-                  to="/privacy-policy"
-                  @click="stateStoreInstance.onChangeShow"
-                >
-                  {{ t('common.privacyPolicy') }}
-                </NuxtLink>
-              </li>
-              <li>
-                <NuxtLink
-                  class="dropdown-item"
-                  to="/terms-conditions"
-                  @click="stateStoreInstance.onChangeShow"
-                >
-                  {{ t('common.termsConditions') }}
-                </NuxtLink>
-              </li>
-            </ul>
-          </v-expansion-panel-text>
-        </v-expansion-panel>
-        <v-expansion-panel>
-          <v-expansion-panel-title>{{ t('nav.shop') }}</v-expansion-panel-title>
-          <v-expansion-panel-text>
-            <ul class="mobile-menu-items">
-              <li class="mobile-menu-list">
-                <v-expansion-panels variant="accordion">
-                  <v-expansion-panel>
-                    <v-expansion-panel-title>
-                      {{ t('nav.productLayouts') }}
-                    </v-expansion-panel-title>
-                    <v-expansion-panel-text>
-                      <ul class="mobile-menu-items sub-dropdown">
-                        <li>
-                          <NuxtLink
-                            class="dropdown-item"
-                            to="/best-sellers"
-                            @click="stateStoreInstance.onChangeShow"
-                          >
-                            {{ t('product.bestSellers') }}
-                          </NuxtLink>
-                        </li>
-                        <li>
-                          <NuxtLink
-                            class="dropdown-item"
-                            to="/featured-products"
-                            @click="stateStoreInstance.onChangeShow"
-                          >
-                            {{ t('product.featuredProducts') }}
-                          </NuxtLink>
-                        </li>
-                        <li>
-                          <NuxtLink
-                            class="dropdown-item"
-                            to="/trending-products"
-                            @click="stateStoreInstance.onChangeShow"
-                          >
-                            {{ t('product.trendingProducts') }}
-                          </NuxtLink>
-                        </li>
-                        <li>
-                          <NuxtLink
-                            class="dropdown-item"
-                            to="/new-arrivals"
-                            @click="stateStoreInstance.onChangeShow"
-                          >
-                            {{ t('product.newArrivals') }}
-                          </NuxtLink>
-                        </li>
-                        <li>
-                          <NuxtLink
-                            class="dropdown-item"
-                            to="/categories"
-                            @click="stateStoreInstance.onChangeShow"
-                          >
-                            {{ t('nav.categories') }}
-                          </NuxtLink>
-                        </li>
-                      </ul>
-                    </v-expansion-panel-text>
-                  </v-expansion-panel>
-                </v-expansion-panels>
-              </li>
-              <li class="mobile-menu-list">
-                <v-expansion-panels variant="accordion">
-                  <v-expansion-panel>
-                    <v-expansion-panel-title>
-                      {{ t('nav.productsStep') }}
-                    </v-expansion-panel-title>
-                    <v-expansion-panel-text>
-                      <ul class="mobile-menu-items sub-dropdown">
-                        <li>
-                          <NuxtLink
-                            class="dropdown-item"
-                            to="/products"
-                            @click="stateStoreInstance.onChangeShow"
-                          >
-                            {{ t('nav.products') }}
-                          </NuxtLink>
-                        </li>
-                        <li>
-                          <NuxtLink
-                            class="dropdown-item"
-                            to="/cart"
-                            @click="stateStoreInstance.onChangeShow"
-                          >
-                            {{ t('cart.cart') }}
-                          </NuxtLink>
-                        </li>
-                        <li>
-                          <NuxtLink
-                            class="dropdown-item"
-                            to="/wishlist"
-                            @click="stateStoreInstance.onChangeShow"
-                          >
-                            {{ t('product.wishlist') }}
-                          </NuxtLink>
-                        </li>
-                        <li>
-                          <NuxtLink
-                            class="dropdown-item"
-                            to="/checkout"
-                            @click="stateStoreInstance.onChangeShow"
-                          >
-                            {{ t('account.checkout') }}
-                          </NuxtLink>
-                        </li>
-                        <li>
-                          <NuxtLink
-                            class="dropdown-item"
-                            to="/product-details"
-                            @click="stateStoreInstance.onChangeShow"
-                          >
-                            {{ t('product.productDetails') }}
-                          </NuxtLink>
-                        </li>
-                      </ul>
-                    </v-expansion-panel-text>
-                  </v-expansion-panel>
-                </v-expansion-panels>
-              </li>
-              <li class="mobile-menu-list">
-                <v-expansion-panels variant="accordion">
-                  <v-expansion-panel>
-                    <v-expansion-panel-title>
-                      {{ t('nav.adminPage') }}
-                    </v-expansion-panel-title>
-                    <v-expansion-panel-text>
-                      <ul class="mobile-menu-items sub-dropdown mb-3">
-                        <li>
-                          <NuxtLink
-                            class="dropdown-item"
-                            to="/dashboard"
-                            @click="stateStoreInstance.onChangeShow"
-                          >
-                            {{ t('account.dashboard') }}
-                          </NuxtLink>
-                        </li>
-                        <li>
-                          <NuxtLink
-                            class="dropdown-item"
-                            to="/edit-profile"
-                            @click="stateStoreInstance.onChangeShow"
-                          >
-                            {{ t('account.editProfile') }}
-                          </NuxtLink>
-                        </li>
-                        <li>
-                          <NuxtLink
-                            class="dropdown-item"
-                            to="/order-history"
-                            @click="stateStoreInstance.onChangeShow"
-                          >
-                            {{ t('account.orderHistory') }}
-                          </NuxtLink>
-                        </li>
-                        <li>
-                          <NuxtLink
-                            class="dropdown-item"
-                            to="/order-details"
-                            @click="stateStoreInstance.onChangeShow"
-                          >
-                            {{ t('account.orderDetails') }}
-                          </NuxtLink>
-                        </li>
-                        <li>
-                          <NuxtLink
-                            class="dropdown-item"
-                            to="/change-password"
-                            @click="stateStoreInstance.onChangeShow"
-                          >
-                            {{ t('auth.changePassword') }}
-                          </NuxtLink>
-                        </li>
-                      </ul>
-                    </v-expansion-panel-text>
-                  </v-expansion-panel>
-                </v-expansion-panels>
-              </li>
-            </ul>
-          </v-expansion-panel-text>
-        </v-expansion-panel>
-        <v-expansion-panel>
-          <v-expansion-panel-title>{{ t('nav.blog') }}</v-expansion-panel-title>
-          <v-expansion-panel-text>
-            <ul class="mobile-menu-items">
-              <li>
-                <NuxtLink
-                  class="dropdown-item"
-                  to="/our-blog"
-                  @click="stateStoreInstance.onChangeShow"
-                >
-                  {{ t('nav.ourBlog') }}
-                </NuxtLink>
-              </li>
-              <li>
-                <NuxtLink
-                  class="dropdown-item"
-                  to="/blog-details"
-                  @click="stateStoreInstance.onChangeShow"
-                >
-                  {{ t('nav.blogDetails') }}
-                </NuxtLink>
-              </li>
-              <li>
-                <NuxtLink
-                  class="dropdown-item"
-                  to="/tags"
-                  @click="stateStoreInstance.onChangeShow"
-                >
-                  {{ t('nav.tags') }}
-                </NuxtLink>
-              </li>
-              <li>
-                <NuxtLink
-                  class="dropdown-item"
-                  to="/categories"
-                  @click="stateStoreInstance.onChangeShow"
-                >
-                  {{ t('nav.categories') }}
-                </NuxtLink>
-              </li>
-              <li>
-                <NuxtLink
-                  class="dropdown-item"
-                  to="/author"
-                  @click="stateStoreInstance.onChangeShow"
-                >
-                  {{ t('nav.author') }}
-                </NuxtLink>
-              </li>
-            </ul>
-          </v-expansion-panel-text>
-        </v-expansion-panel>
-        <v-expansion-panel>
-          <v-expansion-panel-title class="without-icon">
-            <NuxtLink to="/contact" @click="stateStoreInstance.onChangeShow">
-              {{ t('nav.contact') }}
-            </NuxtLink>
-          </v-expansion-panel-title>
-        </v-expansion-panel>
-      </v-expansion-panels>
+      <ul class="list-unstyled mb-4">
+        <li v-for="item in NAV_ITEMS" :key="item.to" class="border-bottom">
+          <NuxtLink
+            class="d-block py-3 fw-medium text-dark text-decoration-none"
+            :to="item.to"
+            :active-class="item.to === '/' ? '' : 'text-success'"
+            exact-active-class="text-success"
+            @click="stateStore.onChangeShow"
+          >
+            {{ t(item.key) }}
+          </NuxtLink>
+        </li>
+      </ul>
+      <ul class="list-unstyled fs-14 text-muted">
+        <li v-if="phone"><a :href="`tel:${phone}`">{{ phone }}</a></li>
+        <li v-if="email"><a :href="`mailto:${email}`">{{ email }}</a></li>
+        <li v-if="workingHours">{{ workingHours }}</li>
+      </ul>
     </div>
   </div>
 </template>
-
-<script lang="ts">
-import { defineComponent, ref } from "vue";
-import stateStore from "~/utils/store";
-
-export default defineComponent({
-  name: "ResponsiveNavbar",
-  data: () => ({
-    panel: [0],
-  }),
-  setup() {
-    const { t } = useI18n();
-    const show = ref(false);
-    const stateStoreInstance = stateStore;
-    const activeMobileMenu = ref<string | null>(null);
-
-    const toggleMobileMenu = (mobileMenu: string) => {
-      activeMobileMenu.value =
-        activeMobileMenu.value === mobileMenu ? null : mobileMenu;
-    };
-
-    return {
-      show,
-      stateStoreInstance,
-      toggleMobileMenu,
-      activeMobileMenu,
-      t,
-    };
-  },
-});
-</script>