bipin's avatar
Level 2

how to hide sidebar in vue

hello, guys, I m new to Vue and taken a coreui admin panel to develop some font vue but now I got stuck in this problem this is nav.js file

   export default {
          items: [
                   {
                   name: 'Product',
                   url: '/product',
                   icon: 'fa fa-cart-arrow-down',
                         children: [
                                      {
                                       name: 'Addproduct',
                                       url: '/product/Addproduct',
                                     },
                                       {
                                        name: 'Listproduct',
                                        url: '/product/Listproduct',
                                     }
                             ]
                    },

             ]
     }

main container

            <template>
                  <div class="app">     
                            <div class="app-body">
                               <Sidebar :navItems="nav"/>
                                    <main class="main">
                                           <div class="container-fluid">
                                              <router-view></router-view>
                                          </div>
                                    </main>
                             <AppAside/>
                        </div>
              </div>
       </template>

      <script>
             import nav from '../_nav'
             export default {
             name: 'full',
            components: {
                    Sidebar,

                          },
          data () {
                  return {
                nav: nav.items
            }
         },
        computed: {
            name () {
            return this.$route.name
        },
           list () {
            return this.$route.matched
                    }
                }
         }
    </script>

here is my sidebar

                <template v-for="(item, index) in navItems">
                        <template v-if="item.title">
                                <SidebarNavTitle :name="item.name" :classes="item.class" :wrapper="item.wrapper"/>
                      </template>
      
      
                      <template v-else>
                          <template v-if="item.children">
                     </template>
                <template v-else>
                      <SidebarNavItem :classes="item.class">
                         <SidebarNavLink :name="item.name" :url="item.url" :icon="item.icon" :badge="item.badge" :variant="item.variant"/>
                   </SidebarNavItem>
               </template>
           </template>
    </template>

i m stroing addproduct in my browser local storage now if when user login and go to dashboard then my i watch which url name is present in browser application or not if present show that else ignore now my problem is that how i can apply if condition like addproduct=addprodcut this this visible else hide

0 likes
2 replies
rin4ik's avatar
<div v-if="addproduct==addprodcut">
       <template v-for="(item, index) in navItems">
                        <template v-if="item.title">
                                <SidebarNavTitle :name="item.name" :classes="item.class" :wrapper="item.wrapper"/>
                      </template>
      
      
                      <template v-else>
                          <template v-if="item.children">
                     </template>
                <template v-else>
                      <SidebarNavItem :classes="item.class">
                         <SidebarNavLink :name="item.name" :url="item.url" :icon="item.icon" :badge="item.badge" :variant="item.variant"/>
                   </SidebarNavItem>
               </template>
           </template>
    </template>
</div>
bipin's avatar
Level 2

@rin4ik i have addproduct in navItems and other one in localstroge

Please or to participate in this conversation.