webpack config + starting header

assets/app/frontend/scss/_header.scss

+#menu {
+  .navbar-toggler {
+    background-color: $yellow;
+  }
+
+  .space_colla {
+    color: $yellow;
+  }
+}

assets/app/frontend/scss/screen.scss

 $dir-fonts: '/public/assets/fonts/';
 $dir-img: '/public/assets/img/';
 
-$yellow: #00b1b2;
+$yellow: #fce767;
 $red: #e73452;
 $orange: #ffcc00;
 $blue: #17428c;
 
 @import "_base.scss";
-//@import "_home.scss";
-//@import "_legal_mention.scss";
-//@import "_responsive.scss";
+@import "_home.scss";
+@import "_header.scss";
+@import "_responsive.scss";
 
 @font-face {
   font-family: 'dinregular';
-  src: url($dir-fonts+ 'din_regular-webfont.eot');
-  src: url($dir-fonts+ 'din_regular-webfont.eot?#iefix') format('embedded-opentype'),
-url($dir-fonts+'din_regular-webfont.woff2') format('woff2'),
-url($dir-fonts+'din_regular-webfont.woff') format('woff'),
-url($dir-fonts+'din_regular-webfont.ttf') format('truetype'),
-url($dir-fonts+'din_regular-webfont.svg#dinregular') format('svg');
+  src: url($dir-fonts + 'din_regular-webfont.eot');
+  src: url($dir-fonts + 'din_regular-webfont.eot?#iefix') format('embedded-opentype'),
+  url($dir-fonts +'din_regular-webfont.woff2') format('woff2'),
+  url($dir-fonts +'din_regular-webfont.woff') format('woff'),
+  url($dir-fonts +'din_regular-webfont.ttf') format('truetype'),
+  url($dir-fonts +'din_regular-webfont.svg#dinregular') format('svg');
   font-weight: normal;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'dinbold';
-  src: url($dir-fonts+ 'din_bold-webfont.eot');
-  src: url($dir-fonts+ 'din_bold-webfont.eot?#iefix') format('embedded-opentype'),
-url($dir-fonts+'din_bold-webfont.woff2') format('woff2'),
-url($dir-fonts+'din_bold-webfont.woff') format('woff'),
-url($dir-fonts+'din_bold-webfont.ttf') format('truetype'),
-url($dir-fonts+'din_bold-webfont.svg#dinregular') format('svg');
+  src: url($dir-fonts + 'din_bold-webfont.eot');
+  src: url($dir-fonts + 'din_bold-webfont.eot?#iefix') format('embedded-opentype'),
+  url($dir-fonts +'din_bold-webfont.woff2') format('woff2'),
+  url($dir-fonts +'din_bold-webfont.woff') format('woff'),
+  url($dir-fonts +'din_bold-webfont.ttf') format('truetype'),
+  url($dir-fonts +'din_bold-webfont.svg#dinregular') format('svg');
   font-weight: normal;
   font-style: normal;
 }

public/build/manifest.json

   "build/fonts/fa-brands-400.ttf": "/build/fonts/fa-brands-400.9e138496.ttf",
   "build/fonts/fa-solid-900.woff": "/build/fonts/fa-solid-900.c6ec0800.woff",
   "build/fonts/fa-brands-400.woff": "/build/fonts/fa-brands-400.329a95a9.woff",
-  "build/fonts/fa-solid-900.woff2": "/build/fonts/fa-solid-900.ada6e6df.woff2",
-  "build/fonts/fa-brands-400.woff2": "/build/fonts/fa-brands-400.c1210e5e.woff2",
-  "build/fonts/fa-regular-400.eot": "/build/fonts/fa-regular-400.4079ae2d.eot",
-  "build/fonts/fa-regular-400.ttf": "/build/fonts/fa-regular-400.1017bce8.ttf",
-  "build/fonts/fa-regular-400.woff": "/build/fonts/fa-regular-400.36722648.woff",
-  "build/fonts/fa-regular-400.woff2": "/build/fonts/fa-regular-400.68c5af1f.woff2",
   "build/images/din_regular-webfont.svg": "/build/images/din_regular-webfont.2b8b9fcb.svg",
   "build/images/din_bold-webfont.svg": "/build/images/din_bold-webfont.96d11644.svg",
+  "build/fonts/fa-solid-900.woff2": "/build/fonts/fa-solid-900.ada6e6df.woff2",
+  "build/fonts/fa-brands-400.woff2": "/build/fonts/fa-brands-400.c1210e5e.woff2",
   "build/fonts/din_bold-webfont.ttf": "/build/fonts/din_bold-webfont.cc0fc47b.ttf",
   "build/fonts/din_regular-webfont.ttf": "/build/fonts/din_regular-webfont.4f443b4f.ttf",
+  "build/fonts/fa-regular-400.eot": "/build/fonts/fa-regular-400.4079ae2d.eot",
+  "build/fonts/fa-regular-400.ttf": "/build/fonts/fa-regular-400.1017bce8.ttf",
   "build/fonts/din_bold-webfont.woff": "/build/fonts/din_bold-webfont.d29b407c.woff",
   "build/fonts/din_regular-webfont.woff": "/build/fonts/din_regular-webfont.f050b05a.woff",
   "build/fonts/din_bold-webfont.eot": "/build/fonts/din_bold-webfont.a881c3ba.eot",
   "build/fonts/din_regular-webfont.eot": "/build/fonts/din_regular-webfont.1e214d9f.eot",
   "build/fonts/din_bold-webfont.woff2": "/build/fonts/din_bold-webfont.b5ef5f28.woff2",
+  "build/fonts/fa-regular-400.woff": "/build/fonts/fa-regular-400.36722648.woff",
   "build/fonts/din_regular-webfont.woff2": "/build/fonts/din_regular-webfont.b4ef15d4.woff2",
-  "build/images/laclic.png": "/build/images/laclic.c0dc02d5.png"
+  "build/fonts/fa-regular-400.woff2": "/build/fonts/fa-regular-400.68c5af1f.woff2"
 }

src/Twig/FrontendTwigExtension.php

-<?php
-
-namespace App\Twig;
-
-use Symfony\Component\HttpKernel\KernelInterface;
-use Twig\Extension\AbstractExtension;
-use Twig\TwigFilter;
-
-class FrontendTwigExtension extends AbstractExtension
-{
-    protected $kernel;
-
-    public function __construct(KernelInterface $kernel)
-    {
-        $this->kernel = $kernel;
-    }
-
-
-    public function getFilters()
-    {
-        return [
-            new TwigFilter('asset_version', [$this, 'assetVersion']),
-        ];
-    }
-
-    public function assetVersion($file)
-    {
-        $cacheTime = filemtime($this->kernel->getProjectDir() . '/public' . $file);
-        if ($cacheTime) {
-            return $file . '?c=' . $cacheTime;
-        } else {
-            return $file . "?c=0";
-        }
-    }
-
-}

templates/frontend/header.html.twig

+<div id="menu" class="fixed-top">
+    <div class="collapse" id="navbarToggleExternalContent">
+        <div class="p-4">
+            <h5 class="text-white h4">Collapsed content</h5>
+            <span class="text-muted">Toggleable via the navbar brand.</span>
+        </div>
+    </div>
+    <nav class="navbar">
+        <a class="navbar-brand" href="#">
+            <img src="{{ 'assets/img/Logo-Aux-Actes-Citoyens.jpg' }}" width="200" alt="">
+        </a>
+        <a class="participate" href="">
+            Participer
+        </a>
+        <a class="space_colla" href="">
+            Espace collaboratif
+        </a>
+        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+    </nav>
+</div>

templates/frontend/home.html.twig

 {% endblock %}
 
 {% block body %}
-    <div class="alert alert-primary" role="alert">
-        This is a primary alert—check it out!
-    </div>
-    <h1>TEST rzepoigujeàrojgeoirgjêorjg</h1>
-
-    <!-- Button trigger modal -->
-    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
-        Launch demo modal
-    </button>
+    <div class="container">
 
-    <!-- Modal -->
-    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
-        <div class="modal-dialog" role="document">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
-                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                        <span aria-hidden="true">&times;</span>
-                    </button>
-                </div>
-                <div class="modal-body">
-                    ...
-                </div>
-                <div class="modal-footer">
-                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-                    <button type="button" class="btn btn-primary">Save changes</button>
-                </div>
-            </div>
-        </div>
+    </div>
 {% endblock %}