s4

components.d.ts

@@ -13,6 +13,7 @@ declare module '@vue/runtime-core' {
     Header: typeof import('./src/components/Header.vue')['default']
     'Header - Copy': typeof import('./src/components/Header - Copy.vue')['default']
     MainMenu: typeof import('./src/components/MainMenu.vue')['default']
+    Product: typeof import('./src/components/product.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
   }

package.json

@@ -2,7 +2,7 @@
   "name": "vite-vue3-tailwind-starter",
   "version": "0.0.0",
   "scripts": {
-    "dev": "vite --host --port 2001",
+    "dev": "vite --host --port 2002",
     "build": "vue-tsc --noEmit && vite build",
     "serve": "vite preview"
   },

src/components/Header.vue

@@ -5,6 +5,7 @@
 
 
   <div class="container-fluid">
+
     
   <div class=" bg-white border-b-2 border-gray-100 ">
     <div class="mx-auto max-w-7xl px-4 sm:px-6">
@@ -12,26 +13,41 @@
         <div class="flex justify-start  lg:flex-1">
 
           <router-link to="/" class="flex items-center">
-            <img src="/img/logo.png" class="mr-3 h-6 sm:h-10">
+            <img src="/img/logo.png" class=" h-10">
           </router-link>
         </div>
+          <div class="z-50 fixed bottom-0 left-0 w-screen lg:hidden">
+            <div class="m-6">
 
-        <div class=" space-x-5 md:flex uppercase">
+              <div  :class="{hidden: isOpen}" class="mobileMenu rounded-md flex flex-col bg-green-700 ">
+                  <router-link @click="mobileMenu" v-for="item in mainMenu" :key="item.title" :to="item.link"  class="mainMenu-active text-center pb-2 pt-2 rounded-md font-medium text-green-200 hover:bg-green-400 hover:text-white"  >  {{item.title}}  </router-link>
+                  <!-- <router-link @click="mobileMenu" class="mainMenu-active text-center pb-2 pt-2 rounded-md font-medium text-green-200 hover:bg-green-400 hover:text-white" to="/administrators" > Administrators </router-link> 
+                  <router-link @click="mobileMenu" class="mainMenu-active text-center pb-2 pt-2 rounded-md font-medium text-green-200 hover:bg-green-400 hover:text-white" to="/resources" > Resources </router-link>
+                  <router-link @click="mobileMenu" class="mainMenu-active text-center pb-2 pt-2 rounded-md font-medium text-green-200 hover:bg-green-400 hover:text-white" to="/occassion" > Occassion </router-link>
+                  <router-link @click="mobileMenu" class="mainMenu-active text-center pb-2 pt-2 rounded-md font-medium text-green-200 hover:bg-green-400 hover:text-white" to="/themes" > Themes </router-link> 
+                  <router-link @click="mobileMenu" class="mainMenu-active text-center pb-2 pt-2 rounded-md font-medium text-green-200 hover:bg-green-400 hover:text-white" to="/blog" > Blog </router-link> -->
+              </div>
+              <div  @click="mobileMenu" class="mainMenu-active text-center p-2 rounded-md font-medium text-green-100 bg-green-800 hover:bg-green-900 hover:text-white"  > Menu </div> 
+            </div>
+          </div>
 
 
-          <router-link to="/" class="text-xs font-bold text-black-500 hover:text-black-900" aria-current="page">New Arrivals </router-link>
+        
-          <router-link to="/" class="text-xs font-bold text-black-500 hover:text-black-900" aria-current="page">Cases & Sleeves </router-link>
-          <router-link to="/" class="text-xs font-bold text-black-500 hover:text-black-900" aria-current="page">Accessories </router-link>
-          <router-link to="/" class="text-xs font-bold text-black-500 hover:text-black-900" aria-current="page">Sale </router-link>
-          <router-link to="/" class="text-xs font-bold text-black-500 hover:text-black-900" aria-current="page">Bags & wallets </router-link>
-          <router-link to="/" class="text-xs font-bold text-black-500 hover:text-black-900" aria-current="page">Home Office </router-link>
-          <router-link to="/" class="text-xs font-bold text-black-500 hover:text-black-900" aria-current="page">Collections </router-link>
-          <router-link to="/" class="text-xs font-bold text-black-500 hover:text-black-900" aria-current="page">Corporate Gifting </router-link>
 
+        <div class="hidden lg:block  space-x-5 uppercase">
+          <router-link v-for="item in mainMenu" :key="item.title" :to="item.link" class="text-sm font-bold hover:text-black-900" aria-current="page"> {{item.title}} </router-link>
+          <!-- <router-link to="/" class="text-sm font-bold hover:text-black-900" aria-current="page">New </router-link>
+          <router-link to="/" class="text-sm font-bold hover:text-black-900" aria-current="page">Cases </router-link>
+          <router-link to="/" class="text-sm font-bold hover:text-black-900" aria-current="page">Accessories </router-link>
+          <router-link to="/" class="text-sm font-bold hover:text-black-900" aria-current="page">Sale </router-link>
+          <router-link to="/" class="text-sm font-bold hover:text-black-900" aria-current="page">Bags & wallets </router-link>
+          <router-link to="/" class="text-sm font-bold hover:text-black-900" aria-current="page">Home Office </router-link>
+          <router-link to="/" class="text-sm font-bold hover:text-black-900" aria-current="page">Collections </router-link> -->
+          <!-- <router-link to="/" class="text-sm font-bold hover:text-black-900" aria-current="page">Corporate Gifting </router-link> -->
         </div>
         <div class=" items-center justify-end md:flex md:flex-1 lg:w-0">
           
-          <a href="#" class="whitespace-nowrap text-sm font-medium text-gray-500 hover:text-gray-900">
+          <a href="#" class="whitespace-nowrap text-sm font-medium text-gray-500  inline-flex hover:text-gray-900">
             <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cart" viewBox="0 0 16 16"> <path d="M0 1.5A.5.5 0 0 1 .5 1H2a.5.5 0 0 1 .485.379L2.89 3H14.5a.5.5 0 0 1 .491.592l-1.5 8A.5.5 0 0 1 13 12H4a.5.5 0 0 1-.491-.408L2.01 3.607 1.61 2H.5a.5.5 0 0 1-.5-.5zM3.102 4l1.313 7h8.17l1.313-7H3.102zM5 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm-7 1a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm7 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/> </svg>
           </a>
           <a href="#"
@@ -48,3 +64,39 @@
 </div>
 
 </template>
+
+
+<style scoped>
+ .router-link-exact-active.mainMenu-active{
+    background-color: #f19138bd;
+    color:#ffffff
+ }
+</style>
+
+<script>
+export default {
+
+data() {
+    return {
+      isOpen: false,
+      mainMenu: [
+          { title: 'New', icon: 'dashboard', link: "/new"  },
+          { title: 'Cases', icon: 'dashboard', link: "/cases"  },
+          { title: 'Accessories', icon: 'dashboard', link: "/accessories"  },
+          { title: 'Sale', icon: 'dashboard', link: "/sale"  },
+          { title: 'Bags & wallets', icon: 'dashboard', link: "/bags"  },
+          { title: 'Home Office', icon: 'dashboard', link: "/home-office"  },
+          { title: 'Collections', icon: 'dashboard', link: "/collections"  }
+
+        ],
+
+    }
+  },
+  methods: {
+    mobileMenu: function() {
+      this.isOpen = !this.isOpen;
+      // some code to filter users
+    }
+  }
+}
+</script>

src/pages/product.vue

@@ -0,0 +1,26 @@
+<template>
+    <div>
+        <section>
+            <div class="grid grid-cols-2">
+                <div class="grid-1 bg-blue-400 p-3"><img src="/img/guitarimage.jpg" alt="guitarimage.jpg" width="512px"></div>
+                <div class="grid-2 grid-rows-4 bg-green-400">
+                   <div class="text-xl p-3 bg-red-400"><p>REVEL RVL-38C-LGP-BLS Acoustic Guitar Linden Wood Ebony Right Hand Orientation  (Blue)</p></div>
+                        <div class="text-xl p-3 bg-blue-500"><p>₹2,399</p></div>
+                            <div class="grid grid-cols text-xl p-4">Coupons For You
+                                <div class="text-sm">Special Price₹100 off with cashback coupon on First Order
+                                    <button class="T&C text-blue-900 font-semibold">T&C</button>
+                                        <div class="grid grid-cols text-xl pt-3">Available offers
+                                            <div class="text-sm">Special PriceGet extra ₹99 off (price inclusive of cashback/coupon)
+                                            <button class="T&C text-blue-900 font-semibold">T&C</button></div>
+                                            
+                                    </div>
+                                </div>
+                            </div>          
+                        </div>
+                    </div>
+                </section>
+            <div class="flex">
+            <button class="add to card bg-orange-400 text-white font-bold p-2">ADD TO CART</button>
+        </div> 
+    </div>
+</template> 

typed-router.d.ts

@@ -41,6 +41,8 @@ declare module 'vue-router/auto/routes' {
     '/item/': RouteRecordInfo<'/item/', '/item/', Record<never, never>, Record<never, never>>,
     '/item/[id]': RouteRecordInfo<'/item/[id]', '/item/:id', { id: ParamValue<true> }, { id: ParamValue<false> }>,
     '/item/demo': RouteRecordInfo<'/item/demo', '/item/demo', Record<never, never>, Record<never, never>>,
+    '/product': RouteRecordInfo<'/product', '/product', Record<never, never>, Record<never, never>>,
+    '/seller/': RouteRecordInfo<'/seller/', '/seller/', Record<never, never>, Record<never, never>>,
     '/test1': RouteRecordInfo<'/test1', '/test1', Record<never, never>, Record<never, never>>,
   }
 }