Simplified the navbar events

- Made padding smaller to mach mockups

examples/cosmic/src/main.rs

@@ -10,6 +10,6 @@ pub fn main() -> cosmic::iced::Result {
     let mut settings = settings();
     settings.window.min_size = Some((600, 300));
     // TODO: Window resize handles not functioning yet
-    settings.window.decorations = false;
+    settings.window.decorations = true;
     Window::run(settings)
 }

examples/cosmic/src/window.rs

@@ -159,12 +159,22 @@ impl Application for Window {
                             .title("Personalization")
                             .icon("applications-system"),
                         vec![
-                            nav_bar_item().title("Desktop Session").icon("desktop-panel"),
+                            nav_bar_item()
-                            nav_bar_item().title("Wallpaper").icon("preferences-desktop-wallpaper"),
+                                .title("Desktop Session")
+                                .icon("desktop-panel"),
+                            nav_bar_item()
+                                .title("Wallpaper")
+                                .icon("preferences-desktop-wallpaper"),
                             nav_bar_item().title("Appearance").icon("cs-color"),
-                            nav_bar_item().title("Dock & Top Panel").icon("desktop-panel"),
+                            nav_bar_item()
-                            nav_bar_item().title("Workspaces").icon("preferences-system-windows"),
+                                .title("Dock & Top Panel")
-                            nav_bar_item().title("Notifications").icon("cs-notifications"),
+                                .icon("desktop-panel"),
+                            nav_bar_item()
+                                .title("Workspaces")
+                                .icon("preferences-system-windows"),
+                            nav_bar_item()
+                                .title("Notifications")
+                                .icon("cs-notifications"),
                         ],
                     ),
                     (
@@ -280,7 +290,7 @@ impl Application for Window {
             );
 
             container(row(widgets))
-                .padding([16, 16])
+                .padding(12)
                 .width(Length::Fill)
                 .height(Length::Fill)
                 .into()

src/widget/navigation/macros.rs

@@ -7,17 +7,39 @@ pub mod nav_bar {
 
     #[macro_export]
     macro_rules! nav_button {
-        ($icon: expr, $title:expr, $condensed:expr) => {{
+        ($title:expr, $icon: expr, $condensed:expr, $active: expr) => {
             if $condensed {
-                $crate::iced::widget::Button::new($crate::widget::icon($icon, 22)).padding(8)
+                $crate::iced::widget::Button::new(
-            } else {
+                    $crate::iced::widget::Column::with_children(vec![
-                $crate::widget::button!(
+                        $crate::widget::icon($icon, 26).into(),
-                    $crate::widget::icon($icon, 22),
+                        $crate::iced::widget::text($title).size(14).into(),
-                    $crate::iced::widget::Text::new($title),
+                    ])
-                    $crate::iced::widget::horizontal_space($crate::iced::Length::Fill),
+                    .spacing(5)
+                    .width($crate::iced::Length::Units(110))
+                    .height($crate::iced::Length::Units(60))
+                    .align_items($crate::iced::alignment::Alignment::Center),
                 )
+                .style(if $active {
+                    $crate::iced::theme::Button::Primary.into()
+                } else {
+                    $crate::iced::theme::Button::Text.into()
+                })
+            } else {
+                $crate::iced::widget::Button::new(
+                    $crate::iced::widget::row![
+                        $crate::widget::icon($icon, 20),
+                        $crate::iced::widget::Text::new($title).size(16).width($crate::iced::Length::Fill)
+                    ]
+                    .spacing(10),
+                )
+                .padding(10)
+                .style(if $active {
+                    $crate::iced::theme::Button::Primary.into()
+                } else {
+                    $crate::iced::theme::Button::Text.into()
+                })
             }
-        }};
+        };
     }
 
     pub fn nav_bar_sections_style(theme: &Theme) -> widget::container::Appearance {

src/widget/navigation/navbar.rs

@@ -91,70 +91,31 @@ impl<'a, Message> Component<Message, Renderer> for NavBar<'a, Message> {
         }
     }
 
-    fn view(&self, state: &Self::State) -> Element<'a, Self::Event, Renderer> {
+    fn view(&self, state: &Self::State) -> Element<Self::Event, Renderer> {
         if self.active {
             let mut sections: Vec<Element<'a, Self::Event, Renderer>> = vec![];
             let mut pages: Vec<Element<'a, Self::Event, Renderer>> = vec![];
 
             for (section_index, (section, section_pages)) in self.source.iter().enumerate() {
                 sections.push(
-                    button(
+                    crate::nav_button!(
-                        column(vec![
+                        &section.title,
-                            icon(section.icon.clone(), 20).into(),
+                        &section.icon,
-                            text(section.title.clone()).size(14).into(),
+                        true,
-                        ])
+                        section_index == state.selected_section
-                        .width(Length::Units(100))
-                        .height(Length::Units(50))
-                        .align_items(Alignment::Center),
                     )
-                    .style(if section_index == state.selected_section {
-                        theme::Button::Primary.into()
-                    } else {
-                        theme::Button::Text.into()
-                    })
                     .on_press(NavBarEvent::SectionSelected(section_index))
                     .into(),
                 );
                 if section_index == state.selected_section {
                     for (page_index, page) in section_pages.iter().enumerate() {
-                        pages.push(if self.condensed {
+                        let active = state.selected_page.is_some()
-                            button(
+                            && page_index == state.selected_page.unwrap();
-                                    column(vec![
+                        pages.push(
-                                    icon(&page.icon, 20).into(),
+                            crate::nav_button!(&page.title, &page.icon, self.condensed, active)
-                                    text(&page.title).size(14).into(),
+                                .on_press(NavBarEvent::PageSelected(section_index, page_index))
-                                    ])
+                                .into(),
-                                    .width(Length::Units(100))
+                        );
-                                    .height(Length::Units(50))
-                                    .align_items(Alignment::Center),
-                            )
-                            .style(if let Some(selected_page) = state.selected_page {
-                                if page_index == selected_page {
-                                    theme::Button::Primary.into()
-                                } else {
-                                    theme::Button::Text.into()
-                                }
-                            } else {
-                                theme::Button::Text.into()
-                            }).on_press(NavBarEvent::PageSelected(section_index, page_index))
-                            .into()
-                        } else {
-                            button(row![
-                                icon(&page.icon, 20),
-                                text(&page.title).size(16).width(Length::Fill)
-                            ].spacing(10))
-                            .padding(10)
-                            .style(if let Some(selected_page) = state.selected_page {
-                                if page_index == selected_page {
-                                    theme::Button::Primary.into()
-                                } else {
-                                    theme::Button::Text.into()
-                                }
-                            } else {
-                                theme::Button::Text.into()
-                            })
-                            .on_press(NavBarEvent::PageSelected(section_index, page_index))
-                            .into()
-                        });
                     }
                 }
             }