Merge pull request #7521 from hiba-aldalaty/scalable-sidebar-new-implementation

New Scalable Side Nav design Implementation

packages/theme/api-report.md

@@ -41,6 +41,12 @@ export type BackstagePaletteAdditions = {
     indicator: string;
     color: string;
     selectedColor: string;
+    navItem?: {
+      hoverBackground: string;
+    };
+    submenu?: {
+      background: string;
+    };
   };
   tabbar: {
     indicator: string;

packages/theme/src/themes.ts

@@ -76,6 +76,12 @@ export const lightTheme = createTheme({
       indicator: '#9BF0E1',
       color: '#b5b5b5',
       selectedColor: '#FFF',
+      navItem: {
+        hoverBackground: '#404040',
+      },
+      submenu: {
+        background: '#404040',
+      },
     },
     pinSidebarButton: {
       icon: '#181818',
@@ -151,6 +157,12 @@ export const darkTheme = createTheme({
       indicator: '#9BF0E1',
       color: '#b5b5b5',
       selectedColor: '#FFF',
+      navItem: {
+        hoverBackground: '#404040',
+      },
+      submenu: {
+        background: '#404040',
+      },
     },
     pinSidebarButton: {
       icon: '#404040',

packages/theme/src/types.ts

@@ -53,6 +53,12 @@ export type BackstagePaletteAdditions = {
     indicator: string;
     color: string;
     selectedColor: string;
+    navItem?: {
+      hoverBackground: string;
+    };
+    submenu?: {
+      background: string;
+    };
   };
   tabbar: {
     indicator: string;