feat: add nav_bar widget based on vertical view switcher

src/theme/segmented_button.rs

@@ -19,6 +19,7 @@ pub enum SegmentedButton {
 impl segmented_button::StyleSheet for Theme {
     type Style = SegmentedButton;
 
+    #[allow(clippy::too_many_lines)]
     fn horizontal(&self, style: &Self::Style) -> segmented_button::Appearance {
         match style {
             SegmentedButton::ViewSwitcher => {
@@ -146,6 +147,7 @@ impl segmented_button::StyleSheet for Theme {
         }
     }
 
+    #[allow(clippy::too_many_lines)]
     fn vertical(&self, style: &Self::Style) -> segmented_button::Appearance {
         match style {
             SegmentedButton::ViewSwitcher => {
@@ -153,7 +155,9 @@ impl segmented_button::StyleSheet for Theme {
                 segmented_button::Appearance {
                     border_radius: BorderRadius::from(0.0),
                     active: segmented_button::ButtonStatusAppearance {
-                        background: Some(Background::Color(cosmic.primary.component.base.into())),
+                        background: Some(Background::Color(
+                            cosmic.secondary.component.divider.into(),
+                        )),
                         first: segmented_button::ButtonAppearance {
                             border_radius: BorderRadius::from(24.0),
                             ..Default::default()

src/widget/mod.rs

@@ -13,12 +13,12 @@ pub use self::icon::{icon, Icon, IconSource};
 pub mod list;
 pub use self::list::*;
 
+pub mod nav_bar;
+pub use nav_bar::nav_bar;
+
 pub mod nav_button;
 pub use self::nav_button::{nav_button, NavButton};
 
-pub mod navigation;
-pub use navigation::*;
-
 mod toggler;
 pub use toggler::toggler;
 

src/widget/nav_bar.rs

@@ -0,0 +1,47 @@
+// Copyright 2022 System76 <info@system76.com>
+// SPDX-License-Identifier: MPL-2.0
+
+use apply::Apply;
+use iced::{
+    widget::{container, scrollable},
+    Background, Length,
+};
+use iced_core::Color;
+
+use crate::{theme, Theme};
+
+use super::segmented_button::{self, cosmic::vertical_view_switcher};
+
+/// A container holding a vertical view switcher with the n style
+pub fn nav_bar<Data, Message>(
+    state: &segmented_button::State<Data>,
+    on_activate: impl Fn(segmented_button::Key) -> Message + 'static,
+) -> iced::widget::Container<Message, crate::Renderer>
+where
+    Message: Clone + 'static,
+{
+    vertical_view_switcher(state)
+        .on_activate(on_activate)
+        .button_height(32)
+        .button_padding([16, 10, 16, 10])
+        .button_spacing(8)
+        .icon_size(16)
+        .spacing(14)
+        .apply(scrollable)
+        .apply(container)
+        .height(Length::Fill)
+        .padding(11)
+        .style(theme::Container::Custom(nav_bar_style))
+}
+
+#[must_use]
+pub fn nav_bar_style(theme: &Theme) -> iced_style::container::Appearance {
+    let cosmic = &theme.cosmic().primary;
+    iced_style::container::Appearance {
+        text_color: Some(cosmic.on.into()),
+        background: Some(Background::Color(cosmic.base.into())),
+        border_radius: 8.0,
+        border_width: 0.0,
+        border_color: Color::TRANSPARENT,
+    }
+}