From 4ae03278ccd95cb90311bf99fec610106c92cb0e Mon Sep 17 00:00:00 2001
From: Eduardo Flores <edfloreshz@gmail.com>
Date: Fri, 30 Sep 2022 18:43:32 -0700
Subject: [PATCH] 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 | 20 +++++++++++++++-----
 src/widget/mod.rs           |  3 +++
 src/widget/nav.rs           | 18 ++++++++++--------
 src/widget/scrollbar.rs     |  8 ++++++++
 4 files changed, 36 insertions(+), 13 deletions(-)
 create mode 100644 src/widget/scrollbar.rs

diff --git a/examples/cosmic/src/main.rs b/examples/cosmic/src/main.rs
index 5c123954..e3624b44 100644
--- a/examples/cosmic/src/main.rs
+++ b/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)
-                .scroller_width(6)
+                .scrollbar_width(8)
+                .scroller_width(8)
                 .into()
             );
 
             container(row(widgets))
-            .padding([16, 8])
+            .padding([16, 16])
             .width(Length::Fill)
             .height(Length::Fill)
             .into()
diff --git a/src/widget/mod.rs b/src/widget/mod.rs
index bb6b7764..e22aedcd 100644
--- a/src/widget/mod.rs
+++ b/src/widget/mod.rs
@@ -15,3 +15,6 @@ pub use nav::*;
 
 mod toggler;
 pub use toggler::*;
+
+mod scrollbar;
+pub use scrollbar::*;
\ No newline at end of file
diff --git a/src/widget/nav.rs b/src/widget/nav.rs
index c8664d26..9ecad9ba 100644
--- a/src/widget/nav.rs
+++ b/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::iced::widget::Column::with_children(
-                    vec![$($crate::iced::Element::from($x)),+]
-                )
-                .spacing(12)
-                .padding([0,20,0,0])
+            $crate::scrollbar!(
+                $crate::iced::widget::row![
+                    $crate::iced::widget::Column::with_children(
+                        vec![$($crate::iced::Element::from($x)),+]
+                    )
+                    .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
diff --git a/src/widget/scrollbar.rs b/src/widget/scrollbar.rs
new file mode 100644
index 00000000..ee31450c
--- /dev/null
+++ b/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)
+    );
+}
\ No newline at end of file