feat: add nav-marianne

SocialGouv · Aug 7, 2019 · f92e9f3 · f92e9f3
1 parent 73a5364
commit f92e9f3
Show file tree

Hide file tree

Showing 5 changed files with 87 additions and 1 deletion.
diff --git a/docs/content/developer/components/navbar.md b/docs/content/developer/components/navbar.md
@@ -8,7 +8,43 @@ toc: true
 
 {{< partial "callout-info-bootstrap-component.html" >}}
 
-<hr class="my-5">
+## Basique
+
+Le header traditionnel avec la Marianne en SVG (⚠️ 52Ko)
+
+{{< example >}}
+
+<nav class="navbar navbar-marianne navbar-expand-lg navbar-light bg-light">
+  <div class="marianne"></div>
+  <div  class="navbar-brand">
+    <a href="#">Nom du produit</a>
+    <div class="navbar-baseline" href="#">Un produit au service de l'usager</div>
+  </div>
+  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+    <span class="navbar-toggler-icon"></span>
+  </button>
+  <div id="navbarSupportedContent" class="navbar-collapse collapse">
+    <ul class="navbar-nav mr-auto"></ul>
+    <ul class="navbar-nav">
+        <li class="nav-item dropdown">
+            <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+              Menu
+            </a>
+            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
+                <a class="dropdown-item" href="#">Action</a>
+                <a class="dropdown-item" href="#">Another action</a>
+            </div>
+        </li>
+        <li class="nav-item">
+            <a class="nav-link" href="#">Connexion</a>
+        </li>
+        <li class="nav-item">
+            <a class="nav-link" href="#">Aide</a>
+        </li>
+    </ul>
+  </div>
+</nav>
+{{< /example >}}
 
 ## Overview
 

diff --git a/packages/core/images/marianne.svg b/packages/core/images/marianne.svg
diff --git a/packages/core/src/_variables.scss b/packages/core/src/_variables.scss
@@ -2,6 +2,7 @@
 
 // Fonts
 $sgb-font-path: "../fonts";
+$sgb-images-path: "../images";
 
 // Fonts
 // Linked to https://github.com/twbs/bootstrap/blob/v4.2.1/scss/_variables.scss#L273

diff --git a/packages/core/src/custom/_marianne.scss b/packages/core/src/custom/_marianne.scss
@@ -0,0 +1,24 @@
+.marianne {
+  width: 130px;
+  min-width: 130px;
+  max-width: 130px;
+  height: 65px;
+  background-color: white;
+  background-image: url($sgb-images-path+"/marianne.svg");
+  background-size: contain;
+  background-position: center center;
+  background-repeat: no-repeat;
+}
+
+.navbar.navbar-marianne {
+  padding: 0;
+}
+
+.navbar.navbar-marianne .navbar-brand {
+  font-size: 1.6em;
+  margin-left: 0.3em;
+}
+
+.navbar.navbar-marianne .navbar-baseline {
+  font-size: 0.6em;
+}
diff --git a/packages/core/src/socialgouv-bootstrap.scss b/packages/core/src/socialgouv-bootstrap.scss
@@ -5,6 +5,8 @@
 @import "variables";
 @import "bootstrap/scss/mixins";
 
+@import "custom/_marianne";
+
 //
 
 @import "fonts";