@crm-market/template-shared 1.0.0

package/components/Layout/ResponsiveNavbar.vue

@@ -0,0 +1,431 @@
+<template>
+  <div
+    :class="[
+      'mobile-navbar offcanvas offcanvas-end border-0',
+      { show: stateStoreInstance.show },
+    ]"
+  >
+    <div class="offcanvas-header justify-space-between">
+      <NuxtLink to="/" class="logo d-inline-block">
+        <img src="~/assets/images/logo.png" alt="logo" />
+      </NuxtLink>
+
+      <button
+        type="button"
+        class="close-btn bg-transparent position-relative lh-1 p-0 border-0"
+        @click="stateStoreInstance.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>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>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"
+                >
+                  About Us
+                </NuxtLink>
+              </li>
+              <li class="mobile-menu-list">
+                <v-expansion-panels variant="accordion">
+                  <v-expansion-panel>
+                    <v-expansion-panel-title>
+                      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"
+                          >
+                            Login
+                          </NuxtLink>
+                        </li>
+                        <li>
+                          <NuxtLink
+                            class="dropdown-item"
+                            to="/register"
+                            @click="stateStoreInstance.onChangeShow"
+                          >
+                            Register
+                          </NuxtLink>
+                        </li>
+                        <li>
+                          <NuxtLink
+                            class="dropdown-item"
+                            to="/my-account"
+                            @click="stateStoreInstance.onChangeShow"
+                          >
+                            My Account
+                          </NuxtLink>
+                        </li>
+                        <li>
+                          <NuxtLink
+                            class="dropdown-item"
+                            to="/change-password"
+                            @click="stateStoreInstance.onChangeShow"
+                          >
+                            Change Password
+                          </NuxtLink>
+                        </li>
+                        <li>
+                          <NuxtLink
+                            class="dropdown-item"
+                            to="/forgot-password"
+                            @click="stateStoreInstance.onChangeShow"
+                          >
+                            Forgot Password
+                          </NuxtLink>
+                        </li>
+                      </ul>
+                    </v-expansion-panel-text>
+                  </v-expansion-panel>
+                </v-expansion-panels>
+              </li>
+              <li>
+                <NuxtLink
+                  class="dropdown-item"
+                  to="/faq"
+                  @click="stateStoreInstance.onChangeShow"
+                >
+                  FAQ
+                </NuxtLink>
+              </li>
+              <li>
+                <NuxtLink
+                  class="dropdown-item"
+                  to="/privacy-policy"
+                  @click="stateStoreInstance.onChangeShow"
+                >
+                  Privacy Policy
+                </NuxtLink>
+              </li>
+              <li>
+                <NuxtLink
+                  class="dropdown-item"
+                  to="/terms-conditions"
+                  @click="stateStoreInstance.onChangeShow"
+                >
+                  Terms & Conditions
+                </NuxtLink>
+              </li>
+            </ul>
+          </v-expansion-panel-text>
+        </v-expansion-panel>
+        <v-expansion-panel>
+          <v-expansion-panel-title>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>
+                      Product Layouts
+                    </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"
+                          >
+                            Best Sellers
+                          </NuxtLink>
+                        </li>
+                        <li>
+                          <NuxtLink
+                            class="dropdown-item"
+                            to="/featured-products"
+                            @click="stateStoreInstance.onChangeShow"
+                          >
+                            Featured Products
+                          </NuxtLink>
+                        </li>
+                        <li>
+                          <NuxtLink
+                            class="dropdown-item"
+                            to="/trending-products"
+                            @click="stateStoreInstance.onChangeShow"
+                          >
+                            Trending Products
+                          </NuxtLink>
+                        </li>
+                        <li>
+                          <NuxtLink
+                            class="dropdown-item"
+                            to="/new-arrivals"
+                            @click="stateStoreInstance.onChangeShow"
+                          >
+                            New Arrivals
+                          </NuxtLink>
+                        </li>
+                        <li>
+                          <NuxtLink
+                            class="dropdown-item"
+                            to="/categories"
+                            @click="stateStoreInstance.onChangeShow"
+                          >
+                            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>
+                      Products Step
+                    </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"
+                          >
+                            Products
+                          </NuxtLink>
+                        </li>
+                        <li>
+                          <NuxtLink
+                            class="dropdown-item"
+                            to="/cart"
+                            @click="stateStoreInstance.onChangeShow"
+                          >
+                            Cart
+                          </NuxtLink>
+                        </li>
+                        <li>
+                          <NuxtLink
+                            class="dropdown-item"
+                            to="/wishlist"
+                            @click="stateStoreInstance.onChangeShow"
+                          >
+                            Wishlist
+                          </NuxtLink>
+                        </li>
+                        <li>
+                          <NuxtLink
+                            class="dropdown-item"
+                            to="/checkout"
+                            @click="stateStoreInstance.onChangeShow"
+                          >
+                            Checkout
+                          </NuxtLink>
+                        </li>
+                        <li>
+                          <NuxtLink
+                            class="dropdown-item"
+                            to="/product-details"
+                            @click="stateStoreInstance.onChangeShow"
+                          >
+                            Product Details
+                          </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>
+                      Admin Page
+                    </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"
+                          >
+                            Dashboard
+                          </NuxtLink>
+                        </li>
+                        <li>
+                          <NuxtLink
+                            class="dropdown-item"
+                            to="/edit-profile"
+                            @click="stateStoreInstance.onChangeShow"
+                          >
+                            Edit Profile
+                          </NuxtLink>
+                        </li>
+                        <li>
+                          <NuxtLink
+                            class="dropdown-item"
+                            to="/order-history"
+                            @click="stateStoreInstance.onChangeShow"
+                          >
+                            Order History
+                          </NuxtLink>
+                        </li>
+                        <li>
+                          <NuxtLink
+                            class="dropdown-item"
+                            to="/order-details"
+                            @click="stateStoreInstance.onChangeShow"
+                          >
+                            Order Details
+                          </NuxtLink>
+                        </li>
+                        <li>
+                          <NuxtLink
+                            class="dropdown-item"
+                            to="/change-password"
+                            @click="stateStoreInstance.onChangeShow"
+                          >
+                            Change Password
+                          </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>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"
+                >
+                  Our Blog
+                </NuxtLink>
+              </li>
+              <li>
+                <NuxtLink
+                  class="dropdown-item"
+                  to="/blog-details"
+                  @click="stateStoreInstance.onChangeShow"
+                >
+                  Blog Details
+                </NuxtLink>
+              </li>
+              <li>
+                <NuxtLink
+                  class="dropdown-item"
+                  to="/tags"
+                  @click="stateStoreInstance.onChangeShow"
+                >
+                  Tags
+                </NuxtLink>
+              </li>
+              <li>
+                <NuxtLink
+                  class="dropdown-item"
+                  to="/categories"
+                  @click="stateStoreInstance.onChangeShow"
+                >
+                  Categories
+                </NuxtLink>
+              </li>
+              <li>
+                <NuxtLink
+                  class="dropdown-item"
+                  to="/author"
+                  @click="stateStoreInstance.onChangeShow"
+                >
+                  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">
+              Contact
+            </NuxtLink>
+          </v-expansion-panel-title>
+        </v-expansion-panel>
+      </v-expansion-panels>
+    </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 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,
+    };
+  },
+});
+</script>

package/components/Layout/TopHeader.vue

@@ -0,0 +1,130 @@
+<template>
+  <div class="top-header-area border-bottom ptb-12">
+    <div class="container">
+      <v-row>
+        <v-col cols="12" lg="6" md="5">
+          <ul
+            class="ps-0 mb-0 list-unstyled info-link d-flex align-items-center justify-content-center justify-content-md-start position-relative tops-1"
+          >
+            <li>
+              <NuxtLink to="/about-us">About Us</NuxtLink>
+            </li>
+            <li>
+              <NuxtLink to="/faq">FAQs</NuxtLink>
+            </li>
+            <li>
+              <NuxtLink to="/contact">Help & Contact</NuxtLink>
+            </li>
+          </ul>
+        </v-col>
+        <v-col cols="12" lg="6" md="7">
+          <ul
+            class="ps-0 mb-0 list-unstyled info-link info-right d-flex align-items-center justify-content-center justify-content-md-end mt-2 mt-md-0"
+          >
+            <li>
+              <NuxtLink
+                to="/products"
+                class="text-danger d-flex align-items-center position-relative tops-1"
+              >
+                <i class="flaticon-flash-sale"></i>
+                <span>Flash sale 20% off</span>
+              </NuxtLink>
+            </li>
+            <li>
+              <div class="dropdown flag-wrap">
+                <button
+                  class="dropdown-toggle fw-medium fs-14 p-0 border-0 bg-transparent flag"
+                  @click="toggleDropdown"
+                  :aria-pressed="show ? 'true' : 'false'"
+                  :class="{ show: buttonShowState }"
+                >
+                  <img :src="currentImage" :alt="currentName" />
+                  <span>{{ currentName }}</span>
+                </button>
+                <ul class="dropdown-menu" :class="{ toggler: show }">
+                  <li>
+                    <div v-if="languages.length > 0">
+                      <a
+                        class="dropdown-item d-flex align-items-center"
+                        href="#"
+                        v-for="(language, index) in languages"
+                        :key="language.id"
+                        @click.prevent="toggleSelected(language, index)"
+                      >
+                        <img :src="language.image" :alt="language.name" />
+                        <span class="ms-2">{{ language.name }}</span>
+                      </a>
+                    </div>
+                  </li>
+                </ul>
+              </div>
+            </li>
+            <li>
+              <select
+                class="form-select p-0 border-0 currency fw-medium fs-14 text-secondary"
+                aria-label="Default select example"
+              >
+                <option selected>USD $</option>
+                <option value="1">EUR £</option>
+                <option value="2">YEN ¥</option>
+              </select>
+            </li>
+          </ul>
+        </v-col>
+      </v-row>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from "vue";
+import image1 from "~/assets/images/united-states.png";
+import image2 from "~/assets/images/china.png";
+import image3 from "~/assets/images/arabi.png";
+
+interface LanguageOption {
+  id: string;
+  image: string;
+  name: string;
+}
+
+export default defineComponent({
+  name: "TopHeader",
+  setup() {
+    const show = ref(false);
+    const buttonShowState = ref(false);
+    const languages = ref<LanguageOption[]>([
+      { id: "1", image: image1, name: "English" },
+      { id: "2", image: image2, name: "China" },
+      { id: "3", image: image3, name: "Arabic" },
+    ]);
+    const currentName = ref("English");
+    const currentImage = ref(image1);
+    const clicked = ref<number | null>(null);
+
+    const toggleDropdown = () => {
+      show.value = !show.value;
+      buttonShowState.value = !buttonShowState.value;
+    };
+
+    const toggleSelected = (language: LanguageOption, index: number) => {
+      clicked.value = clicked.value === index ? null : index;
+      currentName.value = language.name;
+      currentImage.value = language.image;
+      show.value = false;
+      buttonShowState.value = false;
+    };
+
+    return {
+      show,
+      buttonShowState,
+      languages,
+      currentName,
+      currentImage,
+      clicked,
+      toggleDropdown,
+      toggleSelected,
+    };
+  },
+});
+</script>

package/components/Login/index.vue

@@ -0,0 +1,94 @@
+<template>
+  <div class="authentication-area ptb-60">
+    <div class="container">
+      <div class="authentication-content">
+        <div class="row">
+          <div class="col-lg-5">
+            <div class="login h-100 text-center">
+              <img
+                src="~/assets/images/login.png"
+                class="h-100 object-fit-cover"
+                alt="login"
+              />
+            </div>
+          </div>
+          <div class="col-lg-7">
+            <div class="authentication-form">
+              <ul class="nav nav-tabs login-tabs" id="myTab" role="tablist">
+                <li class="nav-item" role="presentation">
+                  <NuxtLink to="/login" class="nav-link active">Login</NuxtLink>
+                </li>
+                <li class="nav-item" role="presentation">
+                  <NuxtLink to="/register" class="nav-link">Register</NuxtLink>
+                </li>
+              </ul>
+              <p>
+                If you have an account, sign in with your username or email
+                address.
+              </p>
+              <form>
+                <div class="form-group mb-4">
+                  <label class="label">Username or Email Address *</label>
+                  <input
+                    type="text"
+                    class="form-control"
+                    placeholder="Enter your user name"
+                  />
+                </div>
+                <div class="form-group mb-4">
+                  <label class="label">Your Password *</label>
+                  <input
+                    type="password"
+                    class="form-control"
+                    placeholder="Enter your  password"
+                  />
+                </div>
+                <div class="d-flex justify-content-between mb-4">
+                  <div class="form-check">
+                    <input
+                      class="form-check-input"
+                      type="checkbox"
+                      value=""
+                      id="flexCheckDefault"
+                    />
+                    <label class="form-check-label" for="flexCheckDefault">
+                      Remember
+                    </label>
+                  </div>
+                  <NuxtLink to="/forgot-password" class="text-primary">
+                    Lost your password?
+                  </NuxtLink>
+                </div>
+                <div class="form-group mb-4">
+                  <button
+                    type="submit"
+                    class="btn btn-warning btn-pill text-white w-100 d-block"
+                  >
+                    Login
+                  </button>
+                </div>
+                <div class="form-group mb-0">
+                  <p class="text-secondary ms-1 text-primary">
+                    Don’t have an account?
+                    <NuxtLink
+                      to="/register"
+                      class="text-decoration-none text-primary"
+                    >
+                      Register
+                    </NuxtLink>
+                  </p>
+                </div>
+              </form>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Login",
+};
+</script>