Implemented color filters to navbar

This commit is contained in:
Kevin Frantz
2018-07-15 08:53:15 +02:00
parent d480467615
commit ae7c8b9278
7 changed files with 83 additions and 47 deletions

View File

@@ -1,6 +1,7 @@
{% extends "base.html.twig" %}
{% block body %}
{% include 'frames/structure/navbar.html.twig' with menu_items %}
<br />
<div class="container">
{% block content %}
{% endblock %}

View File

@@ -1,32 +1,34 @@
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="/">Online Shop</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
{% for item in menu_items %}
<!--<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
-->
<li class="nav-item {% if item.active %}active{% endif %}">
<a class="nav-link" href="{{ item.url }}">{{ item.name }}</a>
</li>
<!--
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
-->
{% endfor %}
</ul>
</div>
<a class="navbar-brand" href="/">Online Shop</a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
{% for item in menu_items %}
{% if item.name %}
{% if item.url %}
<li class="nav-item {% if item.active %}active{% endif %}"><a
class="nav-link" href="{{ item.url }}"> {{ item.name }}
</a></li>
{% elseif item.toArray %}
<li class="nav-item dropdown"><a
class="nav-link dropdown-toggle" href="#" id="navbarDropdown"
role="button" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false"> {{ item.name }}
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
{%for link in item %}
<a class="dropdown-item {% if link.active %}active{% endif %}" href="{{ link.url }}">{{ link.name }}</a>
{% endfor %}
</div></li>
{% endif %}
{% endif %}
{% endfor %}
</ul>
</div>
</nav>

View File

@@ -1,17 +1,6 @@
{% extends 'frames/default.html.twig' %}
{% block title %}product overview{% endblock %}
{% block content %}
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
filter by color:
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
{% for color in colors %}
<a class="dropdown-item" href="{{ color.getUrl }}">{{ color.getName }}</a>
{% endfor %}
</div>
</div>
<hr />
<div class="card-columns">
{% for product in products %}
<div class="card" style="width: 18rem;">