@crm-market/template-shared 1.0.6 → 1.0.8

package/components/Layout/NavbarStyleThree.vue

@@ -1,190 +1,3 @@
 <template>
-  <div :class="['navbar navbar-expand-lg bg-white py-0', { sticky: isSticky }]">
-    <div class="container mw-1610">
-      <NuxtLink class="navbar-brand d-lg-none" to="/">
-        <img
-          :src="logoUrl || defaultLogo"
-          class="main-logo"
-          alt="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>
-
-      <ul 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 }"
-          >
-            <i class="ri-menu-2-line"></i>
-            <span>{{ t('nav.browseCategories') }}</span>
-          </div>
-
-          <ul class="dropdown-menu" :class="{ show: show }">
-            <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>
-            </li>
-            <li v-if="topLevelCategories.length === 0">
-              <span class="dropdown-item text-muted">{{ t('nav.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>
-      </div>
-
-      <ul
-        class="d-none d-lg-flex others-options grocery-options ps-0 mb-0 list-unstyled justify-content-end"
-      >
-        <li class="info" v-if="phone">
-          <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"></i>
-              </div>
-              <div class="flex-grow-1 ms-10">
-                <span>{{ t('nav.hotline') }}</span>
-                <h3>{{ phone }}</h3>
-              </div>
-            </div>
-          </a>
-        </li>
-      </ul>
-    </div>
-  </div>
+  <LayoutNavbar wrap-class="py-0" />
 </template>
-
-<script lang="ts">
-import { defineComponent, ref, watch, onMounted, computed } from "vue";
-import stateStore from "~/utils/store";
-
-import defaultLogoImg from "~/assets/images/grocery-shop-logo.png";
-
-export default defineComponent({
-  name: "NavbarStyleThree",
-  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/NavbarStyleTwo.vue

@@ -1,110 +1,3 @@
 <template>
-  <div
-    :class="['navbar navbar-expand-lg bg-white ptb-6', { sticky: isSticky }]"
-  >
-    <div class="container mw-1610">
-      <NuxtLink class="navbar-brand d-lg-none" to="/">
-        <img
-          :src="logoUrl || defaultLogo"
-          class="main-logo"
-          alt="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">
-            <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>
-      </div>
-
-      <ul
-        class="d-none d-lg-flex others-options grocery-options ps-0 mb-0 list-unstyled justify-content-end"
-      >
-        <li class="info" v-if="phone">
-          <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"></i>
-              </div>
-              <div class="flex-grow-1 ms-10">
-                <span>{{ t('nav.hotline') }}</span>
-                <h3>{{ phone }}</h3>
-              </div>
-            </div>
-          </a>
-        </li>
-      </ul>
-    </div>
-  </div>
+  <LayoutNavbar :with-categories="false" />
 </template>
-
-<script lang="ts">
-import { defineComponent, ref, onMounted, computed } from "vue";
-import stateStore from "~/utils/store";
-
-import defaultLogoImg from "~/assets/images/grocery-shop-logo.png";
-
-export default defineComponent({
-  name: "NavbarStyleTwo",
-  setup() {
-    const isSticky = ref(false);
-    const stateStoreInstance = stateStore;
-    const defaultLogo = defaultLogoImg;
-
-    const { t } = useI18n();
-    const { logoUrl, contactInfo } = useSiteConfig();
-
-    const phone = computed(() => contactInfo.value?.phone);
-
-    const handleScroll = () => {
-      const scrollPos = window.scrollY;
-      isSticky.value = scrollPos >= 100;
-    };
-
-    onMounted(() => {
-      window.addEventListener("scroll", handleScroll);
-    });
-
-    return {
-      isSticky,
-      stateStoreInstance,
-      defaultLogo,
-      logoUrl,
-      phone,
-      t,
-    };
-  },
-});
-</script>

package/components/Layout/Preloader.vue

@@ -1,18 +1,11 @@
+<script setup lang="ts">
+// Нейтральний прелоадер без брендингу теми
+</script>
+
 <template>
   <div id="preloader">
     <div class="preloader">
-      <div class="waviy">
-        <span>T</span>
-        <span>U</span>
-        <span>A</span>
-        <span>N</span>
-      </div>
+      <div class="spinner-border text-success" role="status" aria-hidden="true"></div>
     </div>
   </div>
 </template>
-
-<script>
-export default {
-  name: "Preloader",
-};
-</script>