From 2e3387a76ffd4c6b305bb50e2a433f0e6d2bcdfa Mon Sep 17 00:00:00 2001
From: Adriano Tumino <69964279+adriano-tumino@users.noreply.github.com>
Date: Thu, 20 Nov 2025 03:16:41 +0100
Subject: [PATCH] sidebar: Add to support disable state to sidebar item.
 (#1645)

Hello,
I added a disabled flag to turn off the SidebarmenuItem

<img width="735" height="528" alt="image"
src="https://github.com/user-attachments/assets/47f60476-004c-4fe5-9baf-519d16b93f93"
/>

---------

Co-authored-by: TUMINOA <adriano.tumino@leonardocompany.com>
Co-authored-by: Jason Lee <huacnlee@gmail.com>
---
 crates/story/src/sidebar_story.rs | 16 ++++++++++
 crates/ui/src/sidebar/menu.rs     | 49 +++++++++++++++++++------------
 2 files changed, 47 insertions(+), 18 deletions(-)

diff --git a/crates/story/src/sidebar_story.rs b/crates/story/src/sidebar_story.rs
index ebfb8f58..b32b0d2c 100644
--- a/crates/story/src/sidebar_story.rs
+++ b/crates/story/src/sidebar_story.rs
@@ -125,6 +125,13 @@ impl Item {
         }
     }
 
+    pub fn is_disabled(&self) -> bool {
+        match self {
+            Self::Travel => true,
+            _ => false,
+        }
+    }
+
     pub fn icon(&self) -> IconName {
         match self {
             Self::Playground => IconName::SquareTerminal,
@@ -196,6 +203,13 @@ impl SubItem {
         }
     }
 
+    pub fn is_disabled(&self) -> bool {
+        match self {
+            Self::Quantum => true,
+            _ => false,
+        }
+    }
+
     pub fn handler(
         &self,
         item: &Item,
@@ -336,6 +350,7 @@ impl Render for SidebarStory {
                                         |(ix, sub_item)| {
                                             SidebarMenuItem::new(sub_item.label())
                                                 .active(self.active_subitem == Some(sub_item))
+                                                .disable(sub_item.is_disabled())
                                                 .when(ix == 0, |this| {
                                                     this.suffix(
                                                         Switch::new("switch")
@@ -363,6 +378,7 @@ impl Render for SidebarStory {
                                 SidebarMenuItem::new(item.label())
                                     .icon(item.icon())
                                     .active(is_active)
+                                    .disable(item.is_disabled())
                                     .click_to_open(self.click_to_open_submenu)
                                     .when(ix == 0, |this| {
                                         this.suffix(
diff --git a/crates/ui/src/sidebar/menu.rs b/crates/ui/src/sidebar/menu.rs
index 0d535d98..ff3c83f7 100644
--- a/crates/ui/src/sidebar/menu.rs
+++ b/crates/ui/src/sidebar/menu.rs
@@ -78,6 +78,7 @@ pub struct SidebarMenuItem {
     collapsed: bool,
     children: Vec<Self>,
     suffix: Option<AnyElement>,
+    disabled: bool,
 }
 
 impl SidebarMenuItem {
@@ -94,6 +95,7 @@ impl SidebarMenuItem {
             click_to_open: false,
             children: Vec::new(),
             suffix: None,
+            disabled: false,
         }
     }
 
@@ -153,6 +155,12 @@ impl SidebarMenuItem {
         self
     }
 
+    /// Set disabled flat for menu item.
+    pub fn disable(mut self, disable: bool) -> Self {
+        self.disabled = disable;
+        self
+    }
+
     /// Set id to the menu item.
     fn id(mut self, id: impl Into<ElementId>) -> Self {
         self.id = id.into();
@@ -173,6 +181,8 @@ impl RenderOnce for SidebarMenuItem {
         let handler = self.handler.clone();
         let is_collapsed = self.collapsed;
         let is_active = self.active;
+        let is_hoverable = !is_active && !self.disabled;
+        let is_disabled = self.disabled;
         let is_submenu = self.is_submenu();
         let is_open = is_submenu && !is_collapsed && *open_state.read(cx);
 
@@ -189,13 +199,11 @@ impl RenderOnce for SidebarMenuItem {
                     .gap_x_2()
                     .rounded(cx.theme().radius)
                     .text_sm()
-                    .hover(|this| {
-                        if is_active {
-                            return this;
-                        }
-
-                        this.bg(cx.theme().sidebar_accent.opacity(0.8))
-                            .text_color(cx.theme().sidebar_accent_foreground)
+                    .when(is_hoverable, |this| {
+                        this.hover(|this| {
+                            this.bg(cx.theme().sidebar_accent.opacity(0.8))
+                                .text_color(cx.theme().sidebar_accent_foreground)
+                        })
                     })
                     .when(is_active, |this| {
                         this.font_medium()
@@ -251,18 +259,23 @@ impl RenderOnce for SidebarMenuItem {
                                 )
                             })
                     })
-                    .on_click({
-                        let open_state = open_state.clone();
-                        move |ev, window, cx| {
-                            if click_to_open {
-                                open_state.update(cx, |is_open, cx| {
-                                    *is_open = true;
-                                    cx.notify();
-                                });
-                            }
+                    .when(is_disabled, |this| {
+                        this.text_color(cx.theme().muted_foreground)
+                    })
+                    .when(!is_disabled, |this| {
+                        this.on_click({
+                            let open_state = open_state.clone();
+                            move |ev, window, cx| {
+                                if click_to_open {
+                                    open_state.update(cx, |is_open, cx| {
+                                        *is_open = true;
+                                        cx.notify();
+                                    });
+                                }
 
-                            handler(ev, window, cx)
-                        }
+                                handler(ev, window, cx)
+                            }
+                        })
                     }),
             )
             .when(is_open, |this| {