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>
This commit is contained in:
Adriano Tumino 2025-11-20 03:16:41 +01:00 committed by GitHub
parent 65c5bae745
commit 2e3387a76f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 47 additions and 18 deletions

View file

@ -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(

View file

@ -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| {