Intégration Souke

producer/views/layouts/main.php

                 'items' => [
                     [
                         'url' => $this->getUrlManagerProducer()->createUrl(['site/index']),
-                        'label' => '<i class="bi bi-house-door"></i>',
+                        'label' => '<i class="bi bi-house-door"></i> <span class="hide-desktop"> Accueil</span>',
                         'active' => $isHome,
                     ],
                     [

producer/web/css/screen.css

   -moz-border-radius: 15px;
   -webkit-border-radius: 15px;
   border-radius: 15px;
-  padding: 4px 10px 3px 10px;
+  padding: 5px 10px 2px 10px;
   margin-left: 3px;
   font-size: 0.8em;
   line-height: 0.8em;
   text-transform: uppercase;
   border: solid 1px transparent;
 }
-/* line 253, ../sass/_layout.scss */
+/* line 252, ../sass/_layout.scss */
+#header nav#main-nav ul li a .hide-desktop {
+  display: none;
+}
+/* line 257, ../sass/_layout.scss */
 #header nav#main-nav ul li a.active,
 #header nav#main-nav ul li a:hover {
   color: white;
   -webkit-box-shadow: none;
   box-shadow: none;
 }
-/* line 258, ../sass/_layout.scss */
+/* line 262, ../sass/_layout.scss */
 #header nav#main-nav ul li a.active span.label-success,
 #header nav#main-nav ul li a:hover span.label-success {
   border: solid 1px white !important;
 }
-/* line 264, ../sass/_layout.scss */
+/* line 268, ../sass/_layout.scss */
 #header nav#main-nav ul.submenu {
   background-color: white;
 }
-/* line 268, ../sass/_layout.scss */
+/* line 272, ../sass/_layout.scss */
 #header nav#main-nav ul.submenu li a {
   background-color: white;
   font-size: 0.9em;
   box-shadow: none;
   border-bottom: solid 2px #f4efe8;
 }
-/* line 274, ../sass/_layout.scss */
+/* line 278, ../sass/_layout.scss */
 #header nav#main-nav ul.submenu li a span.label {
   background-color: white;
   border: solid 1px #b7ab9b;
   color: #b7ab9b;
 }
-/* line 281, ../sass/_layout.scss */
+/* line 285, ../sass/_layout.scss */
 #header nav#main-nav ul.submenu li a.active,
 #header nav#main-nav ul.submenu li a:hover {
   color: black;
   background-color: white;
   border-bottom: solid 2px #b7ab9b !important;
 }
-/* line 291, ../sass/_layout.scss */
+/* line 295, ../sass/_layout.scss */
 #header nav#main-nav #user {
   color: #ee6f42;
   float: right;
   padding: 10px;
 }
 
-/* line 299, ../sass/_layout.scss */
+/* line 303, ../sass/_layout.scss */
 #main {
   padding: 0px;
   padding-top: 38px;
   margin-bottom: 50px;
   background-color: white;
 }
-/* line 305, ../sass/_layout.scss */
+/* line 309, ../sass/_layout.scss */
 #main #banner {
   height: 180px;
   overflow: hidden;
   background-size: cover;
   background-position: center;
 }
-/* line 313, ../sass/_layout.scss */
+/* line 317, ../sass/_layout.scss */
 #main #infos-producer {
   display: none;
   padding: 5px 10px;
   border-bottom: solid 1px #e0e0e0;
   color: gray;
 }
-/* line 322, ../sass/_layout.scss */
+/* line 326, ../sass/_layout.scss */
 #main #infos-producer strong {
   font-weight: bold;
 }
-/* line 326, ../sass/_layout.scss */
+/* line 330, ../sass/_layout.scss */
 #main #infos-producer .favorite {
   float: right;
   color: gray;
 }
-/* line 329, ../sass/_layout.scss */
+/* line 333, ../sass/_layout.scss */
 #main #infos-producer .favorite a {
   color: black;
 }
-/* line 335, ../sass/_layout.scss */
+/* line 339, ../sass/_layout.scss */
 #main h2#page-title {
   margin-top: 0px;
   font-family: "worksans_bold";
   font-size: 30px;
   line-height: 40px;
 }
-/* line 346, ../sass/_layout.scss */
+/* line 350, ../sass/_layout.scss */
 #main #content {
   padding: 40px;
   min-height: 300px;
 }
-/* line 350, ../sass/_layout.scss */
+/* line 354, ../sass/_layout.scss */
 #main #content h1, #main #content h2, #main #content h3, #main #content h4, #main #content h5, #main #content h6 {
   font-family: "worksans_bold";
   margin-bottom: 20px;
   color: black;
 }
-/* line 355, ../sass/_layout.scss */
+/* line 359, ../sass/_layout.scss */
 #main #content h1.first, #main #content h2.first, #main #content h3.first, #main #content h4.first, #main #content h5.first, #main #content h6.first {
   margin-top: 0px;
 }
-/* line 360, ../sass/_layout.scss */
+/* line 364, ../sass/_layout.scss */
 #main #content h1 {
   font-size: 30px;
 }
-/* line 364, ../sass/_layout.scss */
+/* line 368, ../sass/_layout.scss */
 #main #content h2 {
   font-size: 25px;
 }
-/* line 368, ../sass/_layout.scss */
+/* line 372, ../sass/_layout.scss */
 #main #content h3 {
   font-size: 1.4em;
   text-align: left;
   margin-bottom: 30px;
 }
-/* line 373, ../sass/_layout.scss */
+/* line 377, ../sass/_layout.scss */
 #main #content h3 span {
   padding-top: 14px;
   color: black;
 }
-/* line 379, ../sass/_layout.scss */
+/* line 383, ../sass/_layout.scss */
 #main #content h4 {
   font-size: 20px;
 }
-/* line 383, ../sass/_layout.scss */
+/* line 387, ../sass/_layout.scss */
 #main #content h5 {
   font-size: 18px;
 }
-/* line 387, ../sass/_layout.scss */
+/* line 391, ../sass/_layout.scss */
 #main #content h6 {
   font-size: 16px;
 }
-/* line 393, ../sass/_layout.scss */
+/* line 397, ../sass/_layout.scss */
 #main #content form .form-group .hint-block {
   color: gray;
 }
 
-/* line 401, ../sass/_layout.scss */
+/* line 405, ../sass/_layout.scss */
 #footer-producer {
   text-align: center;
   position: absolute;
   left: 0px;
   width: 100%;
 }
-/* line 408, ../sass/_layout.scss */
+/* line 412, ../sass/_layout.scss */
 #footer-producer a {
   color: #ee6f42;
 }
-/* line 410, ../sass/_layout.scss */
+/* line 414, ../sass/_layout.scss */
 #footer-producer a:active {
   text-decoration: underline;
 }
 
-/* line 416, ../sass/_layout.scss */
+/* line 420, ../sass/_layout.scss */
 #footer {
   display: none;
   height: 100px;
   float: right;
   text-align: center;
 }
-/* line 422, ../sass/_layout.scss */
+/* line 426, ../sass/_layout.scss */
 #footer .content {
   padding-top: 20px;
   color: black;
 }
-/* line 426, ../sass/_layout.scss */
+/* line 430, ../sass/_layout.scss */
 #footer .content a {
   color: black;
   font-size: 18px;
   padding-left: 10px;
   padding-right: 10px;
 }
-/* line 432, ../sass/_layout.scss */
+/* line 436, ../sass/_layout.scss */
 #footer .content a:hover {
   text-decoration: underline;
 }
-/* line 439, ../sass/_layout.scss */
+/* line 443, ../sass/_layout.scss */
 #footer #code-source img {
   height: 20px;
 }
   #main #header.without-logo #title {
     padding-top: 30px;
   }
+  /* line 81, ../sass/_responsive.scss */
+  #main #header nav#main-nav {
+    border-top-width: 2px;
+  }
   /* line 85, ../sass/_responsive.scss */
+  #main #header nav#main-nav ul li {
+    display: block;
+    width: 100%;
+  }
+  /* line 88, ../sass/_responsive.scss */
   #main #header nav#main-nav ul li a {
+    text-align: left;
+    display: block;
     border-bottom: solid 1px #ece4d8;
+    padding: 6px 10px;
+  }
+  /* line 94, ../sass/_responsive.scss */
+  #main #header nav#main-nav ul li a .label {
+    float: right;
+  }
+  /* line 98, ../sass/_responsive.scss */
+  #main #header nav#main-nav ul li a .hide-desktop {
+    display: inline-block;
   }
-  /* line 93, ../sass/_responsive.scss */
+  /* line 107, ../sass/_responsive.scss */
   #main #content {
     padding: 20px;
   }
-  /* line 97, ../sass/_responsive.scss */
+  /* line 111, ../sass/_responsive.scss */
   #main #content .table td {
     padding: 10px;
   }
-  /* line 103, ../sass/_responsive.scss */
+  /* line 117, ../sass/_responsive.scss */
   #main #content #block-infos .card {
     margin-bottom: 20px;
   }
-  /* line 109, ../sass/_responsive.scss */
+  /* line 123, ../sass/_responsive.scss */
   #main #bar-fixed {
     position: relative;
   }
-  /* line 111, ../sass/_responsive.scss */
+  /* line 125, ../sass/_responsive.scss */
   #main #bar-fixed .btn-comment {
     float: none;
     display: block;
     margin-top: 15px;
   }
 
-  /* line 121, ../sass/_responsive.scss */
+  /* line 135, ../sass/_responsive.scss */
   .order-create #main #content .order-form #products .table .input-group,
   .order-update #main #content .order-form #products .table .input-group {
     width: 60px;
   }
-  /* line 125, ../sass/_responsive.scss */
+  /* line 139, ../sass/_responsive.scss */
   .order-create #main #content .order-form #products .table .input-group .form-control,
   .order-update #main #content .order-form #products .table .input-group .form-control {
     width: 20px;
     padding: 3px;
   }
 
-  /* line 131, ../sass/_responsive.scss */
+  /* line 145, ../sass/_responsive.scss */
   .order-create #main #content .order-form #bar-fixed #checkbox-credit,
   .order-update #main #content .order-form #bar-fixed #checkbox-credit {
     width: 100%;
     margin: 0px;
     padding: 5px 0px;
   }
-  /* line 137, ../sass/_responsive.scss */
+  /* line 151, ../sass/_responsive.scss */
   .order-create #main #content .order-form #bar-fixed #checkbox-credit .the-credit,
   .order-update #main #content .order-form #bar-fixed #checkbox-credit .the-credit {
     word-break: break-all;
   }
 
-  /* line 142, ../sass/_responsive.scss */
+  /* line 156, ../sass/_responsive.scss */
   .order-create #main #content .order-form #bar-fixed #block-confirm-order button,
   .order-update #main #content .order-form #bar-fixed #block-confirm-order button {
     width: 100%;
   }
 
-  /* line 150, ../sass/_responsive.scss */
+  /* line 164, ../sass/_responsive.scss */
   .order-order #app-order-order h3 {
     line-height: 28px;
   }
-  /* line 156, ../sass/_responsive.scss */
+  /* line 170, ../sass/_responsive.scss */
   .order-order #app-order-order #distributions-list .card .btn-primary {
     display: block;
     float: none !important;
     margin-bottom: 10px;
   }
-  /* line 165, ../sass/_responsive.scss */
+  /* line 179, ../sass/_responsive.scss */
   .order-order #app-order-order #steps ul {
     height: auto !important;
   }
-  /* line 167, ../sass/_responsive.scss */
+  /* line 181, ../sass/_responsive.scss */
   .order-order #app-order-order #steps ul li {
     padding-left: 0px !important;
     padding-right: 0px !important;
   }
-  /* line 171, ../sass/_responsive.scss */
+  /* line 185, ../sass/_responsive.scss */
   .order-order #app-order-order #steps ul li .info-step {
     display: none;
   }
-  /* line 175, ../sass/_responsive.scss */
+  /* line 189, ../sass/_responsive.scss */
   .order-order #app-order-order #steps ul li .btn::after,
   .order-order #app-order-order #steps ul li .btn::before {
     display: none;
   }
-  /* line 184, ../sass/_responsive.scss */
+  /* line 198, ../sass/_responsive.scss */
   .order-order #app-order-order table#points-sale td.name .locality {
     display: block !important;
     color: gray;
     margin-bottom: 5px;
   }
-  /* line 190, ../sass/_responsive.scss */
+  /* line 204, ../sass/_responsive.scss */
   .order-order #app-order-order table#points-sale .column-locality {
     display: none;
   }
-  /* line 195, ../sass/_responsive.scss */
+  /* line 209, ../sass/_responsive.scss */
   .order-order #app-order-order table#products {
     width: 100%;
   }
-  /* line 197, ../sass/_responsive.scss */
+  /* line 211, ../sass/_responsive.scss */
   .order-order #app-order-order table#products tr {
     width: 100%;
     border-color: #b7ab9b !important;
   }
-  /* line 202, ../sass/_responsive.scss */
+  /* line 216, ../sass/_responsive.scss */
   .order-order #app-order-order table#products .badge-count-selected-products span {
     display: none;
   }
-  /* line 206, ../sass/_responsive.scss */
+  /* line 220, ../sass/_responsive.scss */
   .order-order #app-order-order table#products td.photo,
   .order-order #app-order-order table#products th.photo {
     display: none;
   }
-  /* line 211, ../sass/_responsive.scss */
+  /* line 225, ../sass/_responsive.scss */
   .order-order #app-order-order table#products td.name,
   .order-order #app-order-order table#products td.summary,
   .order-order #app-order-order table#products td.price-unit,
     display: block;
     width: 100% !important;
   }
-  /* line 220, ../sass/_responsive.scss */
+  /* line 234, ../sass/_responsive.scss */
   .order-order #app-order-order table#products td.td-quantity,
   .order-order #app-order-order table#products tr.product-open td.price-total {
     display: inline-block;
     width: 49% !important;
     border: 0px none !important;
   }
-  /* line 227, ../sass/_responsive.scss */
+  /* line 241, ../sass/_responsive.scss */
   .order-order #app-order-order table#products tr.product-open td.price-total {
     padding-top: 22px;
     font-size: 1.2rem;
     font-family: "worksans_bold";
   }
-  /* line 234, ../sass/_responsive.scss */
+  /* line 248, ../sass/_responsive.scss */
   .order-order #app-order-order table#products td.name,
   .order-order #app-order-order table#products td.price-unit,
   .order-order #app-order-order table#products td.td-quantity {
     border-color: #e0e0e0 !important;
   }
-  /* line 241, ../sass/_responsive.scss */
+  /* line 255, ../sass/_responsive.scss */
   .order-order #app-order-order table#products td.name .recipe {
     display: none;
   }
-  /* line 246, ../sass/_responsive.scss */
+  /* line 260, ../sass/_responsive.scss */
   .order-order #app-order-order table#products td.price-unit {
     text-align: left !important;
   }
-  /* line 250, ../sass/_responsive.scss */
+  /* line 264, ../sass/_responsive.scss */
   .order-order #app-order-order table#products tr.total td.price-total {
     padding-top: 0.5rem !important;
   }
-  /* line 257, ../sass/_responsive.scss */
+  /* line 271, ../sass/_responsive.scss */
   .order-order #app-order-order #order-success .alert .glyphicon-big {
     font-size: 90px;
     color: white;
     text-align: center;
     margin-bottom: 20px;
   }
-  /* line 266, ../sass/_responsive.scss */
+  /* line 280, ../sass/_responsive.scss */
   .order-order #app-order-order #order-success .alert div.content {
     margin-left: 0px;
     text-align: center;
   }
 
-  /* line 277, ../sass/_responsive.scss */
+  /* line 291, ../sass/_responsive.scss */
   #footer .content {
     text-align: center;
   }
 }
 @media screen and (max-width: 991px) {
-  /* line 289, ../sass/_responsive.scss */
+  /* line 303, ../sass/_responsive.scss */
   #main {
     padding-top: 0px;
   }

producer/web/sass/_layout.scss

                         color: white;
                         font-family: 'worksans_bold';
                         @include border-radius(15px);
-                        padding: 4px 10px 3px 10px;
+                        padding: 5px 10px 2px 10px;
                         margin-left: 3px;
                         font-size: 0.8em;
                         line-height: 0.8em;
                         text-transform: uppercase;
                         border: solid 1px transparent;
                     }
+
+                    .hide-desktop {
+                        display: none;
+                    }
                 }
 
                 a.active,

producer/web/sass/_responsive.scss

             }
 
             nav#main-nav {
+                border-top-width: 2px;
+
                 ul {
                     li {
-
+                        display: block;
+                        width: 100%;
                         a {
+                            text-align: left;
+                            display: block;
                             border-bottom: solid 1px $color-gray;
+                            padding: 6px 10px;
+
+                            .label {
+                                float: right;
+                            }
+
+                            .hide-desktop {
+                                display: inline-block;
+                            }
                         }
                     }
                 }