Implement Expedias new Scalable Side Nav design - items with submenus and expand on click

Signed-off-by: hiba-aldalaty <hibaaldalaty@gmail.com>

packages/theme/src/themes.ts

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

packages/theme/src/types.ts

@@ -48,6 +48,15 @@ type PaletteAdditions = {
     indicator: string;
     color: string;
     selectedColor: string;
+    navItem: {
+      hoverBackground: string;
+    };
+    submenu: {
+      background: string;
+      indicator: string;
+      color: string;
+      selectedColor: string;
+    };
   };
   tabbar: {
     indicator: string;