alirezakarari
/
truck-shop
1
0
Rozštěpit 0
Zdrojový kód Úkoly 0 Požadavky na natažení 0 Vydání 0 Wiki Aktivita
Nelze vybrat více než 25 témat Téma musí začínat písmenem nebo číslem, může obsahovat pomlčky („-“) a může být dlouhé až 35 znaků.
2 Revize
1 Větev
31 MiB
 
 
 
Strom: 25dff5b10e
Větve Značky
${ item.name }
Vytvořit větev ${ searchTerm }
z „25dff5b10e“
${ noResults }
truck-shop/src/layout/layout-2.vue

850 řádky
56 KiB
Surový Blame Historie 

  1. <script>

  2. import FooterComponents from "@/components/footer.vue"

  3. import Navbar from "@/components/navbar.vue"

  4. import Rightbar from "@/components/right-bar.vue"

  5. import LogoDark from "@/assets/images/logo-dark.svg"

  6. import LogoWhite from "@/assets/images/logo-white.svg"

  7. import simplebar from "simplebar-vue"

  8. import pageheader from "@/components/page-header.vue"

  9. import { ChevronDownIcon } from "@zhuowenli/vue-feather-icons"

  10. 

  11. export default {

  12.     name: "Layout-2",

  13.     data() {

  14.         return {

  15.             LogoDark, LogoWhite,

  16.         };

  17.     },

  18.     components: {

  19.         Navbar, simplebar, pageheader,

  20.         Rightbar, FooterComponents, ChevronDownIcon

  21.     },

  22.     methods: {

  23.         changeLayoutType(layoutType) {

  24.             // Update the layout type in the store

  25.             this.$store.commit('changeLayoutType', { layoutType });

  26. 

  27.             // Set the layout attribute based on the layout type

  28.             document.body.setAttribute('data-pc-layout', layoutType);

  29.         },

  30.         handleOutsideClick(event) {

  31.             if (

  32.                 this.$store.state.isMobileSidebarActive &&

  33.                 !this.$el.contains(event.target)

  34.             ) {

  35.                 // Close the mobile sidebar

  36.                 this.$store.commit('toggleMobileSidebar');

  37.             }

  38.         },

  39.         removeClassByPrefix(node, prefix) {

  40.             for (let i = 0; i < node.classList.length; i++) {

  41.                 let value = node.classList[i];

  42.                 if (value.startsWith(prefix)) {

  43.                     node.classList.remove(value);

  44.                 }

  45.             }

  46.         },

  47.         changebrand(temp) {

  48.             this.removeClassByPrefix(document.querySelector('.pc-sidebar .m-header'), "bg-");

  49.             document.querySelector('.pc-sidebar .m-header').classList.add(temp);

  50.         }

  51.     },

  52.     watch: {

  53.         layoutType: {

  54.             immediate: true,

  55.             deep: true,

  56.             handler(newVal, oldVal) {

  57.                 if (newVal !== oldVal) {

  58.                     switch (newVal) {

  59.                         case "horizontal":

  60.                             document.body.setAttribute(

  61.                                 "data-pc-layout",

  62.                                 "horizontal"

  63.                             );

  64.                             break;

  65.                         case "vertical":

  66.                             document.body.setAttribute("data-pc-layout", "vertical");

  67.                     }

  68.                 }

  69.             },

  70.         },

  71.     },

  72. 

  73.     computed: {

  74.         // ...layoutComputed,

  75.         layoutType: {

  76.             get() {

  77.                 return this.$store.state.layout.layoutType;

  78.             },

  79.             set(layoutType) {

  80.                 this.$store.commit('changeLayoutType', { layoutType });

  81.             },

  82.         },

  83.         isFixedWidth() {

  84.             return this.$store.getters.isFixedWidth;

  85.         },

  86.     },

  87.     mounted() {

  88.         document.body.setAttribute('data-pc-sidebar-theme', "dark");

  89.         const activeListItem = document.querySelector("li.active");

  90.         if (activeListItem) {

  91.             const parentElementOrSelf = activeListItem?.parentElement ? activeListItem.parentElement : activeListItem;

  92.             if (parentElementOrSelf && !parentElementOrSelf.classList.contains("pc-navbar")) {

  93.                 const closestItem = parentElementOrSelf.parentElement.closest(".pc-item");

  94.                 if (closestItem) {

  95.                     closestItem.classList.add("active");

  96.                 }

  97.             }

  98.         } else {

  99.             console.error("No list item with class 'active' found.");

  100.         }

  101.     }

  102. }

  103. </script>

  104. 

  105. <template>

  106.     <div class="pc-sidebar" @click="handleOutsideClick" :class="{ 'pc-sidebar-hide': $store.state.isSidebarHidden, 'mob-sidebar-active': $store.state.isMobileSidebarActive }">

  107.         <!-- <MenuComponents></MenuComponents> -->

  108.         <!-- [ Sidebar Menu ] start -->

  109. 

  110.         <nav class="pc-sidebar">

  111.             <div class="navbar-wrapper" id="navbar-wrapper">

  112.                 <div class="m-header">

  113.                     <router-link to="/" class="b-brand text-primary">

  114.                         <!-- ========   Change your logo from here   ============ -->

  115.                         <!-- <img :src="isDarkTheme ? '@/assets/images/logo-dark.svg' : '@/assets/images/logo-white.svg'" alt="logo image" class="logo-lg"> -->

  116.                         <img src="@/assets/images/logo-white.svg" alt="" class="logo logo-lg">

  117.                         <!-- <img src="@/assets/images/logo-white.svg" alt="" class="logo logo-lg"> -->

  118.                         <img src="@/assets/images/favicon.svg" alt="" class="logo logo-sm">

  119.                     </router-link>

  120.                 </div>

  121.                 <simplebar data-simplebar style="height: 760px">

  122.                     <div class="navbar-content">

  123.                         <ul class="pc-navbar">

  124.                             <li class="pc-item pc-caption">

  125.                                 <label>Navigation</label>

  126.                             </li>

  127.                             <li class="pc-item" :class="{ 'active': this.$route.path === '/dashboard' }">

  128.                                 <router-link to="/dashboard" class="pc-link">

  129.                                     <span class="pc-micon">

  130.                                         <i class="ph-duotone ph-gauge"></i>

  131.                                     </span>

  132.                                     <span class="pc-mtext">Dashboard</span>

  133.                                     <span class="pc-badge">2</span>

  134.                                 </router-link>

  135.                             </li>

  136.                             <li class="pc-item pc-hasmenu" :class="{ 'active': this.$route.path === '/layouts' }">

  137.                                 <BLink class="pc-link" v-b-toggle.collapse-27>

  138.                                     <span class="pc-micon">

  139.                                         <i class="ph-duotone ph-layout"></i></span><span class="pc-mtext">Layouts</span><span class="pc-arrow">

  140.                                         <ChevronDownIcon></ChevronDownIcon>

  141.                                     </span>

  142.                                 </BLink>

  143.                                 <BCollapse id="collapse-27">

  144.                                     <ul class="pc-submenu">

  145.                                         <!-- <li class="pc-item"><a class="pc-link">Compact</a></li> -->

  146.                                         <li class="pc-item">

  147.                                             <router-link class="pc-link" target="_blank" @click="changeLayoutType('horizontal')" to="/layout/horizontal">Horizontal</router-link>

  148.                                         </li>

  149.                                         <li class="pc-item">

  150.                                             <router-link class="pc-link" target="_blank" to="/layout/layout-2">Layout-2</router-link>

  151.                                         </li>

  152.                                         <li class="pc-item">

  153.                                             <router-link class="pc-link" target="_blank" to="/layout/layout-moduler">Moduler</router-link>

  154.                                         </li>

  155.                                         <li class="pc-item"><router-link target="_blank" class="pc-link" @click="changeLayoutType('vertical')" to="/dashboard">Vertical</router-link></li>

  156.                                     </ul>

  157.                                 </BCollapse>

  158.                             </li>

  159.                             <li class="pc-item pc-hasmenu">

  160.                                 <BLink class="pc-link" v-b-toggle.collapse-1>

  161.                                     <span class="pc-micon">

  162.                                         <i class="ph-duotone ph-scroll"></i>

  163.                                     </span>

  164.                                     <span class="pc-mtext">Ui-kit</span><span class="pc-arrow">

  165.                                         <ChevronDownIcon></ChevronDownIcon>

  166.                                     </span>

  167.                                 </BLink>

  168.                                 <BCollapse id="collapse-1">

  169.                                     <ul class="pc-submenu">

  170.                                         <li class="pc-item ms-4" :class="{ 'active': $route.path === '/setting' }"><router-link class="pc-link" to="/setting">Settings</router-link>

  171.                                         </li>

  172.                                         <li class="pc-item ms-4" :class="{ 'active': $route.path === '/plans' }"><router-link class="pc-link" to="/plans">Plans</router-link></li>

  173.                                         <li class="pc-item ms-4" :class="{ 'active': $route.path === '/login-modal' }"><router-link class="pc-link" to="/login-modal">Login

  174.                                                 Modal</router-link>

  175.                                         </li>

  176.                                         <li class="pc-item ms-4" :class="{ 'active': $route.path === '/search-page' }"><router-link class="pc-link" to="/search-page">Search

  177.                                                 Page</router-link>

  178.                                         </li>

  179.                                         <li class="pc-item ms-4" :class="{ 'active': $route.path === '/affiliate-dashboard' }">

  180.                                             <router-link class="pc-link" to="/affiliate-dashboard">Affiliate

  181.                                                 Dashboard</router-link>

  182.                                         </li>

  183.                                         <li class="pc-item ms-4" :class="{ 'active': $route.path === '/gallery-1' }"><router-link class="pc-link" to="/gallery-1">Gallery</router-link>

  184.                                         </li>

  185.                                         <li class="pc-item ms-4" :class="{ 'active': $route.path === '/team' }"><router-link class="pc-link" to="/team">Team</router-link></li>

  186.                                         <li class="pc-item ms-4" :class="{ 'active': $route.path === '/loading' }"><router-link class="pc-link" to="/loading">Loading</router-link>

  187.                                         </li>

  188.                                         <li class="pc-item ms-4" :class="{ 'active': $route.path === '/contact-search' }">

  189.                                             <router-link class="pc-link" to="/contact-search">Contact

  190.                                                 Search</router-link>

  191.                                         </li>

  192.                                         <li class="pc-item ms-4" :class="{ 'active': $route.path === '/contact-us' }"><router-link class="pc-link" to="/contact-us">Contact

  193.                                                 Us</router-link>

  194.                                         </li>

  195.                                     </ul>

  196.                                 </BCollapse>

  197.                             </li>

  198.                             <li class="pc-item pc-caption">

  199.                                 <label>Widget</label>

  200.                                 <i class="ph-duotone ph-chart-pie"></i>

  201.                             </li>

  202.                             <li class="pc-item" :class="{ 'active': this.$route.path === '/statistics' }">

  203.                                 <router-link to="/statistics" class="pc-link">

  204.                                     <span class="pc-micon">

  205.                                         <i class="ph-duotone ph-projector-screen-chart"></i>

  206.                                     </span>

  207.                                     <span class="pc-mtext">Statistics</span>

  208.                                 </router-link>

  209.                             </li>

  210.                             <li class="pc-item" :class="{ 'active': this.$route.path === '/user' }">

  211.                                 <router-link to="/user" class="pc-link">

  212.                                     <span class="pc-micon">

  213.                                         <i class="ph-duotone ph-identification-card"></i>

  214.                                     </span>

  215.                                     <span class="pc-mtext">User</span>

  216.                                 </router-link>

  217.                             </li>

  218.                             <li class="pc-item" :class="{ 'active': this.$route.path === '/data' }">

  219.                                 <router-link to="/data" class="pc-link">

  220.                                     <span class="pc-micon">

  221.                                         <i class="ph-duotone ph-database"></i>

  222.                                     </span>

  223.                                     <span class="pc-mtext">Data</span>

  224.                                 </router-link>

  225.                             </li>

  226.                             <li class="pc-item" :class="{ 'active': this.$route.path === '/chart' }">

  227.                                 <router-link to="/chart" class="pc-link">

  228.                                     <span class="pc-micon">

  229.                                         <i class="ph-duotone ph-chart-pie"></i>

  230.                                     </span>

  231.                                     <span class="pc-mtext">Chart</span>

  232.                                 </router-link>

  233.                             </li>

  234.                             <li class="pc-item pc-caption">

  235.                                 <label>UI Components</label>

  236.                                 <i class="ph-duotone ph-compass-tool"></i>

  237.                             </li>

  238.                             <li class="pc-item pc-hasmenu">

  239.                                 <BLink class="pc-link" v-b-toggle.collapse-2><span class="pc-micon">

  240.                                         <i class="ph-duotone ph-flower-lotus"></i></span><span class="pc-mtext">Icons</span><span class="pc-arrow">

  241.                                         <ChevronDownIcon></ChevronDownIcon>

  242.                                     </span></BLink>

  243.                                 <BCollapse id="collapse-2">

  244.                                     <ul class="pc-submenu">

  245.                                         <li class="pc-item ms-4" :class="{ 'active': $route.path === '/feather' }"><router-link class="pc-link" to="/feather">Feather</router-link></li>

  246.                                         <li class="pc-item ms-4" :class="{ 'active': $route.path === '/tabler' }"><router-link class="pc-link" to="/tabler">Tabler</router-link></li>

  247.                                         <li class="pc-item ms-4" :class="{ 'active': $route.path === '/phosphor ' }"><router-link class="pc-link" to="/phosphor">Phosphor</router-link>

  248.                                         </li>

  249.                                     </ul>

  250.                                 </BCollapse>

  251.                             </li>

  252.                             <li class="pc-item pc-caption">

  253.                                 <label>Forms</label>

  254.                                 <i class="ph-duotone ph-textbox"></i>

  255.                             </li>

  256.                             <li class="pc-item pc-hasmenu">

  257.                                 <BLink class="pc-link" v-b-toggle.collapse-3>

  258.                                     <span class="pc-micon">

  259.                                         <i class="ph-duotone ph-textbox"></i>

  260.                                     </span>

  261.                                     <span class="pc-mtext">Forms Elements</span><span class="pc-arrow">

  262.                                         <ChevronDownIcon></ChevronDownIcon>

  263.                                     </span>

  264.                                 </BLink>

  265.                                 <BCollapse id="collapse-3">

  266.                                     <ul class="pc-submenu">

  267.                                         <li class="pc-item ms-4" :class="{ 'active': $route.path === '/form-element' }"><router-link class="pc-link" to="/form-element">Form

  268.                                                 Basic</router-link>

  269.                                         </li>

  270.                                         <li class="pc-item ms-4" :class="{ 'active': $route.path === '/floating' }"><router-link class="pc-link" to="/floating">Form

  271.                                                 Floating</router-link>

  272.                                         </li>

  273.                                         <li class="pc-item ms-4" :class="{ 'active': $route.path === '/form-option' }"><router-link class="pc-link" to="/form-option">Form

  274.                                                 Options</router-link>

  275.                                         </li>

  276.                                         <li class="pc-item ms-4" :class="{ 'active': $route.path === '/input-group' }"><router-link class="pc-link" to="/input-group">Input

  277.                                                 Groups</router-link>

  278.                                         </li>

  279.                                         <li class="pc-item ms-4" :class="{ 'active': $route.path === '/checkbox' }"><router-link class="pc-link" to="/checkbox">Checkbox</router-link>

  280.                                         </li>

  281.                                         <li class="pc-item ms-4" :class="{ 'active': $route.path === '/radio' }"><router-link class="pc-link" to="/radio">Radio</router-link></li>

  282.                                         <li class="pc-item ms-4" :class="{ 'active': $route.path === '/switch' }"><router-link class="pc-link" to="/switch">Switch</router-link></li>

  283.                                         <li class="pc-item ms-4" :class="{ 'active': $route.path === '/mega-option' }"><router-link class="pc-link" to="/mega-option">Mega

  284.                                                 option</router-link>

  285.                                         </li>

  286.                                     </ul>

  287.                                 </BCollapse>

  288.                             </li>

  289.                             <li class="pc-item pc-hasmenu">

  290.                                 <BLink class="pc-link" v-b-toggle.collapse-7>

  291.                                     <span class="pc-micon">

  292.                                         <i class="ph-duotone ph-windows-logo"></i>

  293.                                     </span>

  294.                                     <span class="pc-mtext">Form Layouts</span><span class="pc-arrow">

  295.                                         <ChevronDownIcon></ChevronDownIcon>

  296.                                     </span>

  297.                                 </BLink>

  298.                                 <BCollapse id="collapse-7">

  299.                                     <ul class="pc-submenu">

  300.                                         <li class="pc-item ms-4" :class="{ 'active': $route.path === '/layouts' }"><router-link class="pc-link" to="/layouts">Layouts</router-link>

  301.                                         </li>

  302.                                         <li class="pc-item ms-4" :class="{ 'active': $route.path === '/multicolumn' }"><router-link class="pc-link" to="/multicolumn">Multicolumn</router-link>

  303.                                         </li>

  304.                                         <li class="pc-item ms-4" :class="{ 'active': $route.path === '/actionbars' }"><router-link class="pc-link" to="/actionbars">Actionbars</router-link>

  305.                                         </li>

  306.                                         <li class="pc-item ms-4" :class="{ 'active': $route.path === '/sticky-action' }">

  307.                                             <router-link class="pc-link" to="/sticky-action">Sticky

  308.                                                 Action

  309.                                                 bars</router-link>

  310.                                         </li>

  311.                                     </ul>

  312.                                 </BCollapse>

  313.                             </li>

  314.                             <li class="pc-item pc-hasmenu" v-b-toggle.collapse-8>

  315.                                 <BLink class="pc-link">

  316.                                     <span class="pc-micon">

  317.                                         <i class="ph-duotone ph-cloud-arrow-up"></i>

  318.                                     </span>

  319.                                     <span class="pc-mtext">File upload</span><span class="pc-arrow">

  320.                                         <ChevronDownIcon></ChevronDownIcon>

  321.                                     </span>

  322.                                 </BLink>

  323.                                 <BCollapse id="collapse-8">

  324.                                     <ul class="pc-submenu">

  325.                                         <li class="pc-item ms-4" :class="{ 'active': $route.path === '/dropzone' }"><router-link class="pc-link" to="/dropzone">Dropzone</router-link>

  326.                                         </li>

  327.                                         <!-- <li class="pc-item ms-4"><router-link class="pc-link"

  328.                                     to="/uppy">Uppy</router-link></li> -->

  329.                                     </ul>

  330.                                 </BCollapse>

  331.                             </li>

  332.                             <li class="pc-item" :class="{ 'active': this.$route.path === '/validation' }">

  333.                                 <router-link to="/validation" class="pc-link">

  334.                                     <span class="pc-micon">

  335.                                         <i class="ph-duotone ph-password"></i>

  336.                                     </span>

  337.                                     <span class="pc-mtext">Form Validation</span>

  338.                                 </router-link>

  339.                             </li>

  340.                             <li class="pc-item" :class="{ 'active': this.$route.path === '/image-croper' }"><router-link to="/image-croper" class="pc-link">

  341.                                     <span class="pc-micon">

  342.                                         <i class="ph-duotone ph-crop"></i>

  343.                                     </span>

  344.                                     <span class="pc-mtext">Image cropper</span></router-link>

  345.                             </li>

  346.                             <li class="pc-item pc-caption">

  347.                                 <label>table</label>

  348.                                 <i class="ph-duotone ph-table"></i>

  349.                             </li>

  350.                             <li class="pc-item pc-hasmenu">

  351.                                 <BLink class="pc-link" v-b-toggle.collapse-9>

  352.                                     <span class="pc-micon">

  353.                                         <i class="ph-duotone ph-table"></i>

  354.                                     </span>

  355.                                     <span class="pc-mtext">Bootstrap Table</span><span class="pc-arrow">

  356.                                         <ChevronDownIcon></ChevronDownIcon>

  357.                                     </span>

  358.                                 </BLink>

  359.                                 <BCollapse id="collapse-9">

  360.                                     <ul class="pc-submenu">

  361.                                         <li class="pc-item ms-4" :class="{ 'active': $route.path === '/basic-table' }"><router-link class="pc-link" to="/basic-table">Basic

  362.                                                 table</router-link>

  363.                                         </li>

  364.                                         <li class="pc-item ms-4" :class="{ 'active': $route.path === '/sizing-table' }"><router-link class="pc-link" to="/sizing-table">Sizing

  365.                                                 table</router-link></li>

  366.                                         <li class="pc-item ms-4" :class="{ 'active': $route.path === '/border-table' }"><router-link class="pc-link" to="/border-table">Border

  367.                                                 table</router-link></li>

  368.                                         <li class="pc-item ms-4" :class="{ 'active': $route.path === '/styling-table' }">

  369.                                             <router-link class="pc-link" to="/styling-table">Styling

  370.                                                 table</router-link>

  371.                                         </li>

  372.                                     </ul>

  373.                                 </BCollapse>

  374.                             </li>

  375.                             <li class="pc-item pc-hasmenu">

  376.                                 <BLink class="pc-link" v-b-toggle.collapse-10>

  377.                                     <span class="pc-micon">

  378.                                         <i class="ph-duotone ph-grid-nine"></i>

  379.                                     </span>

  380.                                     <span class="pc-mtext">Vanilla Table</span><span class="pc-arrow">

  381.                                         <ChevronDownIcon></ChevronDownIcon>

  382.                                     </span>

  383.                                 </BLink>

  384.                                 <BCollapse id="collapse-10">

  385.                                     <ul class="pc-submenu">

  386.                                         <li class="pc-item ms-4" :class="{ 'active': $route.path === '/basic' }"><router-link class="pc-link" to="/basic">Basic

  387.                                                 initialization</router-link>

  388.                                         </li>

  389.                                         <li class="pc-item ms-4" :class="{ 'active': $route.path === '/method' }"><router-link class="pc-link" to="/method">Methods</router-link>

  390.                                         </li>

  391.                                         <li class="pc-item ms-4" :class="{ 'active': $route.path === '/row' }"><router-link class="pc-link" to="/row">Add

  392.                                                 Rows</router-link>

  393.                                         </li>

  394.                                         <li class="pc-item ms-4" :class="{ 'active': $route.path === '/api' }"><router-link class="pc-link" to="/api">Fetch

  395.                                                 API</router-link>

  396.                                         </li>

  397.                                         <li class="pc-item ms-4" :class="{ 'active': $route.path === '/filter' }"><router-link class="pc-link" to="/filter">Filters</router-link>

  398.                                         </li>

  399.                                         <li class="pc-item ms-4" :class="{ 'active': $route.path === '/export' }"><router-link class="pc-link" to="/export">Export</router-link></li>

  400.                                     </ul>

  401.                                 </BCollapse>

  402.                             </li>

  403.                             <li class="pc-item pc-caption">

  404.                                 <label>Charts &amp; Maps</label>

  405.                                 <i class="ph-duotone ph-chart-pie-slice"></i>

  406.                             </li>

  407.                             <li class="pc-item pc-hasmenu">

  408.                                 <BLink class="pc-link" v-b-toggle.collapse-13>

  409.                                     <span class="pc-micon">

  410.                                         <i class="ph-duotone ph-chart-donut"></i>

  411.                                     </span>

  412.                                     <span class="pc-mtext">Charts</span><span class="pc-arrow">

  413.                                         <ChevronDownIcon></ChevronDownIcon>

  414.                                     </span>

  415.                                 </BLink>

  416.                                 <BCollapse id="collapse-13">

  417.                                     <ul class="pc-submenu">

  418.                                         <li class="pc-item ms-4" :class="{ 'active': $route.path === '/apexchart' }"><router-link class="pc-link" to="/apexchart">Apex

  419.                                                 Chart</router-link>

  420.                                         </li>

  421.                                     </ul>

  422.                                 </BCollapse>

  423.                             </li>

  424.                             <li class="pc-item pc-hasmenu">

  425.                                 <BLink class="pc-link" v-b-toggle.collapse-14>

  426.                                     <span class="pc-micon">

  427.                                         <i class="ph-duotone ph-map-trifold"></i>

  428.                                     </span>

  429.                                     <span class="pc-mtext">Maps</span><span class="pc-arrow">

  430.                                         <ChevronDownIcon></ChevronDownIcon>

  431.                                     </span>

  432.                                 </BLink>

  433.                                 <BCollapse id="collapse-14">

  434.                                     <ul class="pc-submenu">

  435.                                         <li class="pc-item ms-4" :class="{ 'active': $route.path === '/maps' }"><router-link class="pc-link" to="/maps">Google Map</router-link>

  436.                                         </li>

  437.                                     </ul>

  438.                                 </BCollapse>

  439.                             </li>

  440.                             <li class="pc-item pc-caption">

  441.                                 <label>Application</label>

  442.                                 <i class="ph-duotone ph-buildings"></i>

  443.                             </li>

  444.                             <li class="pc-item" :class="{ 'active': this.$route.path === '/calendar' }">

  445.                                 <router-link to="/calendar" class="pc-link">

  446.                                     <span class="pc-micon">

  447.                                         <i class="ph-duotone ph-calendar-blank"></i>

  448.                                     </span>

  449.                                     <span class="pc-mtext">Calendar</span></router-link>

  450.                             </li>

  451.                             <li class="pc-item" :class="{ 'active': this.$route.path === '/chat' }">

  452.                                 <router-link to="/chat" class="pc-link">

  453.                                     <span class="pc-micon">

  454.                                         <i class="ph-duotone ph-chats-circle"></i>

  455.                                     </span>

  456.                                     <span class="pc-mtext">Chat</span></router-link>

  457.                             </li>

  458.                             <li class="pc-item pc-hasmenu">

  459.                                 <router-link to="#!" class="pc-link" v-b-toggle.collapse-15>

  460.                                     <span class="pc-micon">

  461.                                         <i class="ph-duotone ph-shopping-cart"></i>

  462.                                     </span>

  463.                                     <span class="pc-mtext">E-commerce</span><span class="pc-arrow">

  464.                                         <ChevronDownIcon></ChevronDownIcon>

  465.                                     </span></router-link>

  466.                                 <BCollapse id="collapse-15">

  467.                                     <ul class="pc-submenu">

  468.                                         <li class="pc-item ms-4" :class="{ 'active': $route.path === '/product' }"><router-link class="pc-link" to="/product">Product</router-link>

  469.                                         </li>

  470.                                         <li class="pc-item ms-4" :class="{ 'active': $route.path === '/product-details' }">

  471.                                             <router-link class="pc-link" to="/product-details">Product

  472.                                                 details</router-link>

  473.                                         </li>

  474.                                         <li class="pc-item ms-4" :class="{ 'active': $route.path === '/product-list' }"><router-link class="pc-link" to="/product-list">Product

  475.                                                 List</router-link></li>

  476.                                         <li class="pc-item ms-4" :class="{ 'active': $route.path === '/add-product' }"><router-link class="pc-link" to="/add-product">Add New

  477.                                                 Product</router-link></li>

  478.                                         <li class="pc-item ms-4" :class="{ 'active': $route.path === '/checkout' }"><router-link class="pc-link" to="/checkout">Checkout</router-link>

  479.                                         </li>

  480.                                     </ul>

  481.                                 </BCollapse>

  482.                             </li>

  483.                             <li class="pc-item" :class="{ 'active': this.$route.path === '/mail' }">

  484.                                 <router-link to="/mail" class="pc-link">

  485.                                     <span class="pc-micon">

  486.                                         <i class="ph-duotone ph-envelope-open"></i>

  487.                                     </span>

  488.                                     <span class="pc-mtext">Mail</span></router-link>

  489.                             </li>

  490.                             <li class="pc-item pc-hasmenu">

  491.                                 <BLink class="pc-link" v-b-toggle.collapse-16>

  492.                                     <span class="pc-micon">

  493.                                         <i class="ph-duotone ph-user-circle"></i>

  494.                                     </span>

  495.                                     <span class="pc-mtext">Users</span><span class="pc-arrow">

  496.                                         <ChevronDownIcon></ChevronDownIcon>

  497.                                     </span>

  498.                                 </BLink>

  499.                                 <BCollapse id="collapse-16">

  500.                                     <ul class="pc-submenu">

  501.                                         <li class="pc-item ms-4" :class="{ 'active': $route.path === '/account-profile' }">

  502.                                             <router-link class="pc-link" to="/account-profile">Account

  503.                                                 Profile</router-link>

  504.                                         </li>

  505.                                         <li class="pc-item ms-4" :class="{ 'active': $route.path === '/social-media' }"><router-link class="pc-link" to="/social-media">Social

  506.                                                 media</router-link>

  507.                                         </li>

  508.                                         <li class="pc-item ms-4" :class="{ 'active': $route.path === '/user-card' }"><router-link class="pc-link" to="/user-card">User

  509.                                                 Card</router-link>

  510.                                         </li>

  511.                                         <li class="pc-item ms-4" :class="{ 'active': $route.path === '/user-list' }"><router-link class="pc-link" to="/user-list">User

  512.                                                 List</router-link>

  513.                                         </li>

  514.                                     </ul>

  515.                                 </BCollapse>

  516.                             </li>

  517.                             <li class="pc-item pc-hasmenu">

  518.                                 <BLink class="pc-link" v-b-toggle.collapse-17>

  519.                                     <span class="pc-micon">

  520.                                         <i class="ph-duotone ph-newspaper"></i>

  521.                                     </span>

  522.                                     <span class="pc-mtext">Invoice</span><span class="pc-arrow">

  523.                                         <ChevronDownIcon></ChevronDownIcon>

  524.                                     </span>

  525.                                 </BLink>

  526.                                 <BCollapse id="collapse-17">

  527.                                     <ul class="pc-submenu">

  528.                                         <li class="pc-item ms-4" :class="{ 'active': $route.path === '/invoice-list' }"><router-link class="pc-link" to="/invoice-list">Invoice

  529.                                                 List</router-link>

  530.                                         </li>

  531.                                         <li class="pc-item ms-4" :class="{ 'active': $route.path === '/create' }"><router-link class="pc-link" to="/create">Create</router-link></li>

  532.                                         <li class="pc-item ms-4" :class="{ 'active': $route.path === '/preview' }"><router-link class="pc-link" to="/preview">Preview</router-link>

  533.                                         </li>

  534.                                     </ul>

  535.                                 </BCollapse>

  536.                             </li>

  537.                             <li class="pc-item pc-caption">

  538.                                 <label>Pages</label>

  539.                                 <i class="ph-duotone ph-devices"></i>

  540.                             </li>

  541.                             <li class="pc-item pc-hasmenu" v-b-toggle.collapse-18>

  542.                                 <BLink href="#!" class="pc-link">

  543.                                     <span class="pc-micon">

  544.                                         <i class="ph-duotone ph-shield-checkered"></i>

  545.                                     </span>

  546.                                     <span class="pc-mtext">Authentication</span><span class="pc-arrow">

  547.                                         <ChevronDownIcon></ChevronDownIcon>

  548.                                     </span>

  549.                                 </BLink>

  550.                             </li>

  551.                             <BCollapse id="collapse-18">

  552.                                 <ul class="pc-submenu">

  553.                                     <li class="pc-item pc-hasmenu ms-4" v-b-toggle.collapse-19>

  554.                                         <BLink href="#!" class="pc-link">Authentication 1<span class="pc-arrow">

  555.                                                 <ChevronDownIcon></ChevronDownIcon>

  556.                                             </span></BLink>

  557.                                         <BCollapse id="collapse-19">

  558.                                             <ul class="pc-submenu">

  559.                                                 <li class="pc-item ms-4"><router-link class="pc-link" target="_blank" to="/login-v1">Login</router-link>

  560.                                                 </li>

  561.                                                 <li class="pc-item ms-4"><router-link class="pc-link" target="_blank" to="/register-v1">Register</router-link>

  562.                                                 </li>

  563.                                                 <li class="pc-item ms-4"><router-link class="pc-link" target="_blank" to="/forgot-password-v1">Forgot

  564.                                                         Password</router-link></li>

  565.                                                 <li class="pc-item ms-4"><router-link class="pc-link" target="_blank" to="/reset-password-v1">reset

  566.                                                         password</router-link> </li>

  567.                                                 <li class="pc-item ms-4"><router-link class="pc-link" target="_blank" to="/code-verification-v1">code

  568.                                                         verification</router-link></li>

  569.                                             </ul>

  570.                                         </BCollapse>

  571.                                     </li>

  572.                                     <li class="pc-item pc-hasmenu ms-4">

  573.                                         <BLink class="pc-link" v-b-toggle.collapse-21>Authentication 2<span class="pc-arrow">

  574.                                                 <ChevronDownIcon></ChevronDownIcon>

  575.                                             </span>

  576.                                         </BLink>

  577.                                         <BCollapse id="collapse-21">

  578.                                             <ul class="pc-submenu">

  579.                                                 <li class="pc-item ms-4"><router-link class="pc-link" target="_blank" to="/login-v2">Login</router-link>

  580.                                                 </li>

  581.                                                 <li class="pc-item ms-4"><router-link class="pc-link" target="_blank" to="/register-v2">Register</router-link>

  582.                                                 </li>

  583.                                                 <li class="pc-item ms-4"><router-link class="pc-link" target="_blank" to="/forgot-password-v2">Forgot

  584.                                                         password</router-link> </li>

  585.                                                 <li class="pc-item ms-4"><router-link class="pc-link" target="_blank" to="/reset-password-v2">reset

  586.                                                         password</router-link> </li>

  587.                                                 <li class="pc-item ms-4"><router-link class="pc-link" target="_blank" to="/code-verification-v2">code

  588.                                                         verification</router-link></li>

  589.                                             </ul>

  590.                                         </BCollapse>

  591.                                     </li>

  592.                                 </ul>

  593.                             </BCollapse>

  594.                             <!-- </li> -->

  595.                             <li class="pc-item pc-hasmenu" v-b-toggle.collapse-22>

  596.                                 <BLink class="pc-link">

  597.                                     <span class="pc-micon">

  598.                                         <i class="ph-duotone ph-wrench"></i>

  599.                                     </span>

  600.                                     <span class="pc-mtext">Maintenance</span><span class="pc-arrow">

  601.                                         <ChevronDownIcon></ChevronDownIcon>

  602.                                     </span>

  603.                                 </BLink>

  604.                                 <BCollapse id="collapse-22">

  605.                                     <ul class="pc-submenu">

  606.                                         <li class="pc-item ms-4"><router-link class="pc-link" target="_blank" to="/error-404">Error

  607.                                                 404</router-link>

  608.                                         </li>

  609.                                         <li class="pc-item ms-4"><router-link class="pc-link" target="_blank" to="/connection-lost">Connection

  610.                                                 lost</router-link></li>

  611.                                         <li class="pc-item ms-4"><router-link class="pc-link" target="_blank" to="/under-construction">Under

  612.                                                 Construction</router-link></li>

  613.                                         <li class="pc-item ms-4"><router-link class="pc-link" target="_blank" to="/comming-soon">Coming

  614.                                                 soon</router-link>

  615.                                         </li>

  616.                                     </ul>

  617.                                 </BCollapse>

  618.                             </li>

  619.                             <li class="pc-item" :class="{ 'active': this.$route.path === '/' }"><router-link to="/" class="pc-link" target="_blank"><span class="pc-micon">

  620.                                         <i class="ph-duotone ph-rocket"></i> </span><span class="pc-mtext">Landing</span></router-link>

  621.                             </li>

  622.                             <li class="pc-item pc-caption">

  623.                                 <label>Other</label>

  624.                                 <i class="ph-duotone ph-suitcase"></i>

  625.                             </li>

  626.                             <li class="pc-item pc-hasmenu" v-b-toggle.collapse-23>

  627.                                 <BLink class="pc-link"><span class="pc-micon">

  628.                                         <i class="ph-duotone ph-tree-structure"></i> </span><span class="pc-mtext">Menu

  629.                                         levels</span><span class="pc-arrow">

  630.                                         <ChevronDownIcon></ChevronDownIcon>

  631.                                     </span></BLink>

  632.                                 <BCollapse id="collapse-23">

  633.                                     <ul class="pc-submenu">

  634.                                         <li class="pc-item">

  635.                                             <BLink class="pc-link">Level 2.1</BLink>

  636.                                         </li>

  637.                                         <li class="pc-item pc-hasmenu" v-b-toggle.collapse-24>

  638.                                             <BLink class="pc-link">Level 2.2<span class="pc-arrow">

  639.                                                     <ChevronDownIcon></ChevronDownIcon>

  640.                                                 </span></BLink>

  641.                                             <BCollapse id="collapse-24">

  642.                                                 <ul class="pc-submenu">

  643.                                                     <li class="pc-item">

  644.                                                         <BLink class="pc-link">Level 3.1</BLink>

  645.                                                     </li>

  646.                                                     <li class="pc-item">

  647.                                                         <BLink class="pc-link">Level 3.2</BLink>

  648.                                                     </li>

  649.                                                     <li class="pc-item pc-hasmenu" v-b-toggle.collapse-25>

  650.                                                         <BLink class="pc-link">Level 3.3<span class="pc-arrow">

  651.                                                                 <ChevronDownIcon></ChevronDownIcon>

  652.                                                             </span></BLink>

  653.                                                         <BCollapse id="collapse-25">

  654.                                                             <ul class="pc-submenu">

  655.                                                                 <li class="pc-item">

  656.                                                                     <BLink class="pc-link">Level 4.1</BLink>

  657.                                                                 </li>

  658.                                                                 <li class="pc-item">

  659.                                                                     <BLink class="pc-link">Level 4.2</BLink>

  660.                                                                 </li>

  661.                                                             </ul>

  662.                                                         </BCollapse>

  663.                                                     </li>

  664.                                                 </ul>

  665.                                             </BCollapse>

  666.                                         </li>

  667.                                         <li class="pc-item pc-hasmenu" v-b-toggle.collapse-26>

  668.                                             <BLink class="pc-link">Level 2.3<span class="pc-arrow">

  669.                                                     <ChevronDownIcon></ChevronDownIcon>

  670.                                                 </span></BLink>

  671.                                             <BCollapse id="collapse-26">

  672.                                                 <ul class="pc-submenu">

  673.                                                     <li class="pc-item">

  674.                                                         <BLink class="pc-link">Level 3.1</BLink>

  675.                                                     </li>

  676.                                                     <li class="pc-item">

  677.                                                         <BLink class="pc-link">Level 3.2</BLink>

  678.                                                     </li>

  679.                                                     <li class="pc-item pc-hasmenu" v-b-toggle.collapse-27>

  680.                                                         <BLink class="pc-link">Level 3.3<span class="pc-arrow">

  681.                                                                 <ChevronDownIcon></ChevronDownIcon>

  682.                                                             </span></BLink>

  683.                                                         <BCollapse id="collapse-27">

  684.                                                             <ul class="pc-submenu">

  685.                                                                 <li class="pc-item">

  686.                                                                     <BLink class="pc-link">Level 4.1</BLink>

  687.                                                                 </li>

  688.                                                                 <li class="pc-item">

  689.                                                                     <BLink class="pc-link">Level 4.2</BLink>

  690.                                                                 </li>

  691.                                                             </ul>

  692.                                                         </BCollapse>

  693.                                                     </li>

  694.                                                 </ul>

  695.                                             </BCollapse>

  696.                                         </li>

  697.                                     </ul>

  698.                                 </BCollapse>

  699.                             </li>

  700.                             <li class="pc-item" :class="{ 'active': this.$route.path === '/sample-page' }"><router-link to="/sample-page" class="pc-link">

  701.                                     <span class="pc-micon">

  702.                                         <i class="ph-duotone ph-desktop"></i>

  703.                                     </span>

  704.                                     <span class="pc-mtext">Sample page</span></router-link>

  705.                             </li>

  706.                         </ul>

  707. 

  708.                         <div class="card nav-action-card bg-brand-color-4">

  709.                             <div class="card-body" :style="{ 'background-image': 'url(' + require('@/assets/images/layout/nav-card-bg.svg') + ')' }">

  710.                                 <h5 class="text-dark">Help Center</h5>

  711.                                 <p class="text-dark text-opacity-75">Please contact us for more questions.</p>

  712.                                 <BLink href="#" class="btn btn-primary" target="_blank">Go to help

  713.                                     Center</BLink>

  714.                             </div>

  715.                         </div>

  716.                     </div>

  717.                 </simplebar>

  718. 

  719.             </div>

  720. 

  721.             <BCard no-body class="pc-user-card">

  722.                 <BCardBody>

  723.                     <div class="d-flex align-items-center">

  724.                         <div class="flex-shrink-0">

  725.                             <img src="@/assets/images/user/avatar-1.jpg" alt="user-image" class="user-avtar wid-45 rounded-circle">

  726.                         </div>

  727.                         <div class="flex-grow-1 ms-3 me-2">

  728.                             <h6 class="mb-0">Jonh Smith</h6>

  729.                             <small>Administrator</small>

  730.                         </div>

  731.                         <BDropdown variant="purple" dropup no-caret>

  732.                             <template v-slot:button-content>

  733.                                 <span class="btn btn-icon btn-link-secondary avtar arrow-none dropdown-toggle">

  734.                                     <i class="ph-duotone ph-windows-logo"></i>

  735.                                 </span>

  736.                             </template>

  737.                             <BRow xl="6">

  738.                                 <BCol xl="6">

  739.                                     <BDropdownItem class="pc-user-links p-0">

  740.                                         <div class="align-middle">

  741.                                             <i class="ph-duotone ph-user"></i>

  742.                                             <br>

  743.                                             <span>My Account</span>

  744.                                         </div>

  745.                                     </BDropdownItem>

  746.                                     <BDropdownDivider />

  747.                                     <BDropdownItem class="pc-user-links p-0">

  748.                                         <i class="ph-duotone ph-lock-key"></i> <br>

  749.                                         <span>Lock Screen</span>

  750.                                     </BDropdownItem>

  751.                                     <BDropdownDivider />

  752.                                 </BCol>

  753.                                 <BCol xl="6">

  754.                                     <BDropdownItem class="pc-user-links p-0">

  755.                                         <i class="ph-duotone ph-gear"></i> <br>

  756.                                         <span>Settings</span>

  757.                                     </BDropdownItem>

  758.                                     <BDropdownDivider />

  759.                                     <BDropdownItem class="pc-user-links p-0">

  760.                                         <i class="ph-duotone ph-power"></i> <br>

  761.                                         <span>Logout</span>

  762.                                     </BDropdownItem>

  763.                                     <BDropdownDivider />

  764.                                 </BCol>

  765.                             </BRow>

  766.                         </BDropdown>

  767.                     </div>

  768.                 </BCardBody>

  769.             </BCard>

  770.         </nav>

  771.         <!-- [ Sidebar Menu ] end -->

  772. 

  773.         <div v-if="$store.state.isMobileSidebarActive" class="pc-menu-overlay"></div>

  774.     </div>

  775.     <div class="pc-header">

  776.         <Navbar />

  777.     </div>

  778. 

  779.     <div class="pc-container">

  780.         <div class="pc-content" :class="{ 'container': isFixedWidth }">

  781.             <pageheader title="Layout-2" pageTitle="Layout" />

  782.             <!-- Start Content-->

  783.             <BRow>

  784.                 <!-- [ sample-page ] start -->

  785.                 <BCol sm="12">

  786.                     <BCard no-body>

  787.                         <BCardBody>

  788.                             <h5>Brand Color</h5>

  789.                             <small>set background utility class in <code>.m-header</code> in sidebar</small>

  790.                             <BRow class="g-3 mt-3">

  791.                                 <div class="col-auto">

  792.                                     <a href="#" class="avtar avtar-s bg-brand-color-1" @click="changebrand('bg-brand-color-1')">

  793.                                         <i class="ph-duotone ph-paint-brush text-white f-18"></i>

  794.                                     </a>

  795.                                 </div>

  796.                                 <div class="col-auto">

  797.                                     <a href="#" class="avtar avtar-s bg-brand-color-2" @click="changebrand('bg-brand-color-2')">

  798.                                         <i class="ph-duotone ph-paint-brush text-white f-18"></i>

  799.                                     </a>

  800.                                 </div>

  801.                                 <div class="col-auto">

  802.                                     <a href="#" class="avtar avtar-s bg-brand-color-3" @click="changebrand('bg-brand-color-3')">

  803.                                         <i class="ph-duotone ph-paint-brush text-white f-18"></i>

  804.                                     </a>

  805.                                 </div>

  806.                                 <div class="col-auto">

  807.                                     <a href="#" class="avtar avtar-s bg-primary" @click="changebrand('bg-primary')">

  808.                                         <i class="ph-duotone ph-paint-brush text-white f-18"></i>

  809.                                     </a>

  810.                                 </div>

  811.                                 <div class="col-auto">

  812.                                     <a href="#" class="avtar avtar-s bg-secondary" @click="changebrand('bg-secondary')">

  813.                                         <i class="ph-duotone ph-paint-brush text-white f-18"></i>

  814.                                     </a>

  815.                                 </div>

  816.                                 <div class="col-auto">

  817.                                     <a href="#" class="avtar avtar-s bg-danger" @click="changebrand('bg-danger')">

  818.                                         <i class="ph-duotone ph-paint-brush text-white f-18"></i>

  819.                                     </a>

  820.                                 </div>

  821.                                 <div class="col-auto">

  822.                                     <a href="#" class="avtar avtar-s bg-success" @click="changebrand('bg-success')">

  823.                                         <i class="ph-duotone ph-paint-brush text-white f-18"></i>

  824.                                     </a>

  825.                                 </div>

  826.                                 <div class="col-auto">

  827.                                     <a href="#" class="avtar avtar-s bg-warning" @click="changebrand('bg-warning')">

  828.                                         <i class="ph-duotone ph-paint-brush text-white f-18"></i>

  829.                                     </a>

  830.                                 </div>

  831.                                 <div class="col-auto">

  832.                                     <a href="#" class="avtar avtar-s bg-info" @click="changebrand('bg-info')">

  833.                                         <i class="ph-duotone ph-paint-brush text-white f-18"></i>

  834.                                     </a>

  835.                                 </div>

  836. 

  837.                             </BRow>

  838.                         </BCardBody>

  839.                     </BCard>

  840.                     <!-- [ sample-page ] end -->

  841.                 </BCol>

  842.                 <!-- [ Main Content ] end -->

  843.             </BRow>

  844.         </div>

  845.     </div>

  846.     <div class="pc-footer">

  847.         <FooterComponents />

  848.     </div>

  849.     <Rightbar />

  850. </template>