wip

crates/workspace/src/nav.rs

@@ -6,7 +6,7 @@ use gpui::{
     ParentElement, RenderOnce, SharedString, StatefulInteractiveElement as _, StyleRefinement,
     Styled, Window, div,
 };
-use gpui_kit::component::{ActiveTheme, Selectable, StyledExt as _, h_flex, v_flex};
+use gpui_kit::component::{ActiveTheme, Selectable, StyledExt as _, h_flex};
 
 /// A single navigation row, such as an entry in a sidebar list.
 #[derive(IntoElement)]
@@ -101,41 +101,27 @@ impl Styled for Nav {
 impl RenderOnce for Nav {
     fn render(self, _window: &mut Window, cx: &mut App) -> impl IntoElement {
         let clickable = self.on_click.is_some() || self.clickable;
-        let text_color = if self.selected {
-            cx.theme().foreground
-        } else {
-            cx.theme().muted_foreground
-        };
 
-        v_flex().h_10().w_full().justify_center().child(
-            h_flex()
-                .id(self.id)
-                .h_9()
-                .w_full()
-                .px_1p5()
-                .gap_1p5()
-                .rounded(cx.theme().radius)
-                .text_color(text_color)
-                .when_some(self.prefix, |this, prefix| this.child(prefix))
-                .child(
-                    h_flex()
-                        .gap_1()
-                        .flex_1()
-                        .min_w_0()
-                        .child(div().flex_1().min_w_0().truncate().child(self.label))
-                        .when_some(self.suffix, |this, suffix| {
-                            this.child(div().flex_shrink_0().child(suffix))
-                        }),
-                )
-                .when(clickable, |this| {
-                    this.cursor_pointer()
-                        .hover(|this| this.bg(cx.theme().accent))
-                        .when(self.selected, |this| this.bg(cx.theme().list_active))
-                })
-                .when_some(self.on_click, |this, handler| {
-                    this.on_click(move |event, window, cx| handler(event, window, cx))
-                })
-                .refine_style(&self.style),
-        )
+        h_flex()
+            .id(self.id)
+            .h_8()
+            .w_full()
+            .px_2()
+            .gap_2()
+            .rounded(cx.theme().radius)
+            .when_some(self.prefix, |this, prefix| this.child(prefix))
+            .child(div().flex_1().min_w_0().truncate().child(self.label))
+            .when_some(self.suffix, |this, suffix| {
+                this.child(div().flex_shrink_0().child(suffix))
+            })
+            .when(clickable, |this| {
+                this.cursor_pointer()
+                    .hover(|this| this.bg(cx.theme().list_hover))
+                    .when(self.selected, |this| this.bg(cx.theme().list_active))
+            })
+            .when_some(self.on_click, |this, handler| {
+                this.on_click(move |event, window, cx| handler(event, window, cx))
+            })
+            .refine_style(&self.style)
     }
 }