FM / largeSidebar

/home/techb158/dev.balacoffee.com/resources/src/containers/layouts/largeSidebar/

/home/techb158/dev.balacoffee.com/resources/src/containers/layouts/largeSidebar

Name	Size	Mode	Actions
index.vue	914	0644	edit dl rm
Sidebar.vue	40426	0644	edit dl rm
TopNav.vue	10980	0644	edit dl rm

Edit: /home/techb158/dev.balacoffee.com/resources/src/containers/layouts/largeSidebar/Sidebar.vue (40426B)

<template>
 <div
 class="side-content-wrap"
 @mouseenter="isMenuOver = true"
 @mouseleave="isMenuOver = false"
 @touchstart="isMenuOver = true"
 >
 <vue-perfect-scrollbar
 :settings="{ suppressScrollX: true, wheelPropagation: false }"
 :class="{ open: getSideBarToggleProperties.isSideNavOpen }"
 ref="myData"
 class="sidebar-left rtl-ps-none ps scroll"
 >
 <div>
 <ul class="navigation-left">
 <li
 @mouseenter="toggleSubMenu"
 :class="{ active: selectedParentMenu == 'dashboard' }"
 class="nav-item"
 data-item="dashboard"
 >
 <router-link tag="a" class="nav-item-hold" to="/app/dashboard">
 
 {{ $t("dashboard") }}
 </router-link>
 </li>
 <li
 v-show="currentUserPermissions 
 && (currentUserPermissions.includes('products_add')
 || currentUserPermissions.includes('products_view') 
 || currentUserPermissions.includes('barcode_view')
 || currentUserPermissions.includes('brand') 
 || currentUserPermissions.includes('unit') 
 || currentUserPermissions.includes('category'))"
 @mouseenter="toggleSubMenu"
 class="nav-item"
 :class="{ active: selectedParentMenu == 'products' }"
 data-item="products"
 :data-submenu="true"
 >
 <a class="nav-item-hold" href="#">
 
 {{$t('Products')}}
 </a>
 <div class="triangle"></div>
 </li>
 <li
 v-show="currentUserPermissions 
 && (currentUserPermissions.includes('adjustment_view')
 || currentUserPermissions.includes('adjustment_add'))"
 @mouseenter="toggleSubMenu"
 class="nav-item"
 :class="{ active: selectedParentMenu == 'adjustments' }"
 data-item="adjustments"
 :data-submenu="true"
 >
 <a class="nav-item-hold" href="#">
 
 {{$t('StockAdjustement')}}
 </a>
 <div class="triangle"></div>
 </li>

<li
 v-show="currentUserPermissions && (currentUserPermissions.includes('Quotations_view') 
 || currentUserPermissions.includes('Quotations_add'))"
 @mouseenter="toggleSubMenu"
 class="nav-item"
 :class="{ active: selectedParentMenu == 'quotations' }"
 data-item="quotations"
 :data-submenu="true"
 >
 <a class="nav-item-hold" href="#">
 
 {{$t('Quotations')}}
 </a>
 <div class="triangle"></div>
 </li>
 <li
 v-show="currentUserPermissions && (currentUserPermissions.includes('Purchases_view') 
 || currentUserPermissions.includes('Purchases_add'))"
 @mouseenter="toggleSubMenu"
 class="nav-item"
 :class="{ active: selectedParentMenu == 'purchases' }"
 data-item="purchases"
 :data-submenu="true"
 >
 <a class="nav-item-hold" href="#">
 
 {{$t('Purchases')}}
 </a>
 <div class="triangle"></div>
 </li>
 <li
 v-show="currentUserPermissions && (currentUserPermissions.includes('Sales_view') 
 || currentUserPermissions.includes('Sales_add')
 || currentUserPermissions.includes('shipment'))"
 class="nav-item"
 @mouseenter="toggleSubMenu"
 :class="{ active: selectedParentMenu == 'sales' }"
 data-item="sales"
 :data-submenu="true"
 >
 <a class="nav-item-hold" href="#">
 
 {{$t('Sales')}}
 </a>
 <div class="triangle"></div>
 </li>

<li
 v-show="currentUserPermissions && (currentUserPermissions.includes('transfer_view')
 || currentUserPermissions.includes('transfer_add'))"
 @mouseenter="toggleSubMenu"
 class="nav-item"
 :class="{ active: selectedParentMenu == 'transfers' }"
 data-item="transfers"
 :data-submenu="true"
 >
 <a class="nav-item-hold" href="#">
 
 {{$t('StockTransfers')}}
 </a>
 <div class="triangle"></div>
 </li>
 <li
 v-show="currentUserPermissions && (currentUserPermissions.includes('expense_view')
 || currentUserPermissions.includes('expense_add'))"
 @mouseenter="toggleSubMenu"
 class="nav-item"
 :class="{ active: selectedParentMenu == 'expenses' }"
 data-item="expenses"
 :data-submenu="true"
 >
 <a class="nav-item-hold" href="#">
 
 {{$t('Expenses')}}
 </a>
 <div class="triangle"></div>
 </li>

<li
 v-show="currentUserPermissions && (currentUserPermissions.includes('Sale_Returns_view') 
 || currentUserPermissions.includes('Sale_Returns_add'))"
 @mouseenter="toggleSubMenu"
 class="nav-item"
 :class="{ active: selectedParentMenu == 'sale_return' }"
 data-item="sale_return"
 :data-submenu="true"
 >
 <a class="nav-item-hold" href="#">
 
 {{$t('SalesReturn')}}
 </a>
 <div class="triangle"></div>
 </li>
 <li
 v-show="currentUserPermissions && (currentUserPermissions.includes('Purchase_Returns_view') 
 || currentUserPermissions.includes('Purchase_Returns_add'))"
 @mouseenter="toggleSubMenu"
 class="nav-item"
 :class="{ active: selectedParentMenu == 'purchase_return' }"
 data-item="purchase_return"
 :data-submenu="true"
 >
 <a class="nav-item-hold" href="#">
 
 {{$t('PurchasesReturn')}}
 </a>
 <div class="triangle"></div>
 </li>

<li
 v-show="currentUserPermissions && (currentUserPermissions.includes('Customers_view') 
 ||currentUserPermissions.includes('Suppliers_view')
 ||currentUserPermissions.includes('users_view'))"
 @mouseenter="toggleSubMenu"
 :class="{ active: selectedParentMenu == 'People' }"
 class="nav-item"
 data-item="People"
 :data-submenu="true"
 >
 <a class="nav-item-hold" href="#">
 
 {{$t('People')}}
 </a>
 <div class="triangle"></div>
 </li>

<li
 v-show="currentUserPermissions && (currentUserPermissions.includes('setting_system') 
 || currentUserPermissions.includes('warehouse') || currentUserPermissions.includes('backup') 
 || currentUserPermissions.includes('currency') || currentUserPermissions.includes('permissions_view'))"
 @mouseenter="toggleSubMenu"
 :class="{ active: selectedParentMenu == 'settings' }"
 class="nav-item"
 data-item="settings"
 :data-submenu="true"
 >
 <a class="nav-item-hold" href="#">
 
 {{$t('Settings')}}
 </a>
 <div class="triangle"></div>
 </li>

<li
 v-show="currentUserPermissions && 
 (currentUserPermissions.includes('Reports_payments_Sales') 
 || currentUserPermissions.includes('Reports_payments_Purchases')
 || currentUserPermissions.includes('Reports_payments_Sale_Returns')
 || currentUserPermissions.includes('Reports_payments_purchase_Return')
 || currentUserPermissions.includes('Warehouse_report')
 || currentUserPermissions.includes('Reports_profit')
 || currentUserPermissions.includes('Reports_purchase') 
 || currentUserPermissions.includes('Reports_quantity_alerts')
 || currentUserPermissions.includes('Reports_sales') 
 || currentUserPermissions.includes('Reports_suppliers')
 || currentUserPermissions.includes('Reports_customers')
 || currentUserPermissions.includes('Top_products')
 || currentUserPermissions.includes('Top_customers')
 || currentUserPermissions.includes('users_report')
 || currentUserPermissions.includes('stock_report'))"
 @mouseenter="toggleSubMenu"
 :class="{ active: selectedParentMenu == 'reports' }"
 class="nav-item"
 data-item="reports"
 :data-submenu="true"
 >
 <a class="nav-item-hold" href="#">
 
 {{$t('Reports')}}
 </a>
 <div class="triangle"></div>
 </li> 
 </ul>
 </div>
 </vue-perfect-scrollbar>

<vue-perfect-scrollbar
 :class="{ open: getSideBarToggleProperties.isSecondarySideNavOpen }"
 :settings="{ suppressScrollX: true, wheelPropagation: false }"
 class="sidebar-left-secondary ps rtl-ps-none"
 >
 <div ref="sidebarChild">
 <ul
 class="childNav d-none"
 data-parent="products"
 :class="{ 'd-block': selectedParentMenu == 'products' }"
 >
 <li
 class="nav-item"
 v-if="currentUserPermissions && currentUserPermissions.includes('products_add')"
 >
 <router-link tag="a" class to="/app/products/store">
 
 {{$t('AddProduct')}}
 </router-link>
 </li>
 <li
 class="nav-item"
 v-if="currentUserPermissions && currentUserPermissions.includes('products_view')"
 >
 <router-link tag="a" class to="/app/products/list">
 
 {{$t('productsList')}}
 </router-link>
 </li>
 <li
 class="nav-item"
 v-if="currentUserPermissions && currentUserPermissions.includes('barcode_view')"
 >
 <router-link tag="a" class to="/app/products/barcode">
 
 {{$t('Printbarcode')}}
 </router-link>
 </li>
 <li
 class="nav-item"
 v-if="currentUserPermissions && currentUserPermissions.includes('category')"
 >
 <router-link tag="a" class to="/app/products/Categories">
 
 {{$t('Categories')}}
 </router-link>
 </li>
 <li
 class="nav-item"
 v-if="currentUserPermissions && currentUserPermissions.includes('brand')"
 >
 <router-link tag="a" class to="/app/products/Brands">
 
 {{$t('Brand')}}
 </router-link>
 </li>
 <li
 class="nav-item"
 v-if="currentUserPermissions && currentUserPermissions.includes('unit')"
 >
 <router-link tag="a" class to="/app/products/Units">
 
 {{$t('Units')}}
 </router-link>
 </li>
 </ul>

<ul
 class="childNav d-none"
 data-parent="adjustments"
 :class="{ 'd-block': selectedParentMenu == 'adjustments' }"
 >
 <li
 class="nav-item"
 v-if="currentUserPermissions && currentUserPermissions.includes('adjustment_add')"
 >
 <router-link tag="a" class to="/app/adjustments/store">
 
 {{$t('CreateAdjustment')}}
 </router-link>
 </li>
 <li
 class="nav-item"
 v-if="currentUserPermissions && currentUserPermissions.includes('adjustment_view')"
 >
 <router-link tag="a" class to="/app/adjustments/list">
 
 {{$t('ListAdjustments')}}
 </router-link>
 </li>
 </ul>

<ul
 class="childNav d-none"
 data-parent="transfers"
 :class="{ 'd-block': selectedParentMenu == 'transfers' }"
 >
 <li
 class="nav-item"
 v-if="currentUserPermissions && currentUserPermissions.includes('transfer_add')"
 >
 <router-link tag="a" class to="/app/transfers/store">
 
 {{$t('CreateTransfer')}}
 </router-link>
 </li>
 <li
 class="nav-item"
 v-if="currentUserPermissions && currentUserPermissions.includes('transfer_view')"
 >
 <router-link tag="a" class to="/app/transfers/list">
 
 {{$t('ListTransfers')}}
 </router-link>
 </li>
 </ul>

<ul
 class="childNav d-none"
 data-parent="expenses"
 :class="{ 'd-block': selectedParentMenu == 'expenses' }"
 >
 <li
 class="nav-item"
 v-if="currentUserPermissions && currentUserPermissions.includes('expense_add')"
 >
 <router-link tag="a" class to="/app/expenses/store">
 
 {{$t('Create_Expense')}}
 </router-link>
 </li>
 <li
 class="nav-item"
 v-if="currentUserPermissions && currentUserPermissions.includes('expense_view')"
 >
 <router-link tag="a" class to="/app/expenses/list">
 
 {{$t('ListExpenses')}}
 </router-link>
 </li>
 <li
 class="nav-item"
 v-if="currentUserPermissions && currentUserPermissions.includes('expense_view')"
 >
 <router-link tag="a" class to="/app/expenses/category">
 
 {{$t('Expense_Category')}}
 </router-link>
 </li>
 </ul>

<ul
 class="childNav d-none"
 data-parent="quotations"
 :class="{ 'd-block': selectedParentMenu == 'quotations' }"
 >
 <li
 class="nav-item"
 v-if="currentUserPermissions && currentUserPermissions.includes('Quotations_add')"
 >
 <router-link tag="a" class to="/app/quotations/store">
 
 {{$t('AddQuote')}}
 </router-link>
 </li>
 <li
 class="nav-item"
 v-if="currentUserPermissions && currentUserPermissions.includes('Quotations_view')"
 >
 <router-link tag="a" class to="/app/quotations/list">
 
 {{$t('ListQuotations')}}
 </router-link>
 </li>
 </ul>

<ul
 class="childNav d-none"
 data-parent="purchases"
 :class="{ 'd-block': selectedParentMenu == 'purchases' }"
 >
 <li
 class="nav-item"
 v-if="currentUserPermissions && currentUserPermissions.includes('Purchases_add')"
 >
 <router-link tag="a" class to="/app/purchases/store">
 
 {{$t('AddPurchase')}}
 </router-link>
 </li>
 <li
 class="nav-item"
 v-if="currentUserPermissions && currentUserPermissions.includes('Purchases_view')"
 >
 <router-link tag="a" class to="/app/purchases/list">
 
 {{$t('ListPurchases')}}
 </router-link>
 </li>
 </ul>

<ul
 class="childNav d-none"
 data-parent="sales"
 :class="{ 'd-block': selectedParentMenu == 'sales' }"
 >
 <li
 class="nav-item"
 v-if="currentUserPermissions && currentUserPermissions.includes('Sales_add')"
 >
 <router-link tag="a" class to="/app/sales/store">
 
 {{$t('AddSale')}}
 </router-link>
 </li>
 <li
 class="nav-item"
 v-if="currentUserPermissions && currentUserPermissions.includes('Sales_view')"
 >
 <router-link tag="a" class to="/app/sales/list">
 
 {{$t('ListSales')}}
 </router-link>
 </li>
 <li
 class="nav-item"
 v-if="currentUserPermissions && currentUserPermissions.includes('shipment')"
 >
 <router-link tag="a" class to="/app/sales/shipment">
 
 {{$t('Shipments')}}
 </router-link>
 </li>
 </ul>

<ul
 class="childNav d-none"
 data-parent="sale_return"
 :class="{ 'd-block': selectedParentMenu == 'sale_return' }"
 >
 <li
 class="nav-item"
 v-if="currentUserPermissions && currentUserPermissions.includes('Sale_Returns_add')"
 >
 <router-link tag="a" class to="/app/sale_return/store">
 
 {{$t('AddReturn')}}
 </router-link>
 </li>
 <li
 class="nav-item"
 v-if="currentUserPermissions && currentUserPermissions.includes('Sale_Returns_view')"
 >
 <router-link tag="a" class to="/app/sale_return/list">
 
 {{$t('ListReturns')}}
 </router-link>
 </li>
 </ul>

<ul
 class="childNav d-none"
 data-parent="purchase_return"
 :class="{ 'd-block': selectedParentMenu == 'purchase_return' }"
 >
 <li
 class="nav-item"
 v-if="currentUserPermissions && currentUserPermissions.includes('Purchase_Returns_add')"
 >
 <router-link tag="a" class to="/app/purchase_return/store">
 
 {{$t('AddReturn')}}
 </router-link>
 </li>
 <li
 class="nav-item"
 v-if="currentUserPermissions && currentUserPermissions.includes('Purchase_Returns_view')"
 >
 <router-link tag="a" class to="/app/purchase_return/list">
 
 {{$t('ListReturns')}}
 </router-link>
 </li>
 </ul>

<ul
 class="childNav d-none"
 data-parent="hrm"
 :class="{ 'd-block': selectedParentMenu == 'hrm' }"
 >
 <li
 class="nav-item"
 v-if="currentUserPermissions && currentUserPermissions.includes('company')"
 >
 <router-link tag="a" class to="/app/hrm/company">
 
 {{$t('Company')}}
 </router-link>
 </li>
 <li
 class="nav-item"
 v-if="currentUserPermissions && currentUserPermissions.includes('department')"
 >
 <router-link tag="a" class to="/app/hrm/departments">
 
 {{$t('Departments')}}
 </router-link>
 </li>
 <li
 class="nav-item"
 v-if="currentUserPermissions && currentUserPermissions.includes('designation')"
 >
 <router-link tag="a" class to="/app/hrm/designations">
 
 {{$t('Designations')}}
 </router-link>
 </li>
 <li
 class="nav-item"
 v-if="currentUserPermissions && currentUserPermissions.includes('office_shift')"
 >
 <router-link tag="a" class to="/app/hrm/office_Shift">
 
 {{$t('Office_Shift')}}
 </router-link>
 </li>
 <li
 class="nav-item"
 v-if="currentUserPermissions && currentUserPermissions.includes('view_employee')"
 >
 <router-link tag="a" class to="/app/hrm/employees">
 
 {{$t('Employees')}}
 </router-link>
 </li>
 <li
 class="nav-item"
 v-if="currentUserPermissions && currentUserPermissions.includes('attendance')"
 >
 <router-link tag="a" class to="/app/hrm/attendance">
 
 {{$t('Attendance')}}
 </router-link>
 </li>
 <li
 v-if="currentUserPermissions && (currentUserPermissions.includes('leave'))"

@click.prevent="toggleSidebarDropdwon($event)"
            class="nav-item dropdown-sidemenu"
          >

<a href="#">
 
 {{$t('Leave_request')}}
 
 </a>
 <ul class="submenu">
 <li
 >
 <router-link tag="a" class to="/app/hrm/leaves/list">
 
 {{$t('Leave_request')}}
 </router-link>
 </li>
 <li
 >
 <router-link tag="a" class to="/app/hrm/leaves/type">
 
 {{$t('Leave_type')}}
 </router-link>
 </li>
 
 </ul>
 </li>
 
 <li
 class="nav-item"
 v-if="currentUserPermissions && currentUserPermissions.includes('holiday')"
 >
 <router-link tag="a" class to="/app/hrm/holidays">
 
 {{$t('Holidays')}}
 </router-link>
 </li>
 </ul>

<ul
 class="childNav d-none"
 data-parent="People"
 :class="{ 'd-block': selectedParentMenu == 'People' }"
 >
 <li
 class="nav-item"
 v-if="currentUserPermissions && currentUserPermissions.includes('Customers_view')"
 >
 <router-link tag="a" class to="/app/People/Customers">
 
 {{$t('Customers')}}
 </router-link>
 </li>
 <li
 class="nav-item"
 v-if="currentUserPermissions && currentUserPermissions.includes('Suppliers_view')"
 >
 <router-link tag="a" class to="/app/People/Suppliers">
 
 {{$t('Suppliers')}}
 </router-link>
 </li>
 <li
 class="nav-item"
 v-if="currentUserPermissions && currentUserPermissions.includes('users_view')"
 >
 <router-link tag="a" class to="/app/People/Users">
 
 {{$t('Users')}}
 </router-link>
 </li>
 </ul>

<ul
 class="childNav d-none"
 data-parent="settings"
 :class="{ 'd-block': selectedParentMenu == 'settings' }"
 >
 <li
 class="nav-item"
 v-if="currentUserPermissions && currentUserPermissions.includes('setting_system')"
 >
 <router-link tag="a" class to="/app/settings/System_settings">
 
 {{$t('SystemSettings')}}
 </router-link>
 </li>
 <li
 class="nav-item"
 v-if="currentUserPermissions && currentUserPermissions.includes('permissions_view')"
 >
 <router-link tag="a" class to="/app/settings/permissions">
 
 {{$t('GroupPermissions')}}
 </router-link>
 </li>
 <li
 class="nav-item"
 v-if="currentUserPermissions && currentUserPermissions.includes('warehouse')"
 >
 <router-link tag="a" class to="/app/settings/Warehouses">
 
 {{$t('Warehouses')}}
 </router-link>
 </li>
 <li
 class="nav-item"
 v-if="currentUserPermissions && currentUserPermissions.includes('currency')"
 >
 <router-link tag="a" class to="/app/settings/Currencies">
 
 {{$t('Currencies')}}
 </router-link>
 </li>
 
 <li
 class="nav-item"
 v-if="currentUserPermissions && currentUserPermissions.includes('backup')"
 >
 <router-link tag="a" class to="/app/settings/Backup">
 
 {{$t('Backup')}}
 </router-link>
 </li>

</ul>

<ul
 class="childNav d-none"
 data-parent="reports"
 :class="{ 'd-block': selectedParentMenu == 'reports' }"
 >
 <li
 v-if="currentUserPermissions &&
 (currentUserPermissions.includes('Reports_payments_Purchases') 
 || currentUserPermissions.includes('Reports_payments_Sales')
 || currentUserPermissions.includes('Reports_payments_Sale_Returns')
 || currentUserPermissions.includes('Reports_payments_purchase_Return'))"
 @click.prevent="toggleSidebarDropdwon($event)"
 class="nav-item dropdown-sidemenu"
 >
 <a href="#">
 
 {{$t('Payments')}}
 
 </a>
 <ul class="submenu">
 <li
 v-if="currentUserPermissions && currentUserPermissions.includes('Reports_payments_Purchases')"
 >
 <router-link tag="a" class to="/app/reports/payments_purchase">
 
 {{$t('Purchases')}}
 </router-link>
 </li>
 <li
 v-if="currentUserPermissions && currentUserPermissions.includes('Reports_payments_Sales')"
 >
 <router-link tag="a" class to="/app/reports/payments_sale">
 
 {{$t('Sales')}}
 </router-link>
 </li>
 <li
 v-if="currentUserPermissions && currentUserPermissions.includes('Reports_payments_Sale_Returns')"
 >
 <router-link tag="a" class to="/app/reports/payments_sales_returns">
 
 {{$t('SalesReturn')}}
 </router-link>
 </li>
 <li
 v-if="currentUserPermissions && currentUserPermissions.includes('Reports_payments_purchase_Return')"
 >
 <router-link tag="a" class to="/app/reports/payments_purchases_returns">
 
 {{$t('PurchasesReturn')}}
 </router-link>
 </li>
 </ul>
 </li>
 <li
 class="nav-item"
 v-if="currentUserPermissions && currentUserPermissions.includes('Reports_profit')"
 >
 <router-link tag="a" class to="/app/reports/profit_and_loss">
 
 {{$t('ProfitandLoss')}}
 </router-link>
 </li>
 <li
 class="nav-item"
 v-if="currentUserPermissions && currentUserPermissions.includes('Reports_quantity_alerts')"
 >
 <router-link tag="a" class to="/app/reports/quantity_alerts">
 
 {{$t('ProductQuantityAlerts')}}
 </router-link>
 </li>
 <li
 class="nav-item"
 v-if="currentUserPermissions && currentUserPermissions.includes('Warehouse_report')"
 >
 <router-link tag="a" class to="/app/reports/warehouse_report">
 
 {{$t('Warehouse_report')}}
 </router-link>
 </li>
 <li
 class="nav-item"
 v-if="currentUserPermissions && currentUserPermissions.includes('stock_report')"
 >
 <router-link tag="a" class to="/app/reports/stock_report">
 
 {{$t('stock_report')}}
 </router-link>
 </li>
 <li
 class="nav-item"
 v-if="currentUserPermissions && currentUserPermissions.includes('Reports_sales')"
 >
 <router-link tag="a" class to="/app/reports/sales_report">
 
 {{$t('SalesReport')}}
 </router-link>
 </li>
 <li
 class="nav-item"
 v-if="currentUserPermissions && currentUserPermissions.includes('Reports_purchase')"
 >
 <router-link tag="a" class to="/app/reports/purchase_report">
 
 {{$t('PurchasesReport')}}
 </router-link>
 </li>
 <li
 class="nav-item"
 v-if="currentUserPermissions && currentUserPermissions.includes('Reports_customers')"
 >
 <router-link tag="a" class to="/app/reports/customers_report">
 
 {{$t('CustomersReport')}}
 </router-link>
 </li>
 <li
 class="nav-item"
 v-if="currentUserPermissions && currentUserPermissions.includes('Reports_suppliers')"
 >
 <router-link tag="a" class to="/app/reports/providers_report">
 
 {{$t('SuppliersReport')}}
 </router-link>
 </li>

<li
 class="nav-item"
 v-if="currentUserPermissions && currentUserPermissions.includes('Top_products')"
 >
 <router-link tag="a" class to="/app/reports/top_selling_products">
 
 {{$t('Top_Selling_Products')}}
 </router-link>
 </li>

<li
 class="nav-item"
 v-if="currentUserPermissions && currentUserPermissions.includes('Top_customers')"
 >
 <router-link tag="a" class to="/app/reports/top_customers">
 
 {{$t('Top_customers')}}
 </router-link>
 </li>

<li
 class="nav-item"
 v-if="currentUserPermissions && currentUserPermissions.includes('users_report')"
 >
 <router-link tag="a" class to="/app/reports/users_report">
 
 {{$t('Users_Report')}}
 </router-link>
 </li>

</ul>
 </div>
 </vue-perfect-scrollbar>
 <div
 @click="removeOverlay()"
 class="sidebar-overlay"
 :class="{ open: getSideBarToggleProperties.isSecondarySideNavOpen }"
 ></div>
 </div>
 
</template>

import { mapGetters, mapActions } from "vuex";

export default {
  components: {
    Topnav
  },

data() {
    return {
      isDisplay: true,
      isMenuOver: false,
      isStyle: true,
      selectedParentMenu: "",
      isMobile
    };
  },
  mounted() {
    this.toggleSelectedParentMenu();
    window.addEventListener("resize", this.handleWindowResize);
    document.addEventListener("click", this.returnSelectedParentMenu);
    this.handleWindowResize();
  },

beforeDestroy() {
    document.removeEventListener("click", this.returnSelectedParentMenu);
    window.removeEventListener("resize", this.handleWindowResize);
  },

computed: {
    ...mapGetters(["getSideBarToggleProperties", "currentUserPermissions"])
  },

methods: {
    ...mapActions([
      "changeSecondarySidebarProperties",
      "changeSecondarySidebarPropertiesViaMenuItem",
      "changeSecondarySidebarPropertiesViaOverlay",
      "changeSidebarProperties"
    ]),

handleWindowResize() {
 if (window.innerWidth <= 1200) {
 if (this.getSideBarToggleProperties.isSideNavOpen) {
 this.changeSidebarProperties();
 }
 if (this.getSideBarToggleProperties.isSecondarySideNavOpen) {
 this.changeSecondarySidebarProperties();
 }
 } else {
 if (!this.getSideBarToggleProperties.isSideNavOpen) {
 this.changeSidebarProperties();
 }
 }
 },
 toggleSelectedParentMenu() {
 const currentParentUrl = this.$route.path
 .split("/")
 .filter(x => x !== "")[1];
 if (currentParentUrl !== undefined || currentParentUrl !== null) {
 this.selectedParentMenu = currentParentUrl.toLowerCase();
 } else {
 this.selectedParentMenu = "dashboard";
 }
 },
 toggleSubMenu(e) {
 let hasSubmenu = e.target.dataset.submenu;
 let parent = e.target.dataset.item;

if (hasSubmenu) {
        this.selectedParentMenu = parent;

this.changeSecondarySidebarPropertiesViaMenuItem(true);
      } else {
        this.selectedParentMenu = parent;
        this.changeSecondarySidebarPropertiesViaMenuItem(false);
      }
    },

removeOverlay() {
 this.changeSecondarySidebarPropertiesViaOverlay();
 if (window.innerWidth <= 1200) {
 this.changeSidebarProperties();
 }
 this.toggleSelectedParentMenu();
 },
 returnSelectedParentMenu() {
 if (!this.isMenuOver) {
 this.toggleSelectedParentMenu();
 }
 },

toggleSidebarDropdwon(event) {
      let dropdownMenus = this.$el.querySelectorAll(".dropdown-sidemenu.open");

event.currentTarget.classList.toggle("open");

dropdownMenus.forEach(dropdown => {
 dropdown.classList.remove("open");
 });
 }
 }
};
</script>

cmd: