Merge pull request #10 from nguyenk/addColorShemes

Add Color schemes support

Author: Marc TEYSSIER

src/Mouf/Html/Template/Menus/BootstrapNavBar.php

@@ -46,12 +46,28 @@ class BootstrapNavBar implements HtmlElementInterface
     public $titleLink = "";
 
     /**
-     * If checked, the navbar will be rendered in dark shades instead of bright shades.
+     * If checked, the navbar will be rendered in dark shades instead of bright shades. This is a shorthand for setting either :
+     *  - navbar-dark bg-dark (TRUE)
+     *  - navbar-light bg-light (FALSE)
      *
      * @var boolean
      */
     public $inverted;
 
+    /**
+     * The mode of the Nav Bar : can be one of 'dark' or 'light'. This mainly will apply nav-bar-$mode class for inner items color.
+     * @Property
+     * @var string
+     */
+    private $mode;
+
+    /**
+     * The background of the Nav Bar : can be one of 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark', 'white', 'transparent'.
+     * @Property
+     * @var string
+     */
+    private $background;
+
     /**
      * Display the menu with the maximum width<br />
      * If the parameter fixed is set, this is not used
@@ -80,4 +96,38 @@ public function __construct($children = array())
     {
         $this->children = $children;
     }
+
+    /**
+     * @return string
+     */
+    public function getMode(): string
+    {
+        return $this->mode ?? ($this->inverted ? 'dark' : 'light');
+    }
+
+    /**
+     * @param string $mode
+     */
+    public function setMode(string $mode): void
+    {
+        $this->mode = $mode;
+    }
+
+    /**
+     * @return string
+     */
+    public function getBackground(): string
+    {
+        return $this->background ?? ($this->inverted ? 'dark' : 'light');
+    }
+
+    /**
+     * @param string $background
+     */
+    public function setBackground(string $background): void
+    {
+        $this->background = $background;
+    }
+
+
 }

src/templates/Mouf/Html/Template/Menus/BootstrapNavBar.twig

@@ -1,7 +1,7 @@
 {% if not this.allWidth %}
 <div class="container">
 {% endif %}
-	<nav class="navbar navbar-expand-lg {{ this.inverted?'navbar-dark bg-dark':'navbar-light bg-light' }} {% if this.allWidth %}navbar-static-top{% endif %} {{ this.fixed?('fixed-'~this.fixed):'' }}" role="navigation">
+	<nav class="navbar navbar-expand-lg navbar-{{ this.mode }} bg-{{ this.background }}" {% if this.allWidth %}navbar-static-top{% endif %} {{ this.fixed?('fixed-'~this.fixed):'' }}" role="navigation">
 		{% if this.allWidth %}
 			<div class="container">
 		{% endif %}