From 768cb6838481d6dd448766ad36cabfb8ace54858 Mon Sep 17 00:00:00 2001
From: Cecile Tonglet <cecile.tonglet@cecton.com>
Date: Wed, 23 Sep 2020 15:59:07 +0200
Subject: [PATCH] Move menu to the left (#8)

---
 Cargo.toml            |  2 +-
 build.sh              |  2 +-
 dev.sh                |  2 +-
 src/app.rs            | 89 +++++++++++++++++++++++++------------------
 src/buttons.rs        |  3 +-
 src/collapse.rs       |  5 ++-
 src/forms/controls.rs |  3 +-
 src/icon.rs           |  3 +-
 src/lib.rs            |  6 +--
 src/menu.rs           |  2 +-
 src/tree.rs           |  3 +-
 static/index.html     | 56 +++++++++++++++++++++++++++
 12 files changed, 125 insertions(+), 51 deletions(-)

diff --git a/Cargo.toml b/Cargo.toml
index 8d7e771..745a5a6 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -16,7 +16,7 @@ is-it-maintained-open-issues = { repository = "cecton/yewprint" }
 
 [features]
 default = []
-dev = []
+doc = []
 
 [dependencies]
 wasm-bindgen = "^0.2"
diff --git a/build.sh b/build.sh
index 59a967c..05a1cc8 100755
--- a/build.sh
+++ b/build.sh
@@ -1,7 +1,7 @@
 #!/bin/bash
 
 if [ ${#@} == 0 ]; then
-	options=(--release -- --features dev)
+	options=(--release -- --features doc)
 else
 	options=()
 fi
diff --git a/dev.sh b/dev.sh
index 7d6c238..7e50762 100755
--- a/dev.sh
+++ b/dev.sh
@@ -1,3 +1,3 @@
 #!/bin/sh
 
-exec cargo watch -s './build.sh --dev -- --features dev && simple-http-server -i --nocache --cors public/' -w src
+exec cargo watch -s './build.sh --dev -- --features doc && simple-http-server -i --nocache --cors public/' -w src -w static
diff --git a/src/app.rs b/src/app.rs
index dc2b587..72e11f5 100644
--- a/src/app.rs
+++ b/src/app.rs
@@ -6,11 +6,6 @@ use crate::menu::*;
 use crate::tree::doc::*;
 use yew::prelude::*;
 
-const DARK_BG_COLOR: &str = "#30404d";
-const LIGHT_BG_COLOR: &str = "#f5f8fa";
-const DARK_FG_COLOR: &str = "#f5f8fa";
-const LIGHT_FG_COLOR: &str = "#182026";
-
 pub struct App {
     link: ComponentLink<Self>,
     doc_menu: DocMenu,
@@ -49,42 +44,60 @@ impl Component for App {
     }
 
     fn view(&self) -> Html {
-        let (fg_color, bg_color) = if self.dark_theme {
-            (DARK_FG_COLOR, DARK_BG_COLOR)
-        } else {
-            (LIGHT_FG_COLOR, LIGHT_BG_COLOR)
-        };
-        let style = format!(
-            "min-height: 100vh; padding: 10px; background-color: {}; color: {}",
-            bg_color, fg_color
-        );
-        let class = if self.dark_theme { "bp3-dark" } else { "" };
+        let mut class = Classes::from("docs-app");
+        if self.dark_theme {
+            class.push("bp3-dark");
+        }
 
         html! {
-            <div class={class} style={style}>
-                <div>
-                    <Menu>
-                        <MenuItem text={html!("Button")} onclick=self.link.callback(|_| Msg::GoToMenu(DocMenu::Button)) />
-                        <MenuItem text={html!("Collapse")} onclick=self.link.callback(|_| Msg::GoToMenu(DocMenu::Collapse)) />
-                        <MenuItem text={html!("Icon")} onclick=self.link.callback(|_| Msg::GoToMenu(DocMenu::Icon)) />
-                        <MenuItem text={html!("Menu")} onclick=self.link.callback(|_| Msg::GoToMenu(DocMenu::Menu)) />
-                        <MenuItem text={html!("Switch")} onclick=self.link.callback(|_| Msg::GoToMenu(DocMenu::Switch)) />
-                        <MenuItem text={html!("Tree")} onclick=self.link.callback(|_| Msg::GoToMenu(DocMenu::Tree)) />
-                    </Menu>
+            <div class=class>
+                <div class="docs-nav-wrapper">
+                    <div class="docs-nav">
+                        <Menu>
+                            <MenuItem
+                                text={html!("Button")}
+                                onclick=self.link.callback(|_| Msg::GoToMenu(DocMenu::Button))
+                            />
+                            <MenuItem
+                                text={html!("Collapse")}
+                                onclick=self.link.callback(|_| Msg::GoToMenu(DocMenu::Collapse))
+                            />
+                            <MenuItem
+                                text={html!("Icon")}
+                                onclick=self.link.callback(|_| Msg::GoToMenu(DocMenu::Icon))
+                            />
+                            <MenuItem
+                                text={html!("Menu")}
+                                onclick=self.link.callback(|_| Msg::GoToMenu(DocMenu::Menu))
+                            />
+                            <MenuItem
+                                text={html!("Switch")}
+                                onclick=self.link.callback(|_| Msg::GoToMenu(DocMenu::Switch))
+                            />
+                            <MenuItem
+                                text={html!("Tree")}
+                                onclick=self.link.callback(|_| Msg::GoToMenu(DocMenu::Tree))
+                            />
+                        </Menu>
+                    </div>
                 </div>
-                {
-                    match self.doc_menu {
-                        DocMenu::Button => html! (<ButtonDoc />),
-                        DocMenu::Switch => html! (<SwitchDoc
-                            dark_theme=self.dark_theme
-                            onclick=self.link.callback(|_| Msg::ToggleLight)
-                            />),
-                        DocMenu::Collapse => html!(<CollapseDoc />),
-                        DocMenu::Tree => html!(<TreeDoc />),
-                        DocMenu::Icon => html!(<IconDoc />),
-                        DocMenu::Menu => html!(),
-                    }
-                }
+                <main class="docs-content-wrapper" role="main">
+                    <div class="docs-page">
+                        {
+                            match self.doc_menu {
+                                DocMenu::Button => html! (<ButtonDoc />),
+                                DocMenu::Switch => html! (<SwitchDoc
+                                    dark_theme=self.dark_theme
+                                    onclick=self.link.callback(|_| Msg::ToggleLight)
+                                    />),
+                                DocMenu::Collapse => html!(<CollapseDoc />),
+                                DocMenu::Tree => html!(<TreeDoc />),
+                                DocMenu::Icon => html!(<IconDoc />),
+                                DocMenu::Menu => html!(),
+                            }
+                        }
+                    </div>
+                </main>
             </div>
         }
     }
diff --git a/src/buttons.rs b/src/buttons.rs
index 5f53c17..0d6f8d1 100644
--- a/src/buttons.rs
+++ b/src/buttons.rs
@@ -43,7 +43,7 @@ impl Component for Button {
     }
 }
 
-#[cfg(feature = "dev")]
+#[cfg(feature = "doc")]
 pub mod doc {
     use super::*;
 
@@ -78,6 +78,7 @@ pub mod doc {
         fn view(&self) -> Html {
             html! {
                 <div>
+                    <h1>{"Button"}</h1>
                     <p> {"Counter: "} { self.counter }</p>
                     <div>
                         <Button onclick=self.link.callback(|_| Msg::AddOne)>{ "Add 1" }</Button>
diff --git a/src/collapse.rs b/src/collapse.rs
index e4e7784..11c137a 100644
--- a/src/collapse.rs
+++ b/src/collapse.rs
@@ -25,7 +25,7 @@ pub struct Props {
     pub children: html::Children,
     #[prop_or_default]
     pub keep_children_mounted: bool,
-    #[prop_or_else(|| Duration::from_millis(200))]
+    #[prop_or(Duration::from_millis(200))]
     pub transition_duration: Duration,
 }
 
@@ -197,7 +197,7 @@ impl Component for Collapse {
     }
 }
 
-#[cfg(feature = "dev")]
+#[cfg(feature = "doc")]
 pub mod doc {
     use super::*;
     use crate::buttons::Button;
@@ -236,6 +236,7 @@ pub mod doc {
         fn view(&self) -> Html {
             html! {
                 <div>
+                    <h1>{"Collapse"}</h1>
                     <Button onclick=self.link.callback(|_| Msg::ToggleCollapse)>
                         {"Toggle collapse"}
                     </Button>
diff --git a/src/forms/controls.rs b/src/forms/controls.rs
index af6409c..9f4b710 100644
--- a/src/forms/controls.rs
+++ b/src/forms/controls.rs
@@ -53,7 +53,7 @@ impl Component for Switch {
     }
 }
 
-#[cfg(feature = "dev")]
+#[cfg(feature = "doc")]
 pub mod doc {
     use super::*;
 
@@ -86,6 +86,7 @@ pub mod doc {
         fn view(&self) -> Html {
             html! {
                 <div>
+                    <h1>{"Switch"}</h1>
                     <Switch
                         onclick=self.props.onclick.clone()
                         checked=self.props.dark_theme
diff --git a/src/icon.rs b/src/icon.rs
index b4cf9e6..86d717a 100644
--- a/src/icon.rs
+++ b/src/icon.rs
@@ -94,7 +94,7 @@ impl Component for Icon {
     }
 }
 
-#[cfg(feature = "dev")]
+#[cfg(feature = "doc")]
 pub mod doc {
     use super::*;
 
@@ -116,6 +116,7 @@ pub mod doc {
         fn view(&self) -> Html {
             html! {
                 <div>
+                    <h1>{"Icon"}</h1>
                     <Icon icon=IconName::Print />
                 </div>
             }
diff --git a/src/lib.rs b/src/lib.rs
index 1824a24..ff93a2b 100644
--- a/src/lib.rs
+++ b/src/lib.rs
@@ -1,6 +1,6 @@
 #![recursion_limit = "512"]
 
-#[cfg(feature = "dev")]
+#[cfg(feature = "doc")]
 mod app;
 pub mod buttons;
 pub mod collapse;
@@ -11,7 +11,7 @@ pub mod tree;
 
 use yew::virtual_dom::Classes;
 
-#[cfg(feature = "dev")]
+#[cfg(feature = "doc")]
 #[macro_export]
 macro_rules! log {
     ($s:expr $(,$args:expr)*) => {{
@@ -19,7 +19,7 @@ macro_rules! log {
     }};
 }
 
-#[cfg(feature = "dev")]
+#[cfg(feature = "doc")]
 #[wasm_bindgen::prelude::wasm_bindgen(start)]
 pub fn run_app() -> Result<(), wasm_bindgen::JsValue> {
     yew::start_app::<app::App>();
diff --git a/src/menu.rs b/src/menu.rs
index f15f713..eddc263 100644
--- a/src/menu.rs
+++ b/src/menu.rs
@@ -109,7 +109,7 @@ impl Component for MenuItem {
         if self.props.active {
             anchor_class.push("bp3-active");
         }
-        if let Some(intent) = self.props.intent.clone() {
+        if let Some(intent) = self.props.intent {
             anchor_class = anchor_class.extend(intent);
         } else if self.props.active {
             anchor_class = anchor_class.extend(Intent::Primary);
diff --git a/src/tree.rs b/src/tree.rs
index 311089c..3f80950 100644
--- a/src/tree.rs
+++ b/src/tree.rs
@@ -363,7 +363,7 @@ impl Component for TreeNode {
     }
 }
 
-#[cfg(feature = "dev")]
+#[cfg(feature = "doc")]
 pub mod doc {
     use super::*;
 
@@ -481,6 +481,7 @@ pub mod doc {
         fn view(&self) -> Html {
             html! {
                 <div>
+                    <h1>{"Tree"}</h1>
                     <Tree<i32>
                         tree=self.tree.clone()
                         on_collapse=Some(self.callback_expand_node.clone())
diff --git a/static/index.html b/static/index.html
index f248cda..7778c6d 100644
--- a/static/index.html
+++ b/static/index.html
@@ -16,6 +16,62 @@
 		.bp3-tree {
 			width: 350px;
 		}
+
+		.docs-app {
+			display: flex;
+			flex-direction: row;
+			margin: auto;
+			width: 100vw;
+			min-height: 100vh;
+			background-color: #f5f8fa;
+		}
+
+		.docs-nav {
+			width: 270px;
+			height: 100vh;
+			position: fixed;
+			left: 0;
+			top: 0;
+			overflow-y: scroll;
+			overflow-x: hidden;
+			z-index: 10;
+			background-color: #fff;
+		}
+
+		.bp3-dark .docs-nav {
+			background-color: #394b59;
+		}
+
+		.docs-nav-wrapper {
+			flex-basis: 270px;
+			width: 270px;
+			flex-grow: 0;
+			flex-shrink: 0;
+		}
+
+		.docs-nav .bp3-menu {
+			background: inherit;
+		}
+
+		.docs-content-wrapper {
+			flex-grow: 1;
+			flex-shrink: 1;
+			flex-basis: 830px;
+		}
+
+		.docs-page {
+			padding: 0 5px 40px 40px;
+			max-width: 830px;
+		}
+
+		.docs-app.bp3-dark {
+			background-color: #30404d;
+		}
+
+		.docs-page h1 {
+			line-height: 40px;
+			font-size: 36px;
+		}
 	</style>
   </head>
   <body></body>