@crm-market/template-shared 1.0.0

package/components/Layout/NavbarStyleThree.vue

@@ -0,0 +1,188 @@
+<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>Browse Categories</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">No categories</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="/"> Home </NuxtLink>
+          </li>
+
+          <li class="nav-item">
+            <NuxtLink class="nav-link" to="/products"> Products </NuxtLink>
+          </li>
+
+          <li class="nav-item">
+            <NuxtLink class="nav-link" to="/categories"> Categories </NuxtLink>
+          </li>
+
+          <li class="nav-item">
+            <NuxtLink class="nav-link" to="/about-us"> About </NuxtLink>
+          </li>
+
+          <li class="nav-item">
+            <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" 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>Hotline</span>
+                <h3>{{ phone }}</h3>
+              </div>
+            </div>
+          </a>
+        </li>
+      </ul>
+    </div>
+  </div>
+</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 { 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,
+    };
+  },
+});
+</script>

package/components/Layout/NavbarStyleTwo.vue

@@ -0,0 +1,108 @@
+<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="/"> Home </NuxtLink>
+          </li>
+
+          <li class="nav-item">
+            <NuxtLink class="nav-link" to="/products"> Products </NuxtLink>
+          </li>
+
+          <li class="nav-item">
+            <NuxtLink class="nav-link" to="/categories"> Categories </NuxtLink>
+          </li>
+
+          <li class="nav-item">
+            <NuxtLink class="nav-link" to="/about-us"> About </NuxtLink>
+          </li>
+
+          <li class="nav-item">
+            <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" 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>Hotline</span>
+                <h3>{{ phone }}</h3>
+              </div>
+            </div>
+          </a>
+        </li>
+      </ul>
+    </div>
+  </div>
+</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 { 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,
+    };
+  },
+});
+</script>

package/components/Layout/Preloader.vue

@@ -0,0 +1,18 @@
+<template>
+  <div id="preloader">
+    <div class="preloader">
+      <div class="waviy">
+        <span>T</span>
+        <span>U</span>
+        <span>A</span>
+        <span>N</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Preloader",
+};
+</script>

package/components/Layout/RTLSwitchBtn.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="settings-btn rtl-btn">
+    <label id="switch" class="switch">
+      <input type="checkbox" @change="toggleRTL" id="slider" />
+      <span class="slider round"></span>
+    </label>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, onMounted, ref } from "vue";
+
+export default defineComponent({
+  name: "RTLSwitchBtn",
+  setup() {
+    const isRTLEnabled = ref(false);
+
+    const toggleRTL = () => {
+      isRTLEnabled.value = !isRTLEnabled.value;
+      document.body.classList.toggle("rtl", isRTLEnabled.value);
+      localStorage.setItem("isRTLEnabled", JSON.stringify(isRTLEnabled.value));
+    };
+
+    onMounted(() => {
+      const savedRTLEnabled = localStorage.getItem("isRTLEnabled");
+      if (savedRTLEnabled) {
+        isRTLEnabled.value = JSON.parse(savedRTLEnabled);
+        if (isRTLEnabled.value) {
+          document.body.classList.add("rtl");
+        }
+      }
+    });
+
+    return {
+      toggleRTL,
+      isRTLEnabled,
+    };
+  },
+});
+</script>