better integration of filters

resources/views/Shop/Tags/partials/filter.blade.php

@@ -1,10 +1,13 @@
-<div class="row">
+<aside class="main-sidebar float-left d-none" id="sidebar" style="width: 300px;">
+    <section class="sidebar" style="height: auto;">
+
+        <div class="row">
             <div class="col-12">
                 @include('components.form.button', ['id' => 'reset_filters', 'txt' => 'Annuler les filtres', 'class' => 'btn-success w-100'])
             </div>
-</div>
+        </div>
 
-@foreach ($tags as $group)
+        @foreach ($tags as $group)
             <h5>{{ $group['name'] }}</h5>
             @foreach ($group['tags'] as $tag)
                 <div>
@@ -15,4 +18,15 @@
                     {{ $tag['name'] }} ({{ $tag['count'] }})
                 </div>
             @endforeach
-@endforeach
+        @endforeach
+    
+    </section>
+</aside>
+
+@push('js')
+    <script>
+        $('#filters').click(function() {
+            $('#sidebar').toggleClass('d-none');
+        })
+    </script>
+@endpush

resources/views/Shop/layout/partials/category_add.blade.php

@@ -1,12 +1,13 @@
 <div class="row">
 	<div class="col-6">
 		<button type="button" class="btn btn-success">
-			<i class="fa fa-seedling"></i>
+			<i class="fa fa-2x fa-seedling"></i>
 			Ajouter au panier la liste des <strong>semences</strong>
 		</button>
 	</div>
 	<div class="col-6">
 		<button type="button" class="btn btn-warning">
+			<i class="fab fa-2x fa-pagelines"></i>
 			Ajouter au panier la liste des <strong>plants</strong>
 		</button>
 	</div>

resources/views/Shop/layout/partials/header-nav.blade.php

@@ -2,6 +2,7 @@
 
 	<div class="col-4 col-md-2 form-inline pl-4">
 		<a href="/"><img src="/img/logo.jpg" class="img-responvive pull-left"></a>
+		<a id="filters" href="#" class="text-white pl-3"><i class="fa fa-2x fa-bars"></i></a>
 	</div>
 
 	<div class="col-8 col-md-6 form-inline">	

resources/views/Shop/shelve.blade.php

@@ -3,11 +3,8 @@
 ])
 
 @section('content')
-	<div class="row">
-		<div class="col-3 col-lg-2">
 	@include('Shop.Tags.partials.filter')
-		</div>
-		<div class="col-9 col-lg-10">
+	
 	<div class="row">
 		<div class="col-8">
 			<h1 style="font-size: 2em;">{{ $category['name'] }}</h1>
@@ -22,6 +19,4 @@
 	@else
 		@include('Shop.layout.partials.category_articles')
 	@endif
-		</div>
-	</div>
 @endsection

resources/views/load/layout/sidebar.blade.php

@@ -0,0 +1,20 @@
+@if(!defined('LOAD_SIDEBAR'))
+	@push('scripts')
+
+		<script type="text/javascript" src="/assets/plugins/sidr/jquery.sidr.min.js"></script>
+
+		<script>
+			function initSidebar(sel) {
+				var selector = (typeof(sel) == 'undefined') ? '#sidebar' : sel;
+				$(selector).sidr();
+			}
+		</script>
+
+	@endpush
+
+	@push('css')
+		<link rel="stylesheet" href="/assets/plugins/sidr/stylesheets/jquery.sidr.light.min.css">  
+	@endpush
+
+	@php(define('LOAD_SIDEBAR', true))
+@endif