/
home
/
henzagold
/
oldsite
/
components
/
File Upload :
llllll
Current File: /home/henzagold/oldsite/components/MobileMenu.vue
<template> <!-- Aside (Mobile Navigation) --> <div> <aside class="main-aside"> <div class="aside-title"> <div class="aside-controls aside-trigger"> <h4>هنزاگلد</h4> <div class="close-btn close-dark" @click="toggleMobile"> <span></span> <span></span> </div> </div> <div class="searchbar hide-on-mobile d-lg-none d-xl-flex" style="display:flex;align-items: center"> <form action="/shop" method="get" style="width:100% "> <div class="input-group"> <input style="width: 200px;" autocomplete="off" type="text" name="search" class="form-control" placeholder="جستجو..."> <div class="input-group-append"> <button type="submit"> <svg style="width:24px;height:24px" viewBox="0 0 24 24"> <path fill="currentColor" d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z" /> </svg> <!--<i class="far fa-search"></i>--> </button> </div> </div> </form> </div> </div> <div class="aside-scroll"> <!-- <ul> <li class="menu-item"> <a href="/">صفحه اصلی</a> </li> <li class="menu-item"> <a href="/shop">فروشگاه</a> </li> <li :class="item.childs.length>0 ? `menu-item menu-item-has-children`:`menu-item`" v-for="(item,index) in menu"> <a :href="item.is_master ? `/shop/${item.title}/${item.id}` : `#`" v-if="item.childs.length>0" @click="showSub($event,index)" :class="`link${index}`" :title="item.meta">{{ item.title }}</a> <a :href="item.is_master ? `/shop/${item.title}/${item.id}` : `#`" v-else :title="item.meta">{{ item.title }}</a> <ul class="submenu" v-if="item.childs.length>0" > <li class="menu-item" v-for="(itemChild,index) in item.childs"> <a :href="`/shop/${itemChild.title.split(' ').join('-')}/${itemChild.id}`" :title="itemChild.meta">{{ itemChild.title }}</a> </li> <!– <li class="menu-item"> <a href="/shop?cat=19">سرویس نگین دار</a> </li>–> <!–<li class="menu-item menu-item-has-children"> <a href="#">Product Details</a> <ul class="submenu"> <li class="menu-item"> <a href="product-details-v1.html">Product Details v1</a> </li> <li class="menu-item"> <a href="product-details-v2.html">Product Details v2</a> </li> </ul> </li> <li class="menu-item"> <a href="cart.html">Cart</a> </li> <li class="menu-item"> <a href="checkout.html">Checkout</a> </li> <li class="menu-item"> <a href="wishlist.html">Wishlist</a> </li> <li class="menu-item"> <a href="compare-products.html">Compare Products</a> </li> <li class="menu-item"> <a href="submit-product.html">Submit Product</a> </li>–> </ul> </li> <!–<li class="menu-item menu-item-has-children"> <a href="/shop?cat=14">انگشتر</a> <ul class="submenu"> <li class="menu-item"> <a href="/shop?cat=14">انگشتر فانتزی</a> </li> <li class="menu-item"> <a href="/shop?cat=20">انگشتر نگین دار</a> </li> </ul> </li> <li class="menu-item menu-item-has-children"> <a href="/shop?cat=2">دستبند</a> <ul class="submenu"> <li class="menu-item"> <a href="/shop?cat=23">دستبند النگویی</a> </li> </ul> </li> <li class="menu-item"> <a href="/shop?cat=15">گردنبند</a> </li> <li class="menu-item"> <a href="/shop?cat=18">گوشواره</a> </li> <li class="menu-item"> <a href="/shop?cat=22">رولباسی</a> </li> <li class="menu-item"> <a href="/shop?cat=21">مدال</a> </li>–> <!– Pages Start –> <!–<li class="menu-section-title">Pages</li> <li class="menu-item menu-item-has-children"> <a href="#"> Home Pages</a> <ul class="submenu"> <li class="menu-item"> <a href="index.html">Home v1</a> </li> <li class="menu-item"> <a href="home-v2.html">Home v2</a> </li> <li class="menu-item"> <a href="home-v3.html">Home v3</a> </li> </ul> </li> <li class="menu-item menu-item-has-children"> <a href="#">Shop</a> <ul class="submenu"> <li class="menu-item menu-item-has-children"> <a href="#">Shop</a> <ul class="submenu"> <li class="menu-item"> <a href="shop-list-v1.html">Grid View</a> </li> <li class="menu-item"> <a href="shop-list-v1.html">List v1</a> </li> <li class="menu-item"> <a href="shop-list-v2.html">List v2</a> </li> <li class="menu-item"> <a href="shop-map.html">Shop Map</a> </li> </ul> </li> <li class="menu-item menu-item-has-children"> <a href="#">Product Details</a> <ul class="submenu"> <li class="menu-item"> <a href="product-details-v1.html">Product Details v1</a> </li> <li class="menu-item"> <a href="product-details-v2.html">Product Details v2</a> </li> </ul> </li> <li class="menu-item"> <a href="cart.html">Cart</a> </li> <li class="menu-item"> <a href="checkout.html">Checkout</a> </li> <li class="menu-item"> <a href="wishlist.html">Wishlist</a> </li> <li class="menu-item"> <a href="compare-products.html">Compare Products</a> </li> <li class="menu-item"> <a href="submit-product.html">Submit Product</a> </li> </ul> </li> <li class="menu-item menu-item-has-children"> <a href="#">Pages</a> <ul class="submenu"> <li class="menu-item"> <a href="about-us.html">About Us</a> </li> <li class="menu-item"> <a href="contact-us.html">Contact Us</a> </li> <li class="menu-item"> <a href="legal.html">Legal</a> </li> <li class="menu-item"> <a href="faq.html">FAQ</a> </li> <li class="menu-item"> <a href="coming-soon.html">Coming Soon</a> </li> <li class="menu-item"> <a href="404.html">404</a> </li> <li class="menu-item menu-item-has-children"> <a href="#">Login</a> <ul class="submenu"> <li class="menu-item"> <a href="login-v1.html">Login v1</a> </li> <li class="menu-item"> <a href="login-v2.html">Login v2</a> </li> </ul> </li> <li class="menu-item menu-item-has-children"> <a href="#">Register</a> <ul class="submenu"> <li class="menu-item"> <a href="register-v1.html">Register v1</a> </li> <li class="menu-item"> <a href="register-v2.html">Register v2</a> </li> </ul> </li> </ul> </li> <li class="menu-item menu-item-has-children"> <a href="#">Blog</a> <ul class="submenu"> <li class="menu-item menu-item-has-children"> <a href="#">Blog Archive</a> <ul class="submenu"> <li class="menu-item"> <a href="blog-left-sidebar.html">Left Sidebar</a> </li> <li class="menu-item"> <a href="blog-right-sidebar.html">Right Sidebar</a> </li> <li class="menu-item"> <a href="blog-grid.html">Grid View</a> </li> <li class="menu-item"> <a href="blog-list.html">List View</a> </li> </ul> </li> <li class="menu-item"> <a href="blog-single.html">Blog Single</a> </li> </ul> </li> <li class="menu-item menu-item-has-children"> <a href="#">Portfolio</a> <ul class="submenu"> <li class="menu-item"> <a href="project-v1.html">Portfolio v1</a> </li> <li class="menu-item"> <a href="project-v2.html">Portfolio v2</a> </li> <li class="menu-item"> <a href="project-v3.html">Portfolio v3</a> </li> </ul> </li> <li class="menu-item menu-item-has-children"> <a href="#">Team</a> <ul class="submenu"> <li class="menu-item menu-item-has-children"> <a href="#">Team Archive</a> <ul class="submenu"> <li class="menu-item"> <a href="team-archive-v1.html">Archive v1</a> </li> <li class="menu-item"> <a href="team-archive-v2.html">Archive v2</a> </li> </ul> </li> <li class="menu-item"> <a href="team-details.html">Team Detail</a> </li> </ul> </li> <li class="menu-item menu-item-has-children"> <a href="#">Services</a> <ul class="submenu"> <li class="menu-item"> <a href="services-v1.html">Service v1</a> </li> <li class="menu-item"> <a href="services-v2.html">Service v2</a> </li> </ul> </li> <li class="menu-item menu-item-has-children"> <a href="#">تماس با ما </a> <ul class="submenu"> <li class="menu-item"> <a href="profile.html">My Account</a> </li> <li class="menu-item"> <a href="profile-orders.html">My Orders</a> </li> <li class="menu-item"> <a href="profile-products.html">My Products</a> </li> <li class="menu-item"> <a href="profile-saved-products.html">Saved Products</a> </li> </ul> </li>–> <!– Pages End –> <!– Social Media Start –> <!– <li class="menu-section-title">Get Social</li> <li class="menu-item"> <a href="#"> <i class="flaticon0-facebook"></i>Facebook</a> </li> <li class="menu-item"> <a href="#"> <i class="flaticon0-linkedin"></i> Linkedin </a> </li> <li class="menu-item"> <a href="#"> <i class="flaticon0-twitter"></i> Twitter </a> </li> <li class="menu-item"> <a href="#"> <i class="flaticon0-instagram"></i> Instagram </a> </li>–> <!– Social Media End –> </ul>--> <nav-bar/> </div> </aside> <div class="aside-overlay aside-trigger" @click="toggleMobile"></div> </div> </template> <script> import navBar from "./navBar"; export default { name: "MobileMenu", components: { navBar }, props:{ toggleMobile:Function }, computed: { menu(){ return this.$store.state.config.menu; } }, mounted() { }, methods:{ showSub(e,index){ e.preventDefault(); const link = $(`.link${index}`); e.preventDefault(); var submenu = link.next(".submenu"); if (link.parent().hasClass('active')) { submenu.slideUp(200); link.parent().siblings().find('.submenu').slideUp(200); link.parent().removeClass('active'); } else { link.closest('ul').find(".menu-item-has-children").find('.submenu').slideUp(200); link.closest('ul').find(".menu-item-has-children").removeClass('active'); link.parent().addClass('active'); submenu.slideDown(200); } } } } </script> <style> </style>
Copyright ©2k19 -
Hexid
|
Tex7ure