[IMP] website: allow selecting navbar's font

Same as it was done before for buttons, this commit adds an option in
the theme customize dialog to allow selecting the font for the navbar
elements.

Needed for themes migration.

7 files changed, 35 insertions, 22 deletions

diff --git a/addons/website/static/src/scss/options/fonts/option_font_navbar_02_variables.scss b/addons/website/static/src/scss/options/fonts/option_font_navbar_02_variables.scss
new file mode 100644
index 00000000000..45d8014b8eb
--- /dev/null
+++ b/addons/website/static/src/scss/options/fonts/option_font_navbar_02_variables.scss
@@ -0,0 +1 @@
+$o-theme-navbar-font-number: 2;
diff --git a/addons/website/static/src/scss/options/fonts/option_font_navbar_03_variables.scss b/addons/website/static/src/scss/options/fonts/option_font_navbar_03_variables.scss
new file mode 100644
index 00000000000..c46c2de1180
--- /dev/null
+++ b/addons/website/static/src/scss/options/fonts/option_font_navbar_03_variables.scss
@@ -0,0 +1 @@
+$o-theme-navbar-font-number: 3;
diff --git a/addons/website/static/src/scss/options/fonts/option_font_navbar_04_variables.scss b/addons/website/static/src/scss/options/fonts/option_font_navbar_04_variables.scss
new file mode 100644
index 00000000000..69662acc773
--- /dev/null
+++ b/addons/website/static/src/scss/options/fonts/option_font_navbar_04_variables.scss
@@ -0,0 +1 @@
+$o-theme-navbar-font-number: 4;
diff --git a/addons/website/static/src/scss/options/fonts/option_font_navbar_05_variables.scss b/addons/website/static/src/scss/options/fonts/option_font_navbar_05_variables.scss
new file mode 100644
index 00000000000..c96837086b5
--- /dev/null
+++ b/addons/website/static/src/scss/options/fonts/option_font_navbar_05_variables.scss
@@ -0,0 +1 @@
+$o-theme-navbar-font-number: 5;
diff --git a/addons/website/static/src/scss/options/fonts/option_font_navbar_06_variables.scss b/addons/website/static/src/scss/options/fonts/option_font_navbar_06_variables.scss
new file mode 100644
index 00000000000..49ef9f8167c
--- /dev/null
+++ b/addons/website/static/src/scss/options/fonts/option_font_navbar_06_variables.scss
@@ -0,0 +1 @@
+$o-theme-navbar-font-number: 6;
diff --git a/addons/website/static/src/scss/primary_variables.scss b/addons/website/static/src/scss/primary_variables.scss
index 86c42c2bab1..fb8059b6382 100644
--- a/addons/website/static/src/scss/primary_variables.scss
+++ b/addons/website/static/src/scss/primary_variables.scss
@@ -61,3 +61,4 @@ $o-theme-font-names: (
 $o-theme-font-number: 1 !default;
 $o-theme-headings-font-number: 1 !default;
 $o-theme-buttons-font-number: 1 !default;
+$o-theme-navbar-font-number: 1 !default;
diff --git a/addons/website/static/src/scss/website.scss b/addons/website/static/src/scss/website.scss
index fba54ae9a91..4322adabcad 100644
--- a/addons/website/static/src/scss/website.scss
+++ b/addons/website/static/src/scss/website.scss
@@ -2,20 +2,20 @@
 /// This file regroups the website design rules.
 ///
 
-$-theme-font: nth($o-theme-font-urls, $o-theme-font-number);
-@if $-theme-font {
-    @import url("https://fonts.googleapis.com/css?family=#{unquote($-theme-font)}");
-}
-@if $o-theme-headings-font-number != $o-theme-font-number {
-    $-theme-font: nth($o-theme-font-urls, $o-theme-headings-font-number);
-    @if $-theme-font {
-        @import url("https://fonts.googleapis.com/css?family=#{unquote($-theme-font)}");
-    }
-}
-@if $o-theme-buttons-font-number != $o-theme-font-number and $o-theme-buttons-font-number != $o-theme-headings-font-number {
-    $-theme-font: nth($o-theme-font-urls, $o-theme-buttons-font-number);
-    @if $-theme-font {
-        @import url("https://fonts.googleapis.com/css?family=#{unquote($-theme-font)}");
+$-seen: ();
+$-font-numbers: (
+    $o-theme-font-number,
+    $o-theme-headings-font-number,
+    $o-theme-buttons-font-number,
+    $o-theme-navbar-font-number
+);
+@each $-number in $-font-numbers {
+    @if index($-seen, $-number) == null {
+        $-seen: append($-seen, $-number);
+        $-theme-font: nth($o-theme-font-urls, $-number);
+        @if $-theme-font {
+            @import url("https://fonts.googleapis.com/css?family=#{unquote($-theme-font)}");
+        }
     }
 }
 
@@ -32,14 +32,9 @@ $-theme-font: nth($o-theme-font-urls, $o-theme-font-number);
     }
 }
 
-.navbar-light {
-    // Style only navbar-light which Odoo is only supposed to use in standard
-    // anyway. Automatically mimic navbar-dark if the user's menu color is dark.
-    // Note: this only works because navbar-light is defined before navbar-dark,
-    // we may want to use a safest way when possible.
-    background-color: color('menu') !important;
-    @if (color-yiq(color('menu')) != $yiq-text-dark) {
-        @extend .navbar-dark;
+.navbar {
+    @if ($o-theme-navbar-font-number != $o-theme-font-number) {
+        font-family: nth($o-theme-fonts, $o-theme-navbar-font-number);
     }
 
     .nav-item {
@@ -51,6 +46,18 @@ $-theme-font: nth($o-theme-font-urls, $o-theme-font-number);
         opacity: 0 !important;
     }
 }
+
+.navbar-light {
+    // Style only navbar-light which Odoo is only supposed to use in standard
+    // anyway. Automatically mimic navbar-dark if the user's menu color is dark.
+    // Note: this only works because navbar-light is defined before navbar-dark,
+    // we may want to use a safest way when possible.
+    background-color: color('menu') !important;
+    @if (color-yiq(color('menu')) != $yiq-text-dark) {
+        @extend .navbar-dark;
+    }
+}
+
 .o_footer {
     @include o-bg-color(color('footer'));