/ Main Sidebar Container
%aside.main-sidebar.sidebar-dark-primary.elevation-4{ data: { controller: 'left-nav' }}
  / Brand Logo
  %a.brand-link.bg-info{:href => "/"}
    %img.brand-image.img-circle.elevation-3{:alt => @context.logo.alt, :src => @context.logo.url, :style => "opacity: .8"}/
    %span.brand-text.font-weight-light= @context.name
  / Sidebar
  .sidebar
    / Sidebar user panel (optional)
    .user-panel.mt-3.pb-3.mb-3.d-flex
      .image
        %img.img-circle.elevation-2{:alt => "User Image", :src => image_path(user_image_path(nil))}/
      .info
        %a.d-block{:href => "#"}= 'current_user'
    / SidebarSearch Form
    .form-inline
      .input-group{"data-widget" => "sidebar-search"}
        %input.form-control.form-control-sidebar{"aria-label" => "Search Menu Items", :placeholder => "Search Menu Items", :type => "search"}/
        .input-group-append
          %button.btn.btn-sidebar
            %i.fas.fa-search.fa-fw
    / Sidebar Menu
    %nav.mt-2
      %ul.nav.nav-pills.nav-sidebar.nav-compact.flex-column{"data-accordion" => "false", "data-widget" => "treeview", :role => "menu"}
        - @context.menu_items.each do |menu_item|
          = render Olivander::Components::MenuItemComponent.new(menu_item)


:javascript
  $(document).ready(function(){
    function getUrl() {
      const reg = /\/new|\/[0-9]+[\/edit]*/,
            url = "" + window.location;
      return url.replace(reg, '');
    }
    const url = getUrl();

    $('ul.nav-sidebar a').filter(function() {
      return this.href == url;
    }).addClass('active');

    $('ul.nav-sidebar a').filter(function() {
      return this.href == url;
    }).parent().addClass('active');

    $('ul.nav-treeview a').filter(function() {
      return this.href == url;
    }).parentsUntil(".sidebar-menu > .nav-treeview").addClass('menu-open');

    $('ul.nav-treeview a').filter(function() {
      return this.href == url;
    }).addClass('active');

    $('li.has-treeview a').filter(function() {
      return this.href == url;
    }).addClass('active');

    $('ul.nav-treeview a').filter(function() {
      return this.href == url;
    }).parentsUntil(".sidebar-menu > .nav-treeview").children(0).addClass('active');
  });