better integration of filters

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

@@ -1,18 +1,32 @@
-<div class="row">
+<aside class="main-sidebar float-left d-none" id="sidebar" style="width: 300px;">
-    <div class="col-12">
+    <section class="sidebar" style="height: auto;">
-        @include('components.form.button', ['id' => 'reset_filters', 'txt' => 'Annuler les filtres', 'class' => 'btn-success w-100'])
-    </div>
-</div>
 
-@foreach ($tags as $group)
+        <div class="row">
-    <h5>{{ $group['name'] }}</h5>
+            <div class="col-12">
-    @foreach ($group['tags'] as $tag)
+                @include('components.form.button', ['id' => 'reset_filters', 'txt' => 'Annuler les filtres', 'class' => 'btn-success w-100'])
-        <div>
+            </div>
-            @include('components.form.checkbox', [
-                'name' => 'tag[]',
-                'val' => $tag['id'],
-            ])
-            {{ $tag['name'] }} ({{ $tag['count'] }})
         </div>
-    @endforeach
+
-@endforeach
+        @foreach ($tags as $group)
+            <h5>{{ $group['name'] }}</h5>
+            @foreach ($group['tags'] as $tag)
+                <div>
+                    @include('components.form.checkbox', [
+                        'name' => 'tag[]',
+                        'val' => $tag['id'],
+                    ])
+                    {{ $tag['name'] }} ({{ $tag['count'] }})
+                </div>
+            @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,25 +3,20 @@
 ])
 
 @section('content')
+	@include('Shop.Tags.partials.filter')
+	
 	<div class="row">
-		<div class="col-3 col-lg-2">
+		<div class="col-8">
-			@include('Shop.Tags.partials.filter')
+			<h1 style="font-size: 2em;">{{ $category['name'] }}</h1>
+			<h3 style="font-size: 1.2em;">{!! $category['description'] !!}</h3>
 		</div>
-		<div class="col-9 col-lg-10">
+		<div class="col-4">
-			<div class="row">
+			@include('Shop.layout.partials.category_add')					
-				<div class="col-8">
-					<h1 style="font-size: 2em;">{{ $category['name'] }}</h1>
-					<h3 style="font-size: 1.2em;">{!! $category['description'] !!}</h3>
-				</div>
-				<div class="col-4">
-					@include('Shop.layout.partials.category_add')					
-				</div>
-			</div>
-			@if ($display_by_rows ?? false)
-				@include('Shop.layout.partials.category_articles_rows')
-			@else
-				@include('Shop.layout.partials.category_articles')
-			@endif
 		</div>
 	</div>
+	@if ($display_by_rows ?? false)
+		@include('Shop.layout.partials.category_articles_rows')
+	@else
+		@include('Shop.layout.partials.category_articles')
+	@endif
 @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