feat: menu

.vscode/settings.json

@@ -1,3 +1,5 @@
 {
-    "rust-analyzer.check.targets": ["wasm32-unknown-unknown"],
+    "rust-analyzer.linkedProjects": [
+        "gh-pages/Cargo.toml"
+    ]
 }

Cargo.toml

@@ -14,7 +14,7 @@ license = "MIT"
 
 [dependencies]
 leptos = { version = "0.5.0-rc2",  features = ["csr"] }
-stylers = { git = "https://github.com/abishekatp/stylers", rev = "4bfd2df" }
+stylers = "0.3.2"
 web-sys = { version = "0.3.62", features = ["DomRect"] }
 leptos_dom = { version = "0.5.0-rc2" }
 wasm-bindgen = "0.2.85"

gh-pages/src/pages/menu/mod.rs

@@ -1,3 +1,4 @@
+use crate::components::{Demo, DemoCode};
 use indoc::indoc;
 use leptos::*;
 use melt_ui::*;
@@ -6,26 +7,26 @@ use melt_ui::*;
 pub fn MenuPage() -> impl IntoView {
     let selected = create_rw_signal(String::from("o"));
     view! {
-        <Card>
+        <div style="width: 896px; margin: 0 auto;">
-            { move || selected.get() }
+            <h1>"Menu"</h1>
+            <Demo>
                 <Menu selected>
                     <MenuItem key="a" label="and"/>
                     <MenuItem key="o" label="or"/>
                 </Menu>
-            <CardFooter slot>
+                <DemoCode slot>
-                <Code>
-                    <pre>
                     {
                         indoc!(r#"
+                        let selected = create_rw_signal(String::from("o"));
+                        
                         <Menu selected>
                             <MenuItem key="a" label="and"/>
                             <MenuItem key="o" label="or"/>
                         </Menu>
                         "#)
                     }
-                    </pre>
+                </DemoCode>
-                </Code>
+            </Demo>
-            </CardFooter>
+        </div>
-        </Card>
     }
 }

gh-pages/src/pages/slider/mod.rs

@@ -1,3 +1,5 @@
+use crate::components::{Demo, DemoCode};
+use indoc::indoc;
 use leptos::*;
 use melt_ui::*;
 
@@ -6,6 +8,20 @@ pub fn SliderPage() -> impl IntoView {
     let value = create_rw_signal(0.0);
 
     view! {
+        <div style="width: 896px; margin: 0 auto;">
+            <h1>"Slider"</h1>
+            <Demo>
                 <Slider value/>
+                <DemoCode slot>
+                    {
+                        indoc!(r#"
+                        let value = create_rw_signal(0.0);
+                        
+                        <Slider value/>
+                        "#)
+                    }
+                </DemoCode>
+            </Demo>
+        </div>
     }
 }

src/menu/menu-item.css

@@ -1,16 +1,20 @@
 .melt-menu-item__content {
-    margin: 6px 8px;
+    margin: 0.3rem 0.4rem;
-    padding: 12px 10px;
+    padding: 0.6rem 0.8rem 0.6rem 1rem;
-    padding-left: 14px;
+    color: var(--font-color);
     cursor: pointer;
-    border-radius: var(--border-radius);
+    border-radius: 0.25rem;
+
+    transition-property: color, background-color;
+    transition-timing-function: cubic-bezier(.4,0,.2,1);
+    transition-duration: .15s;
 }
 
-.melt-menu-item__content:hover {
+.melt-menu-item__content:hover:not(.melt-menu-item__content--selected) {
-    color: var(--font-color);
+    background-color: var(--bg-color-hover);
 }
 
 .melt-menu-item__content--selected {
-    color: var(--font-color);
+    color: var(--font-color-active);
     background-color: var(--bg-color);
 }

src/menu/menu_item.rs

@@ -19,10 +19,10 @@ pub fn MenuItem(
         let mut css_vars = String::new();
         let theme = theme.get();
         let font_color = theme.common.color_primary.clone();
-        css_vars.push_str(&format!("--font-color: {font_color};"));
+        css_vars.push_str(&format!("--font-color-active: {font_color};"));
+        css_vars.push_str(&format!("--font-color: {};", theme.menu.color));
         css_vars.push_str(&format!("--bg-color: {font_color}1a;"));
-        let border_radius = theme.common.border_radius.clone();
+        css_vars.push_str(&format!("--bg-color-hover: {};", theme.menu.item_color_hover));
-        css_vars.push_str(&format!("--border-radius: {border_radius};"));
         css_vars
     });
     view! { class=class_name,

src/menu/mod.rs

@@ -1,7 +1,9 @@
 mod menu_item;
+mod theme;
 
 use leptos::*;
 pub use menu_item::*;
+pub use theme::MenuTheme;
 
 #[component]
 pub fn Menu(#[prop(into)] selected: RwSignal<String>, children: Children) -> impl IntoView {

src/menu/theme.rs

@@ -0,0 +1,23 @@
+use crate::theme::ThemeMethod;
+
+#[derive(Clone)]
+pub struct MenuTheme {
+    pub color: String,
+    pub item_color_hover: String,
+}
+
+impl ThemeMethod for MenuTheme {
+    fn light() -> Self {
+        Self {
+            color: "#333639".into(),
+            item_color_hover: "#f3f5f6".into(),
+        }
+    }
+
+    fn dark() -> Self {
+        Self {
+            color: "#333639".into(),
+            item_color_hover: "#f3f5f6".into(),
+        }
+    }
+}

src/theme/mod.rs

@@ -2,7 +2,7 @@ mod common;
 use leptos::*;
 
 use self::common::CommonTheme;
-use crate::{ButtonTheme, InputTheme};
+use crate::{ButtonTheme, InputTheme, MenuTheme};
 
 pub trait ThemeMethod {
     fn light() -> Self;
@@ -14,6 +14,7 @@ pub struct Theme {
     pub common: CommonTheme,
     pub button: ButtonTheme,
     pub input: InputTheme,
+    pub menu: MenuTheme,
 }
 
 impl Theme {
@@ -22,6 +23,7 @@ impl Theme {
             common: CommonTheme::light(),
             button: ButtonTheme::light(),
             input: InputTheme::light(),
+            menu: MenuTheme::light(),
         }
     }
     pub fn dark() -> Self {
@@ -29,6 +31,7 @@ impl Theme {
             common: CommonTheme::dark(),
             button: ButtonTheme::dark(),
             input: InputTheme::dark(),
+            menu: MenuTheme::dark(),
         }
     }
 }
@@ -39,6 +42,7 @@ impl ThemeMethod for Theme {
             common: CommonTheme::light(),
             button: ButtonTheme::light(),
             input: InputTheme::dark(),
+            menu: MenuTheme::dark(),
         }
     }
     fn dark() -> Self {
@@ -46,6 +50,7 @@ impl ThemeMethod for Theme {
             common: CommonTheme::dark(),
             button: ButtonTheme::dark(),
             input: InputTheme::dark(),
+            menu: MenuTheme::dark(),
         }
     }
 }