vue-laravel-dashboard-sidebar-component v0.0.2

vue-laravel-dashboard-sidebar-component

GitHub - npm

This is a admin dashboard sidebar. The links has to be filled out yourself, but all the "good" stuff is already there. The component takes in only one prop, and that is nav-data wich is where you send the navigation array.

The best solution that i found to create this array is to simply create a ViewComposer in Laravel and passing the navigation array to the view you are using the component on. Here is a small example of how this navigation array would by structured:

View::composer('your view where you have the component', function($view) {
      return $view->with('navData', json_encode([
          (object) [
              'text' => 'Home',
              'url' => '/',
              'dropdown' => false
          ],
          (object) [
              'text' => 'Dropdown',
              'url' => '#',
              'dropdown' => [
                  (object) [
                      'text' => 'Item 1',
                      'url' => /item/1,
                  ], 
                  (object) [
                      'text' => 'Item 2',
                      'url' => '/item/2'
                  ]
              ]
          ]
      ]));
  });

Then in your view file where the component is going to be, you just do this:

<sidebar-component :nav-data="{{ $navData }}"></sidebar-component>

Functionality:

• active - Active navigation link in the sidebar will have the active class so you can style it differently that the others.

• show - There is dropdown functionality. Not multidimensional, but dropdown none the less.

There is no CSS applied to this.