🎨 Compatible grands écrans

source/components/pages/Header.css

@@ -1,3 +1,33 @@
+
+@media screen and (max-width:860px) {
+	nav:not(.bm-item-list) > a {
+		display: none;
+	}
+	nav > a  {
+		display: block;
+	}
+}
+@media screen and (min-width:860px) {
+	nav > div {
+		display: none;
+	}
+	nav {
+		position: absolute;
+		right: 1em;
+		top: 4.5em;
+		font-size: 90%;
+	}
+	nav > a {
+		display: inline;
+		margin: .6em;
+	}
+	nav > a > i {
+		margin: 0 .3em;
+		font-size: 120% !important;
+	}
+}
+
+
 /* Position and sizing of burger button */
 .bm-burger-button {
 	position: fixed;

source/components/pages/Header.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react'
 import { slide as Menu } from 'react-burger-menu'
-import 'Components/pages/Menu.css'
+import 'Components/pages/Header.css'
 import { Link } from 'react-router-dom'
 
 export default class Header extends Component {
@@ -14,24 +14,32 @@ export default class Header extends Component {
 						alt="Un service de l'État français"
 					/>
 				</Link>
-				<Menu right>
-					<Link className="menu-item" to="/">
-						Accueil
-					</Link>
-					<Link className="menu-item" to="/à-propos">
-						À propos
-					</Link>
-					<Link className="menu-item" to="/intégrer">
-						Intégrer le module
-					</Link>
-					<Link className="menu-item" to="/contribuer">
-						Contribuer
-					</Link>
-					<Link className="menu-item" to="/regles">
-						Toutes nos règles
-					</Link>
-				</Menu>
+				<nav>
+					<Menu right>
+						<Links />
+					</Menu>
+					{/* Et maintenant le menu pour grand écran, activé en CSS */}
+					<Links />
+				</nav>
 			</div>
 		)
 	}
 }
+
+let Links = () => <>
+	<Link className="menu-item" to="/">
+		<i className="fa fa-home" aria-hidden="true"></i>
+	</Link>
+	<Link className="menu-item" to="/intégrer">
+		<em>Intégrer le module</em>
+	</Link>
+	<Link className="menu-item" to="/contribuer">
+		Contribuer
+	</Link>
+	<Link className="menu-item" to="/regles">
+		Toutes nos règles
+	</Link>
+	<Link className="menu-item" to="/à-propos">
+		À propos
+	</Link>
+</>

source/components/pages/Pages.css

@@ -1,7 +1,8 @@
 
 .page {
   max-width: 45em;
-  margin: 2em;
+  margin: 2em auto;
+  padding: 0 2em;
   font-size: 130%;
 }