Fixed sidebar responsiveness

- Created new widget `scrollbar` which can adopt COSMIC styling.
- Increased sidebar icon size by 4 pixels to improve visibility.
- Added padding inside the navigation bar to prevent collision with the scrollbar.
- Increased the max width of the condensed navbar for the scrollbar.

examples/cosmic/src/main.rs

@@ -23,7 +23,7 @@ use cosmic::{
         row,
         slider,
         text,
-        scrollable,
+        scrollable
     },
     iced_lazy::responsive,
     iced_winit::window::drag,
@@ -141,9 +141,19 @@ impl Application for Window {
                     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 })
+                        ,
+                        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 }),
+                        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 }),
+                        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
+                    100
                 } else {
                     300
                 })
@@ -264,13 +274,13 @@ impl Application for Window {
                     if self.debug { content.explain(Color::WHITE) } else { content },
                     horizontal_space(Length::Fill),
                 ])
-                .scrollbar_width(12)
+                .scrollbar_width(8)
-                .scroller_width(6)
+                .scroller_width(8)
                 .into()
             );
 
             container(row(widgets))
-            .padding([16, 8])
+            .padding([16, 16])
             .width(Length::Fill)
             .height(Length::Fill)
             .into()

src/widget/mod.rs

@@ -15,3 +15,6 @@ pub use nav::*;
 
 mod toggler;
 pub use toggler::*;
+
+mod scrollbar;
+pub use scrollbar::*;

src/widget/nav.rs

@@ -9,12 +9,14 @@ use iced::{
 macro_rules! nav_bar {
     ($($x:expr),+ $(,)?) => (
         $crate::iced::widget::Container::new(
-            $crate::iced::widget::scrollable(
+            $crate::scrollbar!(
-                $crate::iced::widget::Column::with_children(
+                $crate::iced::widget::row![
-                    vec![$($crate::iced::Element::from($x)),+]
+                    $crate::iced::widget::Column::with_children(
-                )
+                        vec![$($crate::iced::Element::from($x)),+]
-                .spacing(12)
+                    )
-                .padding([0,20,0,0])
+                    .spacing(12)
+                    .padding(12),
+                ]
             )
         )
         .max_width(300)
@@ -43,12 +45,12 @@ macro_rules! nav_button {
     ($icon: expr, $title:expr, $condensed:expr) => ({
         if $condensed {
             $crate::iced::widget::Button::new(
-                $crate::widget::icon($icon, 16)
+                $crate::widget::icon($icon, 20)
             )
             .padding(8)
         } else {
             $crate::widget::button!(
-                $crate::widget::icon($icon, 16),
+                $crate::widget::icon($icon, 20),
                 $crate::iced::widget::Text::new($title),
                 $crate::iced::widget::horizontal_space(
                     $crate::iced::Length::Fill

src/widget/scrollbar.rs

@@ -0,0 +1,8 @@
+#[macro_export]
+macro_rules! scrollbar {
+    ($x:expr) => (
+        $crate::iced::widget::scrollable($x)
+            .scrollbar_width(8)
+            .scroller_width(8)
+    );
+}