Skip to content

Commit

Permalink
Merge pull request #275 from IbeVanmeenen/issue_271
Browse files Browse the repository at this point in the history 
add submenu on dropdown-menu
  • Loading branch information
@krispypen
krispypen committed Apr 8, 2015
2 parents 7c3e700 + 2aa258c commit f8cb421
Show file tree
Hide file tree
Showing 3 changed files with 152 additions and 121 deletions.
63 changes: 32 additions & 31 deletions src/Kunstmaan/AdminBundle/Resources/ui/scss/default-theme/components/_components.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,49 +7,50 @@
/* Vendors
========================================================================== */
@import "vendors/bootstrap-components/grid",
"vendors/bootstrap-components/pagination",
"vendors/bootstrap-components/navbar",
"vendors/bootstrap-components/modal",
"vendors/bootstrap-components/input-group-addon",
"vendors/bootstrap-components/alert",
"vendors/bootstrap-components/list-group",
"vendors/bootstrap-components/table",
"vendors/font-awesome/icon-symlinks",
"vendors/jstree",
"vendors/select2",
"vendors/eonasdan-bootstrap-datetimepicker/bootstrap-datetimepicker",
"vendors/mjolnic-bootstrap-colorpicker/mjolnic-bootstrap-colorpicker";
"vendors/bootstrap-components/pagination",
"vendors/bootstrap-components/navbar",
"vendors/bootstrap-components/modal",
"vendors/bootstrap-components/input-group-addon",
"vendors/bootstrap-components/alert",
"vendors/bootstrap-components/list-group",
"vendors/bootstrap-components/table",
"vendors/bootstrap-components/dropdown-menu",
"vendors/font-awesome/icon-symlinks",
"vendors/jstree",
"vendors/select2",
"vendors/eonasdan-bootstrap-datetimepicker/bootstrap-datetimepicker",
"vendors/mjolnic-bootstrap-colorpicker/mjolnic-bootstrap-colorpicker";


/* Forms
========================================================================== */
@import "forms/form",
"forms/fieldset",
"forms/form-actions",
"forms/form-properties",
"forms/form-group",
"forms/form-control",
"forms/label";
"forms/fieldset",
"forms/form-actions",
"forms/form-properties",
"forms/form-group",
"forms/form-control",
"forms/label";


/* Blocks
========================================================================== */
@import "blocks/buttons",
"blocks/tables",
"blocks/choice-block";
"blocks/tables",
"blocks/choice-block";


/* Structures
========================================================================== */
@import "structures/app__filter",
"structures/page-template",
"structures/page-actions",
"structures/pp",
"structures/pp-container",
"structures/sortable",
"structures/ajax-modal",
"structures/url-chooser",
"structures/media-chooser",
"structures/media-thumbnail",
"structures/nested-form",
"structures/dnd";
"structures/page-template",
"structures/page-actions",
"structures/pp",
"structures/pp-container",
"structures/sortable",
"structures/ajax-modal",
"structures/url-chooser",
"structures/media-chooser",
"structures/media-thumbnail",
"structures/nested-form",
"structures/dnd";
27 changes: 27 additions & 0 deletions ...sources/ui/scss/default-theme/components/vendors/bootstrap-components/_dropdown-menu.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
/* ==========================================================================
Bootstrap dropdown menu adjustments
========================================================================== */


.dropdown-menu__item--has-submenu {
position: relative;
}

.dropdown-toggle--submenu {

&:hover {

+ .dropdown-menu--submenu {
display: block;
}
}
}

.dropdown-menu--submenu {
top: 0;
left: calc(100% - 10px);

&:hover {
display: block;
}
}
183 changes: 93 additions & 90 deletions src/Kunstmaan/AdminBundle/Resources/views/Default/app_header.html.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,103 +2,106 @@

<!-- App Header -->
<nav role="navigation" class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="container-fluid">

<!-- Header -->
<div class="navbar-header">
<!-- Header -->
<div class="navbar-header">

<!--Header - Toggle -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-nav-bar">
<span class="sr-only">Toggle</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!--Header - Toggle -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-nav-bar">
<span class="sr-only">Toggle</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>

<!-- Header - Brand -->
<a class="navbar-brand app__header__brand" href="{{ path('KunstmaanAdminBundle_homepage') }}">
{{ websitetitle | trans }}
</a>
</div>
<!-- Header - Brand -->
<a class="navbar-brand app__header__brand" href="{{ path('KunstmaanAdminBundle_homepage') }}">
{{ websitetitle | trans }}
</a>
</div>

<!-- Navigation -->
<div class="collapse navbar-collapse app__nav__container" id="main-nav-bar">
<!-- Navigation -->
<div class="collapse navbar-collapse app__nav__container" id="main-nav-bar">

<!-- Navigation - Left -->
<ul class="nav navbar-nav">
{% for menuitem in adminmenu.topchildren %}
{% set topchildren = menuitem.topchildren %}
{% if topchildren | length > 0 %}
<!-- Navigation Item - with sub-items -->
<li class="dropdown{% if menuitem.active %} active{% endif %}">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
{{ menuitem.label | trans }}
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
{% for topchild in topchildren %}
{% set nestedtopchildren = topchild.topchildren %}
{% if nestedtopchildren | length > 0 %}
<li class="dropdown-submenu{% if topchild.active %} active{% endif %}{% if loop.first %} first{% endif %}{% if loop.last %} last{% endif %}">
<a tabindex="-1" href="#">
{{ topchild.label | trans }}
</a>
<ul class="dropdown-menu">
{% for nestedtopchild in nestedtopchildren %}
<li class="{% if nestedtopchild.active %}active{% endif %}{% if loop.first %} first{% endif %}{% if loop.last %} last{% endif %}">
<a href="{{ path(nestedtopchild.route, nestedtopchild.routeparams) }}">
{{ nestedtopchild.label | trans }}
</a>
</li>
{% endfor %}
</ul>
</li>
{% else %}
{% if topchild.route %}
<li class="{% if topchild.active %} active {% endif %} {% if loop.first %} first {% endif %} {% if loop.last %} last {% endif %}">
<a href="{{ path(topchild.route, topchild.routeparams) }}">
{{ topchild.label | trans }}
</a>
</li>
{% endif %}
{% endif %}
{% endfor %}
</ul>
</li>
{% else %}
<!-- Navigation Item - without sub-items -->
<li class="{% if menuitem.active %} active{% endif %}">
<a href="{{ path(menuitem.route, menuitem.routeparams) }}">
{{ menuitem.label | trans }}
</a>
</li>
{% endif %}
{% endfor %}
</ul>
<!-- Navigation - Left -->
<ul class="nav navbar-nav">
{% for menuitem in adminmenu.topchildren %}

<!-- Navigation - Right -->
<ul class="nav navbar-nav navbar-right">
{% set route = app.request.attributes.get('_route') %}
{% set attribs = app.request.attributes.all %}
{{ localeswitcher_widget(requiredlocales, route) }}
{% set topchildren = menuitem.topchildren %}
{% if topchildren | length > 0 %}
<!-- Navigation Item - with sub-items -->
<li class="dropdown{% if menuitem.active %} active{% endif %}">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
{{ menuitem.label | trans }}
<i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-menu" role="menu">
{% for topchild in topchildren %}
{% set nestedtopchildren = topchild.topchildren %}
{% if nestedtopchildren | length > 0 %}
<li class="dropdown-menu__item--has-submenu{% if topchild.active %} active{% endif %}{% if loop.first %} first{% endif %}{% if loop.last %} last{% endif %}">
<a href="#" class="dropdown-toggle dropdown-toggle dropdown-toggle--submenu" data-toggle="dropdown" role="button" aria-expanded="false">
{{ topchild.label | trans }}
<i class="fa fa-caret-right"></i>
</a>
<ul class="dropdown-menu dropdown-menu--submenu">
{% for nestedtopchild in nestedtopchildren %}
<li class="{% if nestedtopchild.active %}active{% endif %}{% if loop.first %} first{% endif %}{% if loop.last %} last{% endif %}">
<a href="{{ path(nestedtopchild.route, nestedtopchild.routeparams) }}">
{{ nestedtopchild.label | trans }}
</a>
</li>
{% endfor %}
</ul>
</li>
{% else %}
{% if topchild.route %}
<li class="{% if topchild.active %}active{% endif %}{% if loop.first %} first{% endif %}{% if loop.last %} last{% endif %}">
<a href="{{ path(topchild.route, topchild.routeparams) }}">
{{ topchild.label | trans }}
</a>
</li>
{% endif %}
{% endif %}
{% endfor %}
</ul>
</li>
{% else %}
<!-- Navigation Item - without sub-items -->
<li class="{% if menuitem.active %} active{% endif %}">
<a href="{{ path(menuitem.route, menuitem.routeparams) }}">
{{ menuitem.label | trans }}
</a>
</li>
{% endif %}
{% endfor %}
</ul>

<!-- Logged in as -->
<li>
<a href="{{ path('KunstmaanAdminBundle_user_change_password', { 'id':app.user.id }) }}">
<i class="fa fa-user"></i>
&nbsp;
{{ app.user.username|capitalize }}
</a>
</li>
<!-- Navigation - Right -->
<ul class="nav navbar-nav navbar-right">
{% set route = app.request.attributes.get('_route') %}
{% set attribs = app.request.attributes.all %}

<!-- Logout -->
<li>
<a href="{{ path('fos_user_security_logout') }}" id="app__logout" title="logout">
<i class="fa fa-sign-out"></i>
</a>
</li>
</ul>
</div>
</div>
{{ localeswitcher_widget(requiredlocales, route) }}

<!-- Logged in as -->
<li>
<a href="{{ path('KunstmaanAdminBundle_user_change_password', { 'id':app.user.id }) }}">
<i class="fa fa-user"></i>
&nbsp;
{{ app.user.username|capitalize }}
</a>
</li>

<!-- Logout -->
<li>
<a href="{{ path('fos_user_security_logout') }}" id="app__logout" title="logout">
<i class="fa fa-sign-out"></i>
</a>
</li>
</ul>
</div>
</div>
</nav>
</header>

0 comments on commit f8cb421

Please sign in to comment.