Navigation menu

Cargo.toml

@@ -7,6 +7,7 @@ dioxus-primitives = { path = "primitives" }
 
 dioxus = "0.7.0-alpha.1"
 dioxus-lib = "0.7.0-alpha.1"
+dioxus-router = { version = "0.7.0-alpha.1" }
 tracing = { version = "0.1", features = ["std"] }
 
 [patch.crates-io]
@@ -18,6 +19,9 @@ dioxus-sync = { git = "https://github.com/ealmloff/dioxus-std", branch = "0.7" }
 dioxus-time = { git = "https://github.com/ealmloff/dioxus-std", branch = "0.7" }
 dioxus-util = { git = "https://github.com/ealmloff/dioxus-std", branch = "0.7" }
 dioxus-window = { git = "https://github.com/ealmloff/dioxus-std", branch = "0.7" }
+dioxus = { git = "https://github.com/dioxuslabs/dioxus", rev = "db3ce0703001b496abf725c518a4273ee41670fa" }
+dioxus-lib = { git = "https://github.com/dioxuslabs/dioxus", rev = "db3ce0703001b496abf725c518a4273ee41670fa" }
+dioxus-router = { git = "https://github.com/dioxuslabs/dioxus", rev = "db3ce0703001b496abf725c518a4273ee41670fa" }
 
 [profile]
 

preview/assets/main.css

@@ -15,6 +15,12 @@ html[data-theme="light"] {
   --light: initial;
 }
 
+html, body {
+  margin: 0;
+  padding: 0;
+  overflow-x: hidden;
+}
+
 .dark-mode-only {
   display: var(--dark, initial) var(--light, none);
 }
@@ -23,11 +29,13 @@ html[data-theme="light"] {
   display: var(--dark, none) var(--light, initial);
 }
 
-.navbar {
+.preview-navbar {
   position: sticky;
   z-index: 1000;
   top: 0;
   display: flex;
+  width: 100%;
+  box-sizing: border-box;
   align-items: center;
   justify-content: space-between;
   padding: 0.5rem 1rem;
@@ -65,17 +73,26 @@ html[data-theme="light"] {
 .code-block {
   overflow: scroll;
   width: 100%;
+  max-width: calc(100vw - 2rem);
   height: 100%;
   max-height: 80vh;
   box-sizing: border-box;
   padding: 0.5rem;
   border-radius: 0.5rem;
   margin: 0;
   font-family: "Courier New", Courier, monospace;
+  white-space: pre;
+}
+
+.dark-code-block {
+  display: var(--dark, block) var(--light, none);
+}
+
+.light-code-block {
+  display: var(--dark, none) var(--light, block);
 }
 
 .code-block[data-collapsed="true"] {
-  overflow: hidden;
   height: 10em;
   backdrop-filter: blur(1px);
   mask: linear-gradient(

preview/src/components/menubar/docs.md

@@ -1,4 +1,4 @@
-The Menubar component can be used to display a menu bar with collapsible menus. It is useful for creating a navigation bar or a menu system in your application.
+The Menubar component can be used to display a menu bar with collapsible menus.
 
 ## Component Structure
 

preview/src/components/menubar/style.css

@@ -1,99 +1,104 @@
 .menubar {
-    display: flex;
-    box-sizing: border-box;
-    padding: .25rem;
-    border: none;
-    border-radius: .5rem;
-    background: var(--background-color);
-    box-shadow: inset 0 0 0 1px var(--dim-border-color);
-    gap: .25rem;
+  display: flex;
+  box-sizing: border-box;
+  padding: 0.25rem;
+  border: none;
+  border-radius: 0.5rem;
+  background: var(--muted-background-color);
+  box-shadow: inset 0 0 0 1px var(--dim-border-color);
+  gap: 0.25rem;
 }
 
 .menubar-menu {
-    position: relative;
+  position: relative;
 }
 
 .menubar-trigger {
-    padding: 8px 12px;
-    border: none;
-    border-radius: calc(.5rem - .25rem);
-    background: none;
-    color: var(--text-color);
-    cursor: pointer;
-    transition: background-color 100ms ease-out;
+  padding: 8px 12px;
+  border: none;
+  border-radius: calc(0.5rem - 0.25rem);
+  background: none;
+  color: var(--text-color);
+  cursor: pointer;
+  transition: background-color 100ms ease-out;
 }
 
 .menubar-menu[data-state="open"] .menubar-trigger {
-    background-color: var(--light, var(--hover-background-color)) 
-        var(--dark, var(--hover-border-color));
-    color: var(--bright-text-color);
+  background-color: var(--light, var(--hover-background-color))
+    var(--dark, var(--hover-border-color));
+  color: var(--bright-text-color);
 }
 
 .menubar-trigger[data-disabled="true"] {
-    color: var(--muted-text-color);
-    cursor: not-allowed;
+  color: var(--muted-text-color);
+  cursor: not-allowed;
 }
 
 .menubar-trigger:hover:not([data-disabled="true"]),
 .menubar-trigger:focus-visible {
-    background: var(--light, var(--hover-background-color)) 
-        var(--dark, var(--hover-border-color));
-    color: var(--bright-text-color);
-    outline: none;
+  background: var(--light, var(--hover-background-color))
+    var(--dark, var(--hover-border-color));
+  color: var(--bright-text-color);
+  outline: none;
 }
 
 .menubar-content {
-    position: absolute;
-    z-index: 1000;
-    top: 100%;
-    left: 0;
-    min-width: 200px;
-    padding: .25rem;
-    border-radius: .5rem;
-    margin-top: .5rem;
-    margin-left: -.25rem;
-    background: var(--light, var(--background-color)) 
-        var(--dark, var(--focused-background-color));
-    box-shadow: inset 0 0 0 1px var(--light, var(--dim-border-color)) var(--dark, var(--hover-border-color));
-    transform-origin: top;
-    will-change: transform, opacity;
+  position: absolute;
+  z-index: 1000;
+  top: 100%;
+  left: 0;
+  min-width: 200px;
+  padding: 0.25rem;
+  border-radius: 0.5rem;
+  margin-top: 0.5rem;
+  background: var(--light, var(--background-color))
+    var(--dark, var(--focused-background-color));
+  box-shadow: inset 0 0 0 1px var(--light, var(--dim-border-color))
+    var(--dark, var(--hover-border-color));
+  transform-origin: top;
+  will-change: transform, opacity;
+}
+
+.menubar-menu:first-child .menubar-content {
+  margin-left: -0.25rem;
 }
 
 .menubar-content[data-state="closed"] {
-    opacity: 0;
-    pointer-events: none;
-    transform: translateY(-4px) scale(0.98);
-    transition: opacity 150ms ease-in, transform 150ms ease-in;
+  opacity: 0;
+  pointer-events: none;
+  transform: translateY(-4px) scale(0.98);
+  transition: opacity 150ms ease-in, transform 150ms ease-in;
 }
 
 .menubar-content[data-state="open"] {
-    opacity: 1;
-    transform: translateY(0) scale(1);
-    transition: opacity 200ms ease-out, transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
+  opacity: 1;
+  transform: translateY(0) scale(1);
+  transition: opacity 200ms ease-out,
+    transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
 }
 
 .menubar-item {
-    display: block;
-    padding: 8px 12px;
-    border-radius: calc(.5rem - .25rem);
-    cursor: pointer;
-    font-size: 14px;
+  display: block;
+  padding: 8px 12px;
+  border-radius: calc(0.5rem - 0.25rem);
+  cursor: pointer;
+  font-size: 14px;
 }
 
 .menubar-item[data-disabled="true"] {
-    color: var(--muted-text-color);
-    cursor: not-allowed;
+  color: var(--muted-text-color);
+  cursor: not-allowed;
 }
 
 .menubar-item:hover:not([data-disabled="true"]),
 .menubar-item:focus-visible {
-    background: var(--light, var(--hover-background-color)) 
-        var(--dark, var(--hover-border-color));
-    color: var(--bright-text-color);
-    outline: none;
+  background: var(--light, var(--hover-background-color))
+    var(--dark, var(--hover-border-color));
+  color: var(--bright-text-color);
+  outline: none;
 }
 
 [data-disabled="true"] {
-    cursor: not-allowed;
-    opacity: 0.5;
+  cursor: not-allowed;
+  opacity: 0.5;
 }

preview/src/components/mod.rs

@@ -26,6 +26,7 @@ examples!(
     dropdown_menu,
     hover_card,
     menubar,
+    navbar,
     popover,
     progress,
     radio_group,

preview/src/components/navbar/docs.md

@@ -0,0 +1,31 @@
+The Navbar component can be used to display a navigation bar with collapsible sections.
+
+## Component Structure
+
+```rust
+// The Navbar component wraps the entire menu bar and contains the individual menus in the order of their index.
+Navbar {
+    // The NavbarNav contains the individual menus that can be opened.
+    NavbarNav {
+        // The index of the menu, used to determine the order in which menus are displayed.
+        index: 0,
+        // The menubar trigger is the element that will display the menu when activated.
+        NavbarTrigger {
+            // The content of the trigger button
+            {children}
+        }
+        // The menubar content contains all the items that will be displayed in the menu when it is opened.
+        NavbarContent {
+            // Each menubar item represents an individual items in the menu.
+            NavbarItem {
+                // The value of the item which will be passed to the on_select callback when the item is selected.
+                value: "",
+                on_select: |value: String| {
+                    // This callback is triggered when the item is selected.
+                    // The value parameter contains the value of the selected item.
+                },
+            }
+        }
+    }
+}
+```

preview/src/components/navbar/mod.rs

@@ -0,0 +1,114 @@
+use dioxus::prelude::*;
+use dioxus_primitives::navbar::{Navbar, NavbarContent, NavbarItem, NavbarNav, NavbarTrigger};
+use crate::Route;
+
+#[component]
+pub(super) fn Demo() -> Element {
+    rsx! {
+        document::Link {
+            rel: "stylesheet",
+            href: asset!("/src/components/navbar/style.css"),
+        }
+        div { class: "navbar-example",
+            Navbar { class: "navbar",
+                aria_label: "Components",
+                NavbarNav { class: "navbar-nav", index: 0usize,
+                    NavbarTrigger { class: "navbar-trigger",
+                        "Inputs"
+                        svg {
+                            class: "navbar-expand-icon",
+                            view_box: "0 0 24 24",
+                            xmlns: "http://www.w3.org/2000/svg",
+                            polyline { points: "6 9 12 15 18 9" }
+                        }
+                    }
+                    NavbarContent { class: "navbar-content",
+                        NavbarItem {
+                            index: 0usize,
+                            class: "navbar-item",
+                            value: "calendar".to_string(),
+                            to: Route::ComponentDemo { component_name: "calendar".into() },
+                            "Calendar"
+                        }
+                        NavbarItem {
+                            index: 1usize,
+                            class: "navbar-item",
+                            value: "slider".to_string(),
+                            to: Route::ComponentDemo { component_name: "slider".into() },
+                            "Slider"
+                        }
+                        NavbarItem {
+                            index: 2usize,
+                            class: "navbar-item",
+                            value: "checkbox".to_string(),
+                            to: Route::ComponentDemo { component_name: "checkbox".into() },
+                            "Checkbox"
+                        }
+                        NavbarItem {
+                            index: 3usize,
+                            class: "navbar-item",
+                            value: "radio_group".to_string(),
+                            to: Route::ComponentDemo { component_name: "radio_group".into() },
+                            "Radio Group"
+                        }
+                    }
+                }
+                NavbarNav { class: "navbar-nav", index: 1usize,
+                    NavbarTrigger { class: "navbar-trigger",
+                        "Information"
+                        svg {
+                            class: "navbar-expand-icon",
+                            view_box: "0 0 24 24",
+                            xmlns: "http://www.w3.org/2000/svg",
+                            polyline { points: "6 9 12 15 18 9" }
+                        }
+                    }
+                    NavbarContent { class: "navbar-content",
+                        NavbarItem {
+                            index: 0usize,
+                            class: "navbar-item",
+                            value: "toast".to_string(),
+                            to: Route::ComponentDemo { component_name: "toast".into() },
+                            "Toast"
+                        }
+                        NavbarItem {
+                            index: 1usize,
+                            class: "navbar-item",
+                            value: "tabs".to_string(),
+                            to: Route::ComponentDemo { component_name: "tabs".into() },
+                            "Tabs"
+                        }
+                        NavbarItem {
+                            index: 2usize,
+                            class: "navbar-item",
+                            value: "dialog".to_string(),
+                            to: Route::ComponentDemo { component_name: "dialog".into() },
+                            "Dialog"
+                        }
+                        NavbarItem {
+                            index: 3usize,
+                            class: "navbar-item",
+                            value: "alert_dialog".to_string(),
+                            to: Route::ComponentDemo { component_name: "alert_dialog".into() },
+                            "Alert Dialog"
+                        }
+                        NavbarItem {
+                            index: 4usize,
+                            class: "navbar-item",
+                            value: "tooltip".to_string(),
+                            to: Route::ComponentDemo { component_name: "tooltip".into() },
+                            "Tooltip"
+                        }
+                    }
+                }
+                NavbarItem {
+                    index: 2usize,
+                    class: "navbar-item",
+                    value: "home".to_string(),
+                    to: Route::Home,
+                    "Home"
+                }
+            }
+        }
+    }
+}