diff --git a/demo/src/components/site_header.rs b/demo/src/components/site_header.rs
index 1aba86e..efaa7e0 100644
--- a/demo/src/components/site_header.rs
+++ b/demo/src/components/site_header.rs
@@ -161,13 +161,13 @@ pub fn SiteHeader() -> impl IntoView {
diff --git a/demo/src/pages/components.rs b/demo/src/pages/components.rs
index 1cf7946..3fd5523 100644
--- a/demo/src/pages/components.rs
+++ b/demo/src/pages/components.rs
@@ -59,11 +59,11 @@ pub fn ComponentsPage() -> impl IntoView {
-
+
@@ -81,15 +81,13 @@ pub(crate) struct MenuGroupOption {
impl IntoView for MenuGroupOption {
fn into_view(self) -> View {
let Self { label, children } = self;
+ let children_len = children.len();
view! {
-
-
- {children.into_iter().map(|v| v.into_view()).collect_view()}
-
-
- }
+
+ {format!("{label} ({children_len})")}
+
+ {children.into_iter().map(|v| v.into_view()).collect_view()}
+ }.into_view()
}
}
@@ -101,7 +99,8 @@ pub(crate) struct MenuItemOption {
impl IntoView for MenuItemOption {
fn into_view(self) -> View {
let Self { label, value } = self;
- view! { }
+ // key=value label
+ view! { {label} }
}
}
diff --git a/thaw/src/layout/layout.css b/thaw/src/layout/layout.css
index b03a32a..e81e579 100644
--- a/thaw/src/layout/layout.css
+++ b/thaw/src/layout/layout.css
@@ -3,6 +3,7 @@
}
.thaw-layout--absolute-positioned {
+ background-color: inherit;
position: absolute;
top: 0;
right: 0;
diff --git a/thaw/src/lib.rs b/thaw/src/lib.rs
index c083318..f09383f 100644
--- a/thaw/src/lib.rs
+++ b/thaw/src/lib.rs
@@ -27,6 +27,7 @@ mod menu;
mod message;
pub mod mobile;
mod modal;
+mod nav;
mod popover;
mod progress;
mod radio;
@@ -40,6 +41,7 @@ mod switch;
mod table;
mod tabs;
mod tag;
+mod text;
mod theme;
mod time_picker;
mod typography;
@@ -73,6 +75,7 @@ pub use loading_bar::*;
pub use menu::*;
pub use message::*;
pub use modal::*;
+pub use nav::*;
pub use popover::*;
pub use progress::*;
pub use radio::*;
diff --git a/thaw/src/nav/mod.rs b/thaw/src/nav/mod.rs
new file mode 100644
index 0000000..33174e4
--- /dev/null
+++ b/thaw/src/nav/mod.rs
@@ -0,0 +1,5 @@
+mod nav_drawer;
+mod nav_item;
+
+pub use nav_drawer::*;
+pub use nav_item::*;
\ No newline at end of file
diff --git a/thaw/src/nav/nav-drawer.css b/thaw/src/nav/nav-drawer.css
new file mode 100644
index 0000000..1ff976f
--- /dev/null
+++ b/thaw/src/nav/nav-drawer.css
@@ -0,0 +1,61 @@
+.thaw-nav-drawer {
+ overflow: hidden;
+ width: 260px;
+ max-width: 100vw;
+ height: auto;
+ /* max-height: 100vh; */
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ justify-content: flex-start;
+ background-color: var(--colorNeutralBackground1);
+ color: var(--colorNeutralForeground1);
+ position: relative;
+}
+
+.thaw-nav-drawer__body {
+ padding: 0 var(--spacingVerticalMNudge);
+ flex: 1 1 0%;
+ align-self: stretch;
+ position: relative;
+ z-index: 1;
+ /* overflow: auto; */
+}
+
+.thaw-nav-item {
+ display: flex;
+ text-transform: none;
+ position: relative;
+ justify-content: start;
+ gap: var(--spacingVerticalL);
+ padding: var(--spacingVerticalMNudge);
+ /* background-color: var(--colorNeutralBackground4); */
+ border-radius: var(--borderRadiusMedium);
+ color: var(--colorNeutralForeground2);
+ text-decoration-line: none;
+ border: none;
+ font-family: var(--fontFamilyBase);
+ font-size: var(--fontSizeBase300);
+ font-weight: var(--fontWeightRegular);
+ line-height: var(--lineHeightBase300);
+ cursor: pointer;
+}
+
+.thaw-nav-item:hover {
+ background-color: var(--colorNeutralBackground4Hover);
+}
+
+.thaw-nav-item:active {
+ background-color: var(--colorNeutralBackground4Pressed);
+}
+
+.thaw-nav-item--selected::after {
+ content: "";
+ position: absolute;
+ width: 4px;
+ height: 20px;
+ background-color: var(--colorNeutralForeground2BrandSelected);
+ border-radius: var(--borderRadiusCircular);
+ margin-inline-start: -18px;
+}
\ No newline at end of file
diff --git a/thaw/src/nav/nav_drawer.rs b/thaw/src/nav/nav_drawer.rs
new file mode 100644
index 0000000..91b96b9
--- /dev/null
+++ b/thaw/src/nav/nav_drawer.rs
@@ -0,0 +1,27 @@
+use leptos::*;
+use thaw_utils::{mount_style, Model};
+
+#[component]
+pub fn NavDrawer(
+ #[prop(optional, into)] selected_value: Model,
+ children: Children,
+) -> impl IntoView {
+ mount_style("nav-drawer", include_str!("./nav-drawer.css"));
+
+ view! {
+
+
+
+ }
+}
+
+#[derive(Clone)]
+pub(crate) struct NavDrawerInjection(pub Model);
+
+pub(crate) fn use_nav_drawer() -> NavDrawerInjection {
+ expect_context()
+}
diff --git a/thaw/src/nav/nav_item.rs b/thaw/src/nav/nav_item.rs
new file mode 100644
index 0000000..4d221d7
--- /dev/null
+++ b/thaw/src/nav/nav_item.rs
@@ -0,0 +1,24 @@
+use leptos::*;
+use crate::use_nav_drawer;
+use thaw_utils::{class_list, StoredMaybeSignal};
+
+#[component]
+pub fn NavItem(#[prop(into)] value: MaybeSignal, children: Children) -> impl IntoView {
+ let nav_drawer = use_nav_drawer();
+ let value: StoredMaybeSignal<_> = value.into();
+ let on_click = move |_| {
+ let value = value.get();
+ if nav_drawer.0.with(|key| key != &value) {
+ nav_drawer.0.set(value);
+ }
+ };
+ view! {
+
+ {children()}
+
+ }
+}
diff --git a/thaw/src/text/mod.rs b/thaw/src/text/mod.rs
new file mode 100644
index 0000000..744f638
--- /dev/null
+++ b/thaw/src/text/mod.rs
@@ -0,0 +1,6 @@
+use leptos::*;
+
+
+pub fn Caption1Strong() {
+
+}
\ No newline at end of file
diff --git a/thaw/src/theme/color.rs b/thaw/src/theme/color.rs
index 6c246c7..bf2cb6d 100644
--- a/thaw/src/theme/color.rs
+++ b/thaw/src/theme/color.rs
@@ -6,6 +6,9 @@ pub struct ColorTheme {
pub color_neutral_background_1: String,
pub color_neutral_background_1_hover: String,
pub color_neutral_background_1_pressed: String,
+ pub color_neutral_background_4: String,
+ pub color_neutral_background_4_hover: String,
+ pub color_neutral_background_4_pressed: String,
pub color_neutral_background_6: String,
pub color_neutral_foreground_disabled: String,
@@ -17,6 +20,7 @@ pub struct ColorTheme {
pub color_neutral_foreground_2_pressed: String,
pub color_neutral_foreground_2_brand_hover: String,
pub color_neutral_foreground_2_brand_pressed: String,
+ pub color_neutral_foreground_2_brand_selected: String,
pub color_neutral_foreground_3: String,
pub color_neutral_foreground_4: String,
pub color_neutral_foreground_on_brand: String,
@@ -50,6 +54,9 @@ impl ColorTheme {
color_neutral_background_1: "#fff".into(),
color_neutral_background_1_hover: "#f5f5f5".into(),
color_neutral_background_1_pressed: "#e0e0e0".into(),
+ color_neutral_background_4: "#f0f0f0".into(),
+ color_neutral_background_4_hover: "#fafafa".into(),
+ color_neutral_background_4_pressed: "#f5f5f5".into(),
color_neutral_background_6: "#e6e6e6".into(),
color_neutral_foreground_disabled: "#bdbdbd".into(),
@@ -61,6 +68,7 @@ impl ColorTheme {
color_neutral_foreground_2_pressed: "#242424".into(),
color_neutral_foreground_2_brand_hover: "#0f6cbd".into(),
color_neutral_foreground_2_brand_pressed: "#115ea3".into(),
+ color_neutral_foreground_2_brand_selected: "#0f6cbd".into(),
color_neutral_foreground_3: "#616161".into(),
color_neutral_foreground_4: "#707070".into(),
color_neutral_foreground_on_brand: "#fff".into(),
@@ -94,6 +102,9 @@ impl ColorTheme {
color_neutral_background_1: "#292929".into(),
color_neutral_background_1_hover: "#3d3d3d".into(),
color_neutral_background_1_pressed: "#1f1f1f".into(),
+ color_neutral_background_4: "#0a0a0a".into(),
+ color_neutral_background_4_hover: "#1f1f1f".into(),
+ color_neutral_background_4_pressed: "#000000".into(),
color_neutral_background_6: "#333333".into(),
color_neutral_foreground_disabled: "#5c5c5c".into(),
@@ -105,6 +116,7 @@ impl ColorTheme {
color_neutral_foreground_2_pressed: "#fff".into(),
color_neutral_foreground_2_brand_hover: "#479ef5".into(),
color_neutral_foreground_2_brand_pressed: "#2886de".into(),
+ color_neutral_foreground_2_brand_selected: "#479ef5".into(),
color_neutral_foreground_3: "#adadad".into(),
color_neutral_foreground_4: "#999999".into(),
color_neutral_foreground_on_brand: "#fff".into(),
diff --git a/thaw/src/theme/common.rs b/thaw/src/theme/common.rs
index a430588..b09ec93 100644
--- a/thaw/src/theme/common.rs
+++ b/thaw/src/theme/common.rs
@@ -51,6 +51,8 @@ pub struct CommonTheme {
pub spacing_horizontal_m_nudge: String,
pub spacing_horizontal_m: String,
pub spacing_horizontal_l: String,
+ pub spacing_vertical_m_nudge: String,
+ pub spacing_vertical_l: String,
pub duration_ultra_fast: String,
pub duration_faster: String,
@@ -119,6 +121,8 @@ impl CommonTheme {
spacing_horizontal_m_nudge: "10px".into(),
spacing_horizontal_m: "12px".into(),
spacing_horizontal_l: "16px".into(),
+ spacing_vertical_m_nudge: "10px".into(),
+ spacing_vertical_l: "16px".into(),
duration_ultra_fast: "50ms".into(),
duration_faster: "100ms".into(),