Responsive nav bar

Cargo.toml

@@ -19,6 +19,10 @@ git = "https://github.com/pop-os/iced.git"
 branch = "cosmic-design-system"
 features = ["cosmic_theme"]
 
+[dependencies.iced_lazy]
+git = "https://github.com/pop-os/iced.git"
+branch = "cosmic-design-system"
+
 [workspace]
 members = [
   "examples/cosmic",

examples/cosmic/src/main.rs

@@ -22,6 +22,7 @@ use cosmic::{
         slider,
         text,
     },
+    iced_lazy::responsive,
 };
 
 pub fn main() -> cosmic::iced::Result {
@@ -40,7 +41,7 @@ struct Window {
     pick_list_selected: Option<&'static str>,
 }
 
-#[derive(Debug, Clone)]
+#[derive(Clone, Copy, Debug)]
 enum Message {
     Page(u8),
     Debug(bool),
@@ -79,20 +80,30 @@ impl Sandbox for Window {
     }
 
     fn view(&self) -> Element<Message> {
+        // TODO: Adding responsive makes this regenerate on every size change, and regeneration
+        // involves allocations for many different items. Ideally, we could only make the nav bar
+        // responsive and leave the content to be sized normally.
+        responsive(|size| {
+            let condensed = size.width < 800.0;
             let sidebar: Element<_> = nav_bar!(
                 //TODO: Support symbolic icons
-            nav_button!("network-wireless", "Wi-Fi")
+                nav_button!("network-wireless", "Wi-Fi", condensed)
                     .on_press(Message::Page(0))
                     .style(if self.page == 0 { theme::Button::Primary } else { theme::Button::Text })
                 ,
-            nav_button!("preferences-desktop", "Desktop")
+                nav_button!("preferences-desktop", "Desktop", condensed)
                     .on_press(Message::Page(1))
                     .style(if self.page == 1 { theme::Button::Primary } else { theme::Button::Text })
                 ,
-            nav_button!("system-software-update", "OS Upgrade & Recovery")
+                nav_button!("system-software-update", "OS Upgrade & Recovery", condensed)
                     .on_press(Message::Page(2))
                     .style(if self.page == 2 { theme::Button::Primary } else { theme::Button::Text })
             )
+            .max_width(if condensed {
+                56
+            } else {
+                300
+            })
             .into();
 
             let choose_theme = [Theme::Light, Theme::Dark].iter().fold(
@@ -200,6 +211,7 @@ impl Sandbox for Window {
             .width(Length::Fill)
             .height(Length::Fill)
             .into()
+        }).into()
     }
 
     fn theme(&self) -> Theme {

src/lib.rs

@@ -1,4 +1,5 @@
 pub use iced;
+pub use iced_lazy;
 
 pub mod font;
 pub mod widget;

src/widget/nav.rs

@@ -43,7 +43,13 @@ pub fn nav_bar_style(theme: &Theme) -> widget::container::Appearance {
 
 #[macro_export]
 macro_rules! nav_button {
-    ($icon: expr, $title:expr) => (
+    ($icon: expr, $title:expr, $condensed:expr) => ({
+        if $condensed {
+            $crate::iced::widget::Button::new(
+                $crate::widget::icon($icon, 16)
+            )
+            .padding(8)
+        } else {
             $crate::widget::button!(
                 $crate::widget::icon($icon, 16),
                 $crate::iced::widget::Text::new($title),
@@ -51,6 +57,7 @@ macro_rules! nav_button {
                     $crate::iced::Length::Fill
                 ),
             )
-    );
+        }
+    });
 }
 pub use nav_button;