Spark Kiosk Sub menu item

I am trying to create my own kiosk manager for a trouble ticket system. I have already managed some of the baseline design, but one of the things i would like to do is create submenu on the kiosk.

<!-- Tickets Link -->
<li role="presentation">
     <a href="#tickets" aria-controls="tickets" role="tab" data-toggle="tab">
          <i class="fa fa-fw fa-btn fa-ticket"></i>Tickets
     </a>
</li>

How could i create a submenu in there? I was originally nesting an additional unordered list, but i want the submenu to disappear when the parent is not active.

Obviously i could do this by modifying the original spark code, but my goal is to make a drop in package with as little modification to spark as possible.

Any direction is greatly appreciated!

danmatthews

8 years ago

Level 5

I could be wrong, but i believe the items in the spark kiosk menu are hardcoded as HTML, check out:

resources/views/vendor/spark/kiosk.blade.php

And there's not really any way of hooking in to add a new item unfortunately - though i agree that would be a great feature for extensibility.

I'm not sure if it's totally possible (or a good idea), but you could potentially do some clever HTML and file manipulations when the package installs - but i think it's not that big a deal asking people to insert the menu item themselves when installing the package.

You could even add your item as a view that they can pull in using @include:

<!-- Last item in the spark kiosk menu... -->
<!-- Users Link -->
<li role="presentation">
  <a href="#users" aria-controls="users" role="tab" data-toggle="tab">
    <i class="fa fa-fw fa-btn fa-user"></i>
  </a>
</li>
@include('yourpackage::nav_item)

Hope that gives you some ideas.

brandenwagner

8 years ago

Level 4

Thats not quite what i was asking. Im looking to create a submenu item

like now with html for the users "tab" lets say when users is the active tab i want to display additional menu items under it like Users

Search
Create
Groups

Of course that was just as an example I actually want to do something like

<!-- Tickets Link -->
<li role="presentation">
  <a href="#tickets" aria-controls="tickets" role="tab" data-toggle="tab">
    <i class="fa fa-fw fa-btn fa-tickets"></i> Tickets
  </a>
  <ul>
      <li><a href="#tickets/status/open">Open</a></li>
      <li><a href="#tickets/status/closed">Closed</a></li>
</li>

I just dont know the best way with vue to make these sub menu items appear when the parent nav is selected

Cronix

8 years ago

Best Answer

Level 67

Wouldn't you just use a nav dropdown like normal for bootstrap? I don't think you need to use Vue there. It's just part of bootstraps nav component (like the main dropdown is)

brandenwagner

8 years ago

Level 4

You know..... I'm disappointed in myself for that one. I was spending all this te trying to figure out how I was going to write a component to interact with it... I was completely over thinking it.

Cronix

8 years ago

Level 67

Please mark the correct answer with the solution so it shows as solved.

Please or to participate in this conversation.