svg

assets/app.js

@@ -1,9 +1,9 @@
+// Stimulus
 import './bootstrap.js';
 
 // jQuery
 import $ from 'jquery';
 window.$ = $;
-window.jQuery = $;
 
 // Bootstrap
 import 'bootstrap'
@@ -13,9 +13,11 @@ import 'bootstrap/dist/css/bootstrap.min.css';
 import '@fortawesome/fontawesome-free'
 import '@fortawesome/fontawesome-free/css/all.min.css';
 
+// Datatable
+import 'datatables.net';
+import 'datatables.net-dt/css/jquery.dataTables.css';
+
 // Local CSS
 import './styles/bootswatch.min.css'
 import './styles/app.css';
 
-
-console.log('This log comes from assets/app.js - welcome to AssetMapper! 🎉');

assets/datatables.init.js

@@ -0,0 +1,30 @@
+$(document).ready(function() {
+    $.extend( $.fn.dataTable.defaults, {
+        responsive: true,
+        "iDisplayLength": 1000,
+		"oLanguage": { 
+            "sThousands": " ",
+            "sProcessing":     "Traitement en cours...",
+            "sSearch":         "Rechercher :",
+            "sLengthMenu":     "Afficher _MENU_ éléments",
+            "sInfo":           "Affichage de l'élement _START_ à _END_ sur _TOTAL_ éléments",
+            "sInfoEmpty":      "Affichage de l'élement 0 à 0 sur 0 éléments",
+            "sInfoFiltered":   "(filtré de _MAX_ éléments au total)",
+            "sInfoPostFix":    "",
+            "sLoadingRecords": "Chargement en cours...",
+            "sZeroRecords":    "Aucun élément à afficher",
+            "sEmptyTable":     "Aucune donnée disponible dans le tableau",
+            "oPaginate": {
+                "sFirst":      "Premier",
+                "sPrevious":   "Précédent",
+                "sNext":       "Suivant",
+                "sLast":       "Dernier"
+            },
+            "oAria": {
+                "sSortAscending":  ": activer pour trier la colonne par ordre croissant",
+                "sSortDescending": ": activer pour trier la colonne par ordre décroissant"
+            }		
+		 },
+		//"stateSave": true
+    });
+});

assets/jquery.js

@@ -0,0 +1,2 @@
+import $ from 'jquery';
+window.$ = window.jQuery = $;

assets/styles/app.css

@@ -1,10 +1,78 @@
+html,
+body {
+    height: 100%
+}
 
-.navbar-brand img  {
-    width:40px;
-    margin-right:10px;
+body {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+}
+
+.form-group {
+    margin-bottom: 5px;
+}
+
+.navbar-brand img {
+    width: 40px;
+    margin-right: 10px;
 }
 
 .navbar-toggler {
     border: none;
     box-shadow: none !important;
+}
+
+main {
+    display: flex;
+    flex-grow: 1;
+    align-items: stretch;
+}
+
+sidebar {
+    width: 300px;
+    padding: 15px;
+    background-color: rgba(var(--bs-dark-rgb));
+    display: flex;
+    flex-direction: column;
+}
+
+sidebar div {
+    display: flex;
+    flex-direction: column;
+    border-bottom: 1px solid var(--bs-body-color);
+    padding-bottom: 10px;
+}
+
+sidebar a {
+    text-decoration: none;
+    color: var(--bs-body-color);
+    ;
+    opacity: 0.6;
+    margin: 5px 0px;
+}
+
+sidebar a:hover {
+    text-decoration: none;
+    opacity: 1;
+}
+
+content {
+    flex-grow: 1;
+    align-items: stretch;
+    padding: 15px;
+}
+
+@media (max-width: 991px) {
+    sidebar {
+        width: 70px;
+    }
+
+    sidebar i {
+        font-size: 200%;
+    }
+
+    sidebar span {
+        display: none;
+    }
 }