@crm-market/template-shared 1.0.6 → 1.0.8

package/components/Layout/NavLinks.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { NAV_ITEMS } from './layoutData';
+
+// Пункти меню з підсвіткою активного (для "/" — лише точний збіг)
+const { t } = useI18n();
+const emit = defineEmits<{ (e: 'navigate'): void }>();
+</script>
+
+<template>
+  <ul class="navbar-nav me-auto">
+    <li v-for="item in NAV_ITEMS" :key="item.to" class="nav-item">
+      <NuxtLink
+        class="nav-link"
+        :to="item.to"
+        :active-class="item.to === '/' ? '' : 'router-link-active'"
+        exact-active-class="router-link-active"
+        @click="emit('navigate')"
+      >
+        {{ t(item.key) }}
+      </NuxtLink>
+    </li>
+  </ul>
+</template>

package/components/Layout/Navbar.vue

@@ -1,18 +1,31 @@
+<script setup lang="ts">
+// Навігація: логотип (мобільний), бургер, посилання на існуючі сторінки, телефон
+import stateStore from '~/utils/store';
+import { useLayoutData } from './layoutData';
+
+const props = withDefaults(defineProps<{ withCategories?: boolean; wrapClass?: string }>(), {
+  withCategories: true,
+  wrapClass: 'ptb-6',
+});
+const { t } = useI18n();
+const { topLevelCategories } = useCategories();
+const { phone } = useLayoutData();
+
+const isSticky = ref(false);
+const catOpen = ref(false);
+const onScroll = () => { isSticky.value = window.scrollY >= 100; };
+onMounted(() => window.addEventListener('scroll', onScroll));
+onBeforeUnmount(() => window.removeEventListener('scroll', onScroll));
+</script>
+
 <template>
-  <div :class="['navbar navbar-expand-lg bg-white', { sticky: isSticky }]">
+  <!-- На мобільному логотип і бургер винесено в шапку (HeaderBar), тож навбар лише від lg -->
+  <div :class="['navbar navbar-expand-lg bg-white d-none d-lg-flex', wrapClass, { sticky: isSticky }]">
     <div class="container mw-1610">
       <NuxtLink class="navbar-brand d-lg-none" to="/">
-        <img
-          :src="logoUrl || defaultLogo"
-          class="main-logo"
-          alt="logo"
-        />
+        <LayoutHeaderLogo img-class="main-logo" />
       </NuxtLink>
-      <a
-        class="navbar-toggler"
-        href="javascript:void(0);"
-        @click="stateStoreInstance.onChangeShow"
-      >
+      <a class="navbar-toggler" href="javascript:void(0);" :aria-label="t('layout.menu.toggle')" @click="stateStore.onChangeShow">
         <span class="burger-menu">
           <span class="top-bar"></span>
           <span class="middle-bar"></span>
@@ -20,95 +33,36 @@
         </span>
       </a>
 
-      <ul class="categories-nav d-none d-lg-block">
+      <ul v-if="props.withCategories" class="categories-nav categories-style-three d-none d-lg-block">
         <li class="categories-item dropdown">
-          <div
-            class="categories-link dropdown-toggle"
-            @click="toggleCategories"
-            :aria-pressed="show ? 'true' : 'false'"
-            :class="{ show: buttonShowState }"
-          >
+          <div class="categories-link dropdown-toggle" :class="{ show: catOpen }" @click="catOpen = !catOpen">
             <i class="ri-menu-2-line"></i>
-            <span>{{ t('nav.browseCategories') }}</span>
+            <span>{{ t('layout.menu.browseCategories') }}</span>
           </div>
-
-          <ul class="dropdown-menu" :class="{ show: show }">
+          <ul class="dropdown-menu" :class="{ show: catOpen }">
             <li v-for="category in topLevelCategories" :key="category.id">
-              <template v-if="getSubcategories(category.id).length > 0">
-                <a
-                  class="dropdown-item sub-dropdown dropdown-toggle"
-                  href="javascript:void(0)"
-                  @click="toggleSubDropdown(category.id)"
-                >
-                  <i class="ri-folder-line"></i>
-                  <span>{{ category.name }}</span>
-                </a>
-
-                <ul
-                  class="dropdown-menu dropdown-menu-sub"
-                  :class="{ show: activeSubDropdown === category.id }"
-                >
-                  <li v-for="sub in getSubcategories(category.id)" :key="sub.id">
-                    <NuxtLink
-                      class="dropdown-item"
-                      :to="`/products?categoryId=${sub.id}`"
-                    >
-                      {{ sub.name }}
-                    </NuxtLink>
-                  </li>
-                </ul>
-              </template>
-              <template v-else>
-                <NuxtLink
-                  class="dropdown-item single-style"
-                  :to="`/products?categoryId=${category.id}`"
-                >
-                  {{ category.name }}
-                </NuxtLink>
-              </template>
+              <NuxtLink class="dropdown-item single-style" :to="categoryPath(category)" @click="catOpen = false">
+                {{ category.name }}
+              </NuxtLink>
             </li>
             <li v-if="topLevelCategories.length === 0">
-              <span class="dropdown-item text-muted">{{ t('nav.noCategories') }}</span>
+              <span class="dropdown-item text-muted">{{ t('layout.header.noCategories') }}</span>
             </li>
           </ul>
         </li>
       </ul>
 
       <div class="collapse navbar-collapse">
-        <ul class="navbar-nav me-auto ms-68">
-          <li class="nav-item">
-            <NuxtLink class="nav-link" to="/"> {{ t('nav.home') }} </NuxtLink>
-          </li>
-
-          <li class="nav-item">
-            <NuxtLink class="nav-link" to="/products"> {{ t('nav.products') }} </NuxtLink>
-          </li>
-
-          <li class="nav-item">
-            <NuxtLink class="nav-link" to="/categories"> {{ t('nav.categories') }} </NuxtLink>
-          </li>
-
-          <li class="nav-item">
-            <NuxtLink class="nav-link" to="/about-us"> {{ t('nav.about') }} </NuxtLink>
-          </li>
-
-          <li class="nav-item">
-            <NuxtLink class="nav-link" to="/contact"> {{ t('nav.contact') }} </NuxtLink>
-          </li>
-        </ul>
+        <LayoutNavLinks />
       </div>
 
-      <ul
-        class="d-none d-lg-flex others-options ps-0 mb-0 list-unstyled justify-content-end"
-      >
-        <li class="info" v-if="phone">
-          <a :href="`tel:${phone}`" class="text-decoration-none">
+      <ul class="d-none d-lg-flex others-options grocery-options ps-0 mb-0 list-unstyled justify-content-end">
+        <li v-if="phone" class="info">
+          <a :href="`tel:${phone}`" class="text-decoration-none success-hover-bg">
             <div class="d-flex align-items-center">
-              <div class="flex-shrink-0">
-                <i class="ri-phone-line bg-danger-10"></i>
-              </div>
+              <div class="flex-shrink-0"><i class="ri-phone-line"></i></div>
               <div class="flex-grow-1 ms-10">
-                <span>{{ t('nav.hotline') }}</span>
+                <span>{{ t('layout.header.hotline') }}</span>
                 <h3>{{ phone }}</h3>
               </div>
             </div>
@@ -118,70 +72,3 @@
     </div>
   </div>
 </template>
-
-<script lang="ts">
-import { defineComponent, ref, watch, onMounted, computed } from "vue";
-import stateStore from "~/utils/store";
-
-import defaultLogoImg from "~/assets/images/logo.png";
-
-export default defineComponent({
-  name: "Navbar",
-  setup() {
-    const isSticky = ref(false);
-    const show = ref(false);
-    const buttonShowState = ref(false);
-    const activeSubDropdown = ref<string | null>(null);
-    const stateStoreInstance = stateStore;
-    const defaultLogo = defaultLogoImg;
-
-    const { t } = useI18n();
-    const { topLevelCategories, getSubcategories } = useCategories();
-    const { logoUrl, contactInfo } = useSiteConfig();
-
-    const phone = computed(() => contactInfo.value?.phone);
-
-    const toggleCategories = () => {
-      show.value = !show.value;
-      buttonShowState.value = !buttonShowState.value;
-    };
-
-    const toggleSubDropdown = (subDropdown: string) => {
-      activeSubDropdown.value =
-        activeSubDropdown.value === subDropdown ? null : subDropdown;
-    };
-
-    const handleScroll = () => {
-      const scrollPos = window.scrollY;
-      isSticky.value = scrollPos >= 100;
-    };
-
-    onMounted(() => {
-      window.addEventListener("scroll", handleScroll);
-    });
-
-    watch(isSticky, (newValue: any) => {
-      if (newValue) {
-        show.value = false;
-        buttonShowState.value = false;
-      }
-    });
-
-    return {
-      isSticky,
-      show,
-      buttonShowState,
-      toggleCategories,
-      toggleSubDropdown,
-      activeSubDropdown,
-      stateStoreInstance,
-      defaultLogo,
-      topLevelCategories,
-      getSubcategories,
-      logoUrl,
-      phone,
-      t,
-    };
-  },
-});
-</script>

package/components/Layout/NavbarStyleFour.vue

@@ -1,334 +1,3 @@
 <template>
-  <div
-    :class="[
-      'navbar navbar-expand-lg bg-warningdiv1 ptb-6',
-      { sticky: isSticky },
-    ]"
-  >
-    <div class="container mw-1610">
-      <NuxtLink class="navbar-brand d-lg-none" to="/">
-        <img
-          src="~/assets/images/grocery-shop-logo.png"
-          class="main-logo"
-          alt="white-logo"
-        />
-      </NuxtLink>
-      <a
-        class="navbar-toggler"
-        href="javascript:void(0);"
-        @click="stateStoreInstance.onChangeShow"
-      >
-        <span class="burger-menu">
-          <span class="top-bar"></span>
-          <span class="middle-bar"></span>
-          <span class="bottom-bar"></span>
-        </span>
-      </a>
-
-      <div class="collapse navbar-collapse" id="navbarSupportedContent">
-        <ul class="navbar-nav me-auto">
-          <li class="nav-item dropdown">
-            <a class="nav-link dropdown-toggle" href="#"> Home </a>
-
-            <ul class="dropdown-menu">
-              <li>
-                <NuxtLink class="dropdown-item" to="/">
-                  Electronics & Telemobile Online Shop
-                </NuxtLink>
-              </li>
-              <li>
-                <NuxtLink class="dropdown-item" to="/grocery-shop">
-                  Grocery Shop
-                </NuxtLink>
-              </li>
-              <li>
-                <NuxtLink class="dropdown-item" to="/healthy-diet-foods-shop">
-                  Healthy Diet Foods Shop
-                </NuxtLink>
-              </li>
-            </ul>
-          </li>
-
-          <li class="nav-item dropdown">
-            <a class="nav-link dropdown-toggle" href="#"> Pages </a>
-
-            <ul class="dropdown-menu">
-              <li>
-                <NuxtLink class="dropdown-item" to="/about-us">
-                  About Us
-                </NuxtLink>
-              </li>
-
-              <li>
-                <a class="dropdown-item sub-dropdown dropdown-toggle" href="#">
-                  Authentication
-                </a>
-
-                <ul class="dropdown-menu">
-                  <li>
-                    <NuxtLink class="dropdown-item" to="/login">
-                      Login
-                    </NuxtLink>
-                  </li>
-                  <li>
-                    <NuxtLink class="dropdown-item" to="/register">
-                      Register
-                    </NuxtLink>
-                  </li>
-                  <li>
-                    <NuxtLink class="dropdown-item" to="/my-account">
-                      My Account
-                    </NuxtLink>
-                  </li>
-                  <li>
-                    <NuxtLink class="dropdown-item" to="/change-password">
-                      Change Password
-                    </NuxtLink>
-                  </li>
-                  <li>
-                    <NuxtLink class="dropdown-item" to="/forgot-password">
-                      Forgot Password
-                    </NuxtLink>
-                  </li>
-                </ul>
-              </li>
-              <li>
-                <NuxtLink class="dropdown-item" to="/faq"> FAQ </NuxtLink>
-              </li>
-              <li>
-                <NuxtLink class="dropdown-item" to="/privacy-policy">
-                  Privacy Policy
-                </NuxtLink>
-              </li>
-              <li>
-                <NuxtLink class="dropdown-item" to="/terms-conditions">
-                  Terms & Conditions
-                </NuxtLink>
-              </li>
-            </ul>
-          </li>
-
-          <li class="nav-item mega-menu">
-            <a href="#" class="nav-link dropdown-toggle"> Shop </a>
-
-            <ul class="dropdown-menu">
-              <li class="nav-item">
-                <div class="row">
-                  <div class="col">
-                    <h6 class="sub-menu-title">Product Layouts</h6>
-
-                    <ul class="sub-menu">
-                      <li>
-                        <NuxtLink class="dropdown-item" to="/best-sellers">
-                          Best Sellers
-                        </NuxtLink>
-                      </li>
-                      <li>
-                        <NuxtLink class="dropdown-item" to="/featured-products">
-                          Featured Products
-                        </NuxtLink>
-                      </li>
-                      <li>
-                        <NuxtLink class="dropdown-item" to="/trending-products">
-                          Trending Products
-                        </NuxtLink>
-                      </li>
-                      <li>
-                        <NuxtLink class="dropdown-item" to="/new-arrivals">
-                          New Arrivals
-                        </NuxtLink>
-                      </li>
-                      <li>
-                        <NuxtLink class="dropdown-item" to="/categories">
-                          Categories
-                        </NuxtLink>
-                      </li>
-                    </ul>
-                  </div>
-
-                  <div class="col">
-                    <h6 class="sub-menu-title">Products Step</h6>
-
-                    <ul class="sub-menu">
-                      <li>
-                        <NuxtLink class="dropdown-item" to="/products">
-                          Products
-                        </NuxtLink>
-                      </li>
-                      <li>
-                        <NuxtLink class="dropdown-item" to="/cart">
-                          Cart
-                        </NuxtLink>
-                      </li>
-                      <li>
-                        <NuxtLink class="dropdown-item" to="/wishlist">
-                          Wishlist
-                        </NuxtLink>
-                      </li>
-                      <li>
-                        <NuxtLink class="dropdown-item" to="/checkout">
-                          Checkout
-                        </NuxtLink>
-                      </li>
-                      <li>
-                        <NuxtLink class="dropdown-item" to="/product-details">
-                          Product Details
-                        </NuxtLink>
-                      </li>
-                    </ul>
-                  </div>
-
-                  <div class="col">
-                    <h6 class="sub-menu-title">Admin Page</h6>
-
-                    <ul class="sub-menu">
-                      <li>
-                        <NuxtLink class="dropdown-item" to="/dashboard">
-                          Dashboard
-                        </NuxtLink>
-                      </li>
-                      <li>
-                        <NuxtLink class="dropdown-item" to="/edit-profile">
-                          Edit Profile
-                        </NuxtLink>
-                      </li>
-                      <li>
-                        <NuxtLink class="dropdown-item" to="/order-history">
-                          Order History
-                        </NuxtLink>
-                      </li>
-                      <li>
-                        <NuxtLink class="dropdown-item" to="/order-details">
-                          Order Details
-                        </NuxtLink>
-                      </li>
-                      <li>
-                        <NuxtLink class="dropdown-item" to="/password">
-                          Change Password
-                        </NuxtLink>
-                      </li>
-                    </ul>
-                  </div>
-
-                  <div class="col">
-                    <NuxtLink
-                      to="/products"
-                      class="bg-img menu-img"
-                      :style="{
-                        'background-image': `url(${image})`,
-                      }"
-                    >
-                    </NuxtLink>
-                  </div>
-                </div>
-              </li>
-            </ul>
-          </li>
-
-          <li class="nav-item dropdown">
-            <a class="nav-link dropdown-toggle" href="#"> Blog </a>
-
-            <ul class="dropdown-menu">
-              <li>
-                <NuxtLink class="dropdown-item" to="/our-blog">
-                  Our Blog
-                </NuxtLink>
-              </li>
-              <li>
-                <NuxtLink class="dropdown-item" to="/blog-details">
-                  Blog Details
-                </NuxtLink>
-              </li>
-              <li>
-                <NuxtLink class="dropdown-item" to="/tags"> Tags </NuxtLink>
-              </li>
-              <li>
-                <NuxtLink class="dropdown-item" to="/categories">
-                  Categories
-                </NuxtLink>
-              </li>
-              <li>
-                <NuxtLink class="dropdown-item" to="/author"> Author </NuxtLink>
-              </li>
-            </ul>
-          </li>
-
-          <li class="nav-item dropdown">
-            <NuxtLink class="nav-link" to="/contact"> Contact </NuxtLink>
-          </li>
-        </ul>
-      </div>
-
-      <ul
-        class="d-none d-lg-flex others-options grocery-options ps-0 mb-0 list-unstyled justify-content-end"
-      >
-        <li class="info">
-          <a href="tel:808-555-0111" class="text-decoration-none">
-            <div class="d-flex align-items-center">
-              <div class="flex-shrink-0">
-                <i class="ri-phone-line bg-danger-10"></i>
-              </div>
-              <div class="flex-grow-1 ms-10">
-                <span>Hotline</span>
-                <h3>(808) 555-0111</h3>
-              </div>
-            </div>
-          </a>
-        </li>
-        <li class="info">
-          <a
-            href="#"
-            class="text-decoration-none success-hover-bg"
-            @click="stateStoreInstance.onChange"
-          >
-            <div class="d-flex align-items-center">
-              <div class="flex-shrink-0">
-                <i class="ri-map-pin-2-line"></i>
-              </div>
-              <div class="flex-grow-1 ms-10">
-                <span>Deliver to</span>
-                <h3>Find Location</h3>
-              </div>
-            </div>
-          </a>
-        </li>
-      </ul>
-    </div>
-  </div>
+  <LayoutNavbar :with-categories="false" />
 </template>
-
-<script lang="ts">
-import { defineComponent, ref, onMounted } from "vue";
-import stateStore from "~/utils/store";
-
-import image from "~/assets/images/menu-product.jpg";
-
-export default defineComponent({
-  name: "NavbarStyleFour",
-  setup() {
-    const isSticky = ref(false);
-    const show = ref(false);
-    const stateStoreInstance = stateStore;
-
-    const toggleCategories = () => {
-      show.value = !show.value;
-    };
-
-    const handleScroll = () => {
-      const scrollPos = window.scrollY;
-      isSticky.value = scrollPos >= 100;
-    };
-
-    onMounted(() => {
-      window.addEventListener("scroll", handleScroll);
-    });
-
-    return {
-      isSticky,
-      toggleCategories,
-      stateStoreInstance,
-      image,
-    };
-  },
-});
-</script>