diff --git a/packages/fiori/src/SideNavigationItem.ts b/packages/fiori/src/SideNavigationItem.ts
index a02b8260676f..94e9d85548c2 100644
--- a/packages/fiori/src/SideNavigationItem.ts
+++ b/packages/fiori/src/SideNavigationItem.ts
@@ -10,7 +10,6 @@ import {
} from "@ui5/webcomponents-base/dist/Keys.js";
import type SideNavigationItemBase from "./SideNavigationItemBase.js";
import SideNavigationSelectableItemBase from "./SideNavigationSelectableItemBase.js";
-import type SideNavigation from "./SideNavigation.js";
import type SideNavigationSubItem from "./SideNavigationSubItem.js";
// Templates
@@ -134,7 +133,7 @@ class SideNavigationItem extends SideNavigationSelectableItemBase {
get classesArray() {
const classes = super.classesArray;
- if (!this.disabled && (this.parentNode as SideNavigation).collapsed && this.items.length) {
+ if (!this.disabled && this.sideNavigation?.collapsed && this.items.length) {
classes.push("ui5-sn-item-with-expander");
}
diff --git a/packages/fiori/src/themes/NavigationMenuItem.css b/packages/fiori/src/themes/NavigationMenuItem.css
index d4fa94c307cc..749a19e97665 100644
--- a/packages/fiori/src/themes/NavigationMenuItem.css
+++ b/packages/fiori/src/themes/NavigationMenuItem.css
@@ -48,7 +48,6 @@
}
.ui5-navigation-menu-item-root .ui5-sn-item-external-link-icon {
- min-width: 2rem;
height: 0.875rem;
}
diff --git a/packages/fiori/src/themes/SideNavigationItemBase.css b/packages/fiori/src/themes/SideNavigationItemBase.css
index 007d14923a5b..3450c4fcc03e 100644
--- a/packages/fiori/src/themes/SideNavigationItemBase.css
+++ b/packages/fiori/src/themes/SideNavigationItemBase.css
@@ -7,7 +7,7 @@
.ui5-sn-item {
display: flex;
align-items: center;
- width: 100%;
+ width: auto;
box-sizing: border-box;
text-decoration: none;
position: relative;
@@ -29,7 +29,33 @@
}
:host([design="Action"]) {
- color: var(--sapButton_TextColor);
+ color: var(--sapButton_TextColor);
+}
+
+:host([design="Action"]) .ui5-sn-item:not(.ui5-sn-item-disabled):active [ui5-icon],
+:host([design="Action"]) .ui5-sn-item:not(.ui5-sn-item-disabled):active .ui5-sn-item-text {
+ color: var(--_ui5_side_navigation_active_text_color);
+}
+
+:host([design="Action"]) .ui5-sn-item {
+ border: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor);
+ box-sizing: content-box;
+}
+
+:host([design="Action"]:not([side-nav-collapsed])) .ui5-sn-item {
+ max-width: -moz-available;
+ max-width: -webkit-fill-available;
+ max-width: fill-available;
+}
+
+:host([design="Action"]) .ui5-sn-item:not(.ui5-sn-item-disabled):hover {
+ border: var(--_ui5_side_navigation_action_item_border_hover);
+ background: var(--sapButton_Hover_Background);
+}
+
+:host([design="Action"]) .ui5-sn-item:not(.ui5-sn-item-disabled):active {
+ border: var(--_ui5_side_navigation_action_item_border_active);
+ background: var(--sapButton_Active_Background);
}
.ui5-sn-item:focus {
@@ -123,7 +149,7 @@ and there is an additional border that appears on hover. */
border-width: var(--_ui5_side_navigation_selected_border_width);
}
-.ui5-sn-item:not(.ui5-sn-item-disabled):not(.ui5-sn-item-selected):hover::before {
+:host(:not([design="Action"])) .ui5-sn-item:not(.ui5-sn-item-disabled):not(.ui5-sn-item-selected):hover::before {
border: var(--_ui5_side_navigation_hover_border_style_color);
border-width: var(--_ui5_side_navigation_hover_border_width);
}
@@ -157,15 +183,29 @@ and there is an additional border that appears on hover. */
:host([design="Action"]) .ui5-sn-item-external-link-icon {
color: var(--sapButton_TextColor);
}
-
-:host(:not([side-nav-collapsed])) .ui5-sn-item-toggle-icon,
.ui5-sn-item-external-link-icon {
+ min-width: 3rem;
+}
+
+:host([side-nav-collapsed]) .ui5-sn-item:not(.ui5-sn-item-active):not(.ui5-sn-item-no-hover-effect):hover .ui5-sn-item-toggle-icon,
+:host([side-nav-collapsed]) .ui5-sn-item:not(.ui5-sn-item-active):not(.ui5-sn-item-no-hover-effect):focus .ui5-sn-item-toggle-icon,
+:host(:not([side-nav-collapsed])) .ui5-sn-item-toggle-icon {
min-width: var(--_ui5_side_navigation_expand_icon_width);
+ padding-inline: 0.25rem 0.375rem;
+ padding-block: 0.25rem; /* height of the separator (the border left) should be --sapElement_Condensed_Heightwhich is equal to 1.375rem (22px) */
+ border-inline-start: 0.0625rem solid var(--sapTextColor);
+ margin-inline-start: 1rem;
+}
+
+:host([unselectable]:not([side-nav-collapsed])) .ui5-sn-item-toggle-icon,
+:host(:not([side-nav-collapsed])) .ui5-sn-item-group .ui5-sn-item-toggle-icon,
+:host([unselectable][side-nav-collapsed]) .ui5-sn-item:not(.ui5-sn-item-active):not(.ui5-sn-item-no-hover-effect):hover .ui5-sn-item-toggle-icon,
+:host([unselectable][side-nav-collapsed]) .ui5-sn-item:not(.ui5-sn-item-active):not(.ui5-sn-item-no-hover-effect):focus .ui5-sn-item-toggle-icon {
+ border-inline-start: none;
}
:host([in-popover]) .ui5-sn-item-toggle-icon {
display: none;
- min-width: var(--_ui5_side_navigation_expand_icon_width);
}
:host([side-nav-collapsed]) .ui5-sn-item {
@@ -175,11 +215,15 @@ and there is an additional border that appears on hover. */
:host([slot="fixedItems"]:not(side-nav-collapsed)) .ui5-sn-item.ui5-sn-item-level1 {
margin-top: var(--_ui5_side_navigation_first_fixed_item_margin_top); /* space for the focus*/
}
-
:host([side-nav-collapsed]) .ui5-sn-item-icon {
padding-inline-end: 1rem;
}
+:host([design="Action"][side-nav-collapsed]) .ui5-sn-item-icon {
+ padding-inline-end: calc(1rem - 1px); /* minus the width of the border */
+ padding-inline-start: calc(1rem - 1px); /* minus the width of the border */
+}
+
:host([side-nav-collapsed]) .ui5-sn-item-text {
display: none;
}
@@ -203,13 +247,30 @@ and there is an additional border that appears on hover. */
padding-inline-end: var(--_ui5_side_navigation_item_collapsed_padding_right);
}
+:host([side-nav-collapsed]) a.ui5-sn-item:not(.ui5-sn-item-active):not(.ui5-sn-item-no-hover-effect):hover:not(.ui5-sn-item-with-expander),
+:host([side-nav-collapsed]) a.ui5-sn-item:not(.ui5-sn-item-active):not(.ui5-sn-item-no-hover-effect):focus:not(.ui5-sn-item-with-expander) {
+ padding-inline-end: 0;
+}
+
+:host([unselectable][side-nav-collapsed]) .ui5-sn-item.ui5-sn-item.ui5-sn-item-with-expander:not(.ui5-sn-item-active):not(.ui5-sn-item-no-hover-effect):hover,
+:host([unselectable][side-nav-collapsed]) .ui5-sn-item.ui5-sn-item.ui5-sn-item-with-expander:not(.ui5-sn-item-active):not(.ui5-sn-item-no-hover-effect):focus {
+ padding-inline-end: var(--_ui5_side_navigation_item_collapsed_unselectable_padding);
+}
+
+:host([unselectable][side-nav-collapsed]) div.ui5-sn-item:not(.ui5-sn-item-active):not(.ui5-sn-item-no-hover-effect):not(.ui5-sn-item-with-expander):hover,
+:host([unselectable][side-nav-collapsed]) div.ui5-sn-item:not(.ui5-sn-item-active):not(.ui5-sn-item-no-hover-effect):not(.ui5-sn-item-with-expander):focus {
+ padding-inline-end: var(--_ui5_side_navigation_action_item_collapsed_padding);
+}
+
:host([side-nav-collapsed]) .ui5-sn-item.ui5-sn-item-selected:hover,
:host([side-nav-collapsed]) .ui5-sn-item.ui5-sn-item-selected:focus {
background: var(--sapList_SelectionBackgroundColor);
}
-:host([side-nav-collapsed]) .ui5-sn-item:not(.ui5-sn-item-active):not(.ui5-sn-item-no-hover-effect):hover:not(.ui5-sn-item-with-expander),
-:host([side-nav-collapsed]) .ui5-sn-item:not(.ui5-sn-item-active):not(.ui5-sn-item-no-hover-effect):focus:not(.ui5-sn-item-with-expander) {
+:host([side-nav-collapsed]) div.ui5-sn-item:not(.ui5-sn-item-active):not(.ui5-sn-item-no-hover-effect):hover:not(.ui5-sn-item-with-expander),
+:host([side-nav-collapsed]) div.ui5-sn-item:not(.ui5-sn-item-active):not(.ui5-sn-item-no-hover-effect):focus:not(.ui5-sn-item-with-expander),
+:host([side-nav-collapsed]) a.ui5-sn-item:not(.ui5-sn-item-active):not(.ui5-sn-item-no-hover-effect):hover:not(.ui5-sn-item-with-expander):not([target="_blank"]),
+:host([side-nav-collapsed]) a.ui5-sn-item:not(.ui5-sn-item-active):not(.ui5-sn-item-no-hover-effect):focus:not(.ui5-sn-item-with-expander):not([target="_blank"]) {
padding-inline-end: var(--_ui5_side_navigation_item_collapsed_hover_focus_padding_right);
}
@@ -253,5 +314,5 @@ and there is an additional border that appears on hover. */
}
.ui5-sn-item-separator {
- min-height: 0.5rem;
+ min-height: 0.625rem;
}
diff --git a/packages/fiori/src/themes/base/SideNavigation-parameters.css b/packages/fiori/src/themes/base/SideNavigation-parameters.css
index a18fcc6db5a8..0a145197fcbf 100644
--- a/packages/fiori/src/themes/base/SideNavigation-parameters.css
+++ b/packages/fiori/src/themes/base/SideNavigation-parameters.css
@@ -19,6 +19,7 @@
--_ui5_side_navigation_icon_color: var(--sapContent_IconColor);
--_ui5_side_navigation_expand_icon_color: var(--sapContent_IconColor);
--_ui5_side_navigation_expand_icon_width: 2rem;
+ --_ui5_side_navigation_external_link_width: 3rem;
--_ui5_side_navigation_hover_border_style_color: none;
--_ui5_side_navigation_hover_border_width: 0;
--_ui5_side_navigation_group_border_style_color: solid var(--sapList_BorderColor);
@@ -64,14 +65,19 @@
--_ui5_side_navigation_first_fixed_item_margin_top: 0;
--_ui5_side_navigation_item_expand_icon_visibility: none;
- --_ui5_side_navigation_item_collapsed_hover_focus_width: 100%;
+ --_ui5_side_navigation_item_collapsed_hover_focus_width: auto;
--_ui5_side_navigation_item_collapsed_hover_focus_display: none;
--_ui5_side_navigation_item_collapsed_hover_focus_padding_right: 0;
--_ui5_side_navigation_item_collapsed_padding_right: 0;
+ --_ui5_side_navigation_action_item_collapsed_padding: 0;
+ --_ui5_side_navigation_item_collapsed_unselectable_padding: 0;
+ --_ui5_side_navigation_action_item_border_hover: var(--sapButton_BorderWidth) solid var(--sapButton_Hover_BorderColor);
+ --_ui5_side_navigation_action_item_border_active: var(--sapButton_BorderWidth) solid var(--sapButton_Active_BorderColor);
--_ui5_side_navigation_item_expand_icon_right: -0.5rem;
--_ui5_side_navigation_item_expand_icon_hover_left: auto;
--_ui5_side_navigation_item_expand_icon_hover_right: 0;
+ --_ui5_side_navigation_active_text_color: var(--sapList_Active_TextColor);
}
[data-ui5-compact-size],
diff --git a/packages/fiori/src/themes/sap_horizon/SideNavigation-parameters.css b/packages/fiori/src/themes/sap_horizon/SideNavigation-parameters.css
index 880c6a0efca6..77bf9864918a 100644
--- a/packages/fiori/src/themes/sap_horizon/SideNavigation-parameters.css
+++ b/packages/fiori/src/themes/sap_horizon/SideNavigation-parameters.css
@@ -17,7 +17,8 @@
--_ui5_side_navigation_icon_color: var(--sapList_TextColor);
--_ui5_side_navigation_expand_icon_color: var(--sapList_TextColor);
- --_ui5_side_navigation_expand_icon_width: 3rem;
+ --_ui5_side_navigation_expand_icon_width: 2.25rem;
+ --_ui5_side_navigation_external_link_width: 3rem;
--_ui5_side_navigation_group_border_style_color: none;
--_ui5_side_navigation_item_border_radius: 0.375rem;
--_ui5_side_navigation_item_bottom_margin: 0.25rem;
@@ -47,12 +48,15 @@
--_ui5_side_navigation_popup_title_line_height: 1.5rem;
--_ui5_side_navigation_selection_indicator_display: inline-block;
--_ui5_side_navigation_first_fixed_item_margin_top: 0.125rem;
+ --_ui5_side_navigation_active_text_color: var(--sapButton_TextColor);
--_ui5_side_navigation_item_expand_icon_visibility: block;
--_ui5_side_navigation_item_collapsed_hover_focus_width: fit-content;
--_ui5_side_navigation_item_collapsed_hover_focus_display: block;
- --_ui5_side_navigation_item_collapsed_hover_focus_padding_right: 2rem;
- --_ui5_side_navigation_item_collapsed_padding_right: 2rem;
+ --_ui5_side_navigation_item_collapsed_hover_focus_padding_right: 1rem;
+ --_ui5_side_navigation_item_collapsed_padding_right: 3.9375rem;
+ --_ui5_side_navigation_action_item_collapsed_padding: 1rem;
+ --_ui5_side_navigation_item_collapsed_unselectable_padding: 3rem;
}
[data-ui5-compact-size],
diff --git a/packages/fiori/src/themes/sap_horizon_dark/SideNavigation-parameters.css b/packages/fiori/src/themes/sap_horizon_dark/SideNavigation-parameters.css
index adb79b50417b..5c0357147874 100644
--- a/packages/fiori/src/themes/sap_horizon_dark/SideNavigation-parameters.css
+++ b/packages/fiori/src/themes/sap_horizon_dark/SideNavigation-parameters.css
@@ -17,7 +17,8 @@
--_ui5_side_navigation_icon_color: var(--sapList_TextColor);
--_ui5_side_navigation_expand_icon_color: var(--sapList_TextColor);
- --_ui5_side_navigation_expand_icon_width: 3rem;
+ --_ui5_side_navigation_expand_icon_width: 2.25rem;
+ --_ui5_side_navigation_external_link_width: 3rem;
--_ui5_side_navigation_group_border_style_color: none;
--_ui5_side_navigation_item_border_radius: 0.375rem;
--_ui5_side_navigation_item_bottom_margin: 0.25rem;
@@ -47,12 +48,15 @@
--_ui5_side_navigation_popup_title_line_height: 1.5rem;
--_ui5_side_navigation_selection_indicator_display: inline-block;
--_ui5_side_navigation_first_fixed_item_margin_top: 0.125rem;
+ --_ui5_side_navigation_active_text_color: var(--sapButton_TextColor);
--_ui5_side_navigation_item_expand_icon_visibility: block;
--_ui5_side_navigation_item_collapsed_hover_focus_width: fit-content;
--_ui5_side_navigation_item_collapsed_hover_focus_display: block;
- --_ui5_side_navigation_item_collapsed_hover_focus_padding_right: 2rem;
- --_ui5_side_navigation_item_collapsed_padding_right: 2rem;
+ --_ui5_side_navigation_item_collapsed_hover_focus_padding_right: 1rem;
+ --_ui5_side_navigation_item_collapsed_padding_right: 3.9375rem;
+ --_ui5_side_navigation_action_item_collapsed_padding: 1rem;
+ --_ui5_side_navigation_item_collapsed_unselectable_padding: 3rem;
}
[data-ui5-compact-size],
diff --git a/packages/fiori/src/themes/sap_horizon_hcb/SideNavigation-parameters.css b/packages/fiori/src/themes/sap_horizon_hcb/SideNavigation-parameters.css
index 04ac0fdde34c..309c9924372b 100644
--- a/packages/fiori/src/themes/sap_horizon_hcb/SideNavigation-parameters.css
+++ b/packages/fiori/src/themes/sap_horizon_hcb/SideNavigation-parameters.css
@@ -13,7 +13,8 @@
--_ui5_side_navigation_phone_width: 100% !important;
--_ui5_side_navigation_expand_icon_color: var(--sapContent_NonInteractiveIconColor);
- --_ui5_side_navigation_expand_icon_width: 3rem;
+ --_ui5_side_navigation_expand_icon_width: 2.25rem;
+ --_ui5_side_navigation_external_link_width: 3rem;
--_ui5_side_navigation_item_bottom_margin: 0.25rem;
--_ui5_side_navigation_item_focus_border_offset: 0;
--_ui5_side_navigation_item_border_style_color: solid var(--sapList_BorderColor);
@@ -43,12 +44,17 @@
--_ui5_side_navigation_popup_title_line_height: 1.5rem;
--_ui5_side_navigation_selection_indicator_display: block;
--_ui5_side_navigation_first_fixed_item_margin_top: 0.125rem;
+ --_ui5_side_navigation_active_text_color: var(--sapButton_TextColor);
--_ui5_side_navigation_item_expand_icon_visibility: block;
--_ui5_side_navigation_item_collapsed_hover_focus_width: fit-content;
--_ui5_side_navigation_item_collapsed_hover_focus_display: block;
- --_ui5_side_navigation_item_collapsed_hover_focus_padding_right: 2rem;
- --_ui5_side_navigation_item_collapsed_padding_right: 2rem;
+ --_ui5_side_navigation_item_collapsed_hover_focus_padding_right: 1rem;
+ --_ui5_side_navigation_item_collapsed_padding_right: 3.9375rem;
+ --_ui5_side_navigation_action_item_collapsed_padding: 1rem;
+ --_ui5_side_navigation_item_collapsed_unselectable_padding: 3rem;
+ --_ui5_side_navigation_action_item_border_hover: var(--sapElement_BorderWidth) solid var(--sapButton_Hover_BorderColor); /*var(--sapList_BorderColor);*/
+ --_ui5_side_navigation_action_item_border_active: var(--_ui5_side_navigation_action_item_border_hover);
}
[data-ui5-compact-size],
diff --git a/packages/fiori/src/themes/sap_horizon_hcw/SideNavigation-parameters.css b/packages/fiori/src/themes/sap_horizon_hcw/SideNavigation-parameters.css
index 04ac0fdde34c..47293e4e8a20 100644
--- a/packages/fiori/src/themes/sap_horizon_hcw/SideNavigation-parameters.css
+++ b/packages/fiori/src/themes/sap_horizon_hcw/SideNavigation-parameters.css
@@ -13,7 +13,8 @@
--_ui5_side_navigation_phone_width: 100% !important;
--_ui5_side_navigation_expand_icon_color: var(--sapContent_NonInteractiveIconColor);
- --_ui5_side_navigation_expand_icon_width: 3rem;
+ --_ui5_side_navigation_expand_icon_width: 2.25rem;
+ --_ui5_side_navigation_external_link_width: 3rem;
--_ui5_side_navigation_item_bottom_margin: 0.25rem;
--_ui5_side_navigation_item_focus_border_offset: 0;
--_ui5_side_navigation_item_border_style_color: solid var(--sapList_BorderColor);
@@ -43,12 +44,17 @@
--_ui5_side_navigation_popup_title_line_height: 1.5rem;
--_ui5_side_navigation_selection_indicator_display: block;
--_ui5_side_navigation_first_fixed_item_margin_top: 0.125rem;
+ --_ui5_side_navigation_active_text_color: var(--sapButton_TextColor);
--_ui5_side_navigation_item_expand_icon_visibility: block;
--_ui5_side_navigation_item_collapsed_hover_focus_width: fit-content;
--_ui5_side_navigation_item_collapsed_hover_focus_display: block;
- --_ui5_side_navigation_item_collapsed_hover_focus_padding_right: 2rem;
- --_ui5_side_navigation_item_collapsed_padding_right: 2rem;
+ --_ui5_side_navigation_item_collapsed_hover_focus_padding_right: 1rem;
+ --_ui5_side_navigation_item_collapsed_padding_right: 3.9375rem;
+ --_ui5_side_navigation_action_item_collapsed_padding: 1rem;
+ --_ui5_side_navigation_item_collapsed_unselectable_padding: 3rem;
+ --_ui5_side_navigation_action_item_border_hover: var(--sapElement_BorderWidth) solid var(--sapButton_Hover_BorderColor); /*var(--sapList_BorderColor);*/
+ --_ui5_side_navigation_action_item_border_active: var(--_ui5_side_navigation_action_item_border_hover);
}
[data-ui5-compact-size],
diff --git a/packages/fiori/test/pages/SideNavigation.html b/packages/fiori/test/pages/SideNavigation.html
index 670287db1238..5924bfd73170 100644
--- a/packages/fiori/test/pages/SideNavigation.html
+++ b/packages/fiori/test/pages/SideNavigation.html
@@ -63,6 +63,7 @@
<ui5-side-navigation-item design="Action" text="Quick Create" icon="write-new" unselectable>
<ui5-side-navigation-sub-item design="Action" text="Quick Create" unselectable></ui5-side-navigation-sub-item>
</ui5-side-navigation-item>
+ <ui5-side-navigation-item design="Action" text="Quick Create" icon="write-new" disabled unselectable></ui5-side-navigation-item>
<ui5-side-navigation-item design="Action" href="https://sap.com" target="_blank" text="Quick Create" icon="write-new" unselectable></ui5-side-navigation-item>
<!-- Fixed Items -->
diff --git a/packages/fiori/test/pages/SideNavigationWithGroups.html b/packages/fiori/test/pages/SideNavigationWithGroups.html
index fe0b34ddc9b0..1df86fc03e37 100644
--- a/packages/fiori/test/pages/SideNavigationWithGroups.html
+++ b/packages/fiori/test/pages/SideNavigationWithGroups.html
@@ -23,6 +23,10 @@
<ui5-side-navigation-sub-item href="#disabled" disabled text="Disabled" icon="employee-approvals" title="From My Team tooltip"></ui5-side-navigation-sub-item>
<ui5-side-navigation-sub-item text="From Other Teams" icon="employee-rejections"></ui5-side-navigation-sub-item>
</ui5-side-navigation-item>
+ <ui5-side-navigation-item text="People unselectable" href="#people" expanded unselectable icon="group">
+ <ui5-side-navigation-sub-item href="#disabled" disabled text="Disabled" icon="employee-approvals" title="From My Team tooltip"></ui5-side-navigation-sub-item>
+ <ui5-side-navigation-sub-item text="From Other Teams" icon="employee-rejections"></ui5-side-navigation-sub-item>
+ </ui5-side-navigation-item>
</ui5-side-navigation-group>
<ui5-side-navigation-item href="#locations" text="Locations" icon="locate-me" ></ui5-side-navigation-item>
<ui5-side-navigation-item href="#events" expanded text="Events.............................................................." icon="calendar">
@@ -79,6 +83,7 @@
<ui5-side-navigation-sub-item icon="female" text="Others"></ui5-side-navigation-sub-item>
</ui5-side-navigation-item>
<!-- Fixed Items -->
+ <ui5-side-navigation-item slot="fixedItems" text="Quick Create" icon="write-new" design="Action" unselectable id="quickCreate"></ui5-side-navigation-item>
<ui5-side-navigation-item slot="fixedItems" text="Useful Links" icon="chain-link" title="Useful links tooltip">
<ui5-side-navigation-sub-item text="Vacation Tool" title="Vacation Tool tooltip"></ui5-side-navigation-sub-item>
<ui5-side-navigation-sub-item text="HR tool"></ui5-side-navigation-sub-item>