Updates to the navbar & 0.1.6 release.

thedodd · Oct 23, 2020 · 05acc44 · 05acc44
1 parent 8e6e905
commit 05acc44
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 23 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,12 @@ This changelog follows the patterns described here: https://keepachangelog.com/e
 
 ## Unreleased
 
+## 0.1.6
+### changed
+- Updates to the `Navbar` component:
+    - `navbrand`, `navstart`, `navend` are now all optional.
+    - a new `navburger: bool` property has been added. This bool controls whether or not a `navbar-burger` will be rendered inside of the navbar when being rendered within smaller viewports. This value defaults to `true`, maintaining backwards compatibility.
+
 ## 0.1.5
 ### fixed
 - Fixed a few of the button & button-like components to use the HTML `disabled` attribute instead of the Bulma `is-disabled` CSS class. The latter has been deprecated for some time.

diff --git a/Cargo.toml b/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "ybc"
-version = "0.1.5"
+version = "0.1.6"
 description = "A Yew component library based on the Bulma CSS framework."
 authors = ["Anthony Dodd <[email protected]>"]
 edition = "2018"

diff --git a/src/components/navbar.rs b/src/components/navbar.rs
@@ -37,11 +37,18 @@ pub struct NavbarProps {
     /// If true, the contents of the navbar will be wrapped in a container.
     #[prop_or_default]
     pub padded: bool,
-    pub navbrand: Html,
+    /// The contents of the `navbar-brand` section of the navbar.
+    #[prop_or_default]
+    pub navbrand: Option<Html>,
     /// The contents of the `navbar-start` section of the navbar.
-    pub navstart: Html,
+    #[prop_or_default]
+    pub navstart: Option<Html>,
     /// The contents of the `navbar-end` section of the navbar.
-    pub navend: Html,
+    #[prop_or_default]
+    pub navend: Option<Html>,
+    /// A bool controlling if the navbar should have a navbar burger for smaller viewports.
+    #[prop_or_else(|| true)]
+    pub navburger: bool,
 }
 
 /// A responsive horizontal navbar that can support images, links, buttons, and dropdowns.
@@ -96,28 +103,45 @@ impl Component for Navbar {
             burgerclasses.push("is-active");
         }
         let togglecb = self.link.callback(|_| NavbarMsg::ToggleMenu);
+        let navbrand = if let Some(navbrand) = &self.props.navbrand {
+            html! {
+                <div class="navbar-brand">
+                    {navbrand.clone()}
+                    {if self.props.navburger {
+                        html! {
+                            <a class=burgerclasses onclick=togglecb
+                                role="button" aria-label="menu"
+                                aria-expanded={if self.is_menu_open { "true" } else { "false" }}
+                            >
+                                <span aria-hidden="true"></span>
+                                <span aria-hidden="true"></span>
+                                <span aria-hidden="true"></span>
+                            </a>
+                        }
+                    } else {
+                        html! {}
+                    }}
+                </div>
+            }
+        } else {
+            html! {}
+        };
+        let navstart = if let Some(navstart) = &self.props.navstart {
+            html! {<div class="navbar-start">{navstart.clone()}</div>}
+        } else {
+            html! {}
+        };
+        let navend = if let Some(navend) = &self.props.navend {
+            html! {<div class="navbar-end">{navend.clone()}</div>}
+        } else {
+            html! {}
+        };
         let contents = html! {
             <>
-            <div class="navbar-brand">
-                {self.props.navbrand.clone()}
-                <a class=burgerclasses onclick=togglecb
-                    role="button" aria-label="menu"
-                    aria-expanded={if self.is_menu_open { "true" } else { "false" }}
-                >
-                    <span aria-hidden="true"></span>
-                    <span aria-hidden="true"></span>
-                    <span aria-hidden="true"></span>
-                </a>
-            </div>
-
+            {navbrand}
             <div class=navclasses>
-                <div class="navbar-start">
-                    {self.props.navstart.clone()}
-                </div>
-
-                <div class="navbar-end">
-                    {self.props.navend.clone()}
-                </div>
+                {navstart}
+                {navend}
             </div>
             </>
         };