[navigation-next] Add CollapsibleNavGroupEnabled component into chrom…

…e_service.(#7093)

Signed-off-by: SuZhou-Joe <[email protected]>

src/core/public/chrome/chrome_service.tsx

@@ -112,7 +112,7 @@ export interface StartDeps {
   overlays: OverlayStart;
 }
 
-type CollapsibleNavHeaderRender = () => JSX.Element | null;
+export type CollapsibleNavHeaderRender = () => JSX.Element | null;
 
 export type NavGroupItemInMap = ChromeNavGroup & {
   navLinks: ChromeRegistrationNavLink[];
@@ -349,6 +349,8 @@ export class ChromeService {
           survey={injectedMetadata.getSurvey()}
           collapsibleNavHeaderRender={this.collapsibleNavHeaderRender}
           sidecarConfig$={sidecarConfig$}
+          navGroupsMap$={this.navGroupsMap$}
+          navGroupEnabled={this.navGroupEnabled}
         />
       ),
 

src/core/public/chrome/ui/header/collapsible_nav.tsx

@@ -51,6 +51,7 @@ import { HttpStart } from '../../../http';
 import { OnIsLockedUpdate } from './';
 import { createEuiListItem, createRecentNavLink, isModifiedOrPrevented } from './nav_link';
 import type { Logos } from '../../../../common/types';
+import { CollapsibleNavHeaderRender } from '../../chrome_service';
 
 function getAllCategories(allCategorizedLinks: Record<string, ChromeNavLink[]>) {
   const allCategories = {} as Record<string, AppCategory | undefined>;
@@ -89,7 +90,7 @@ function setIsCategoryOpen(id: string, isOpen: boolean, storage: Storage) {
 interface Props {
   appId$: InternalApplicationStart['currentAppId$'];
   basePath: HttpStart['basePath'];
-  collapsibleNavHeaderRender?: () => JSX.Element | null;
+  collapsibleNavHeaderRender?: CollapsibleNavHeaderRender;
   id: string;
   isLocked: boolean;
   isNavOpen: boolean;

src/core/public/chrome/ui/header/collapsible_nav_group_enabled.scss

@@ -0,0 +1,25 @@
+.context-nav-wrapper {
+  background-color: $ouiCollapsibleNavBackgroundColor;
+
+  .full-width {
+    width: 100%;
+  }
+
+  .no-padding {
+    padding: 0;
+  }
+
+  .no-hover {
+    &:hover {
+      text-decoration: none;
+    }
+  }
+
+  .wrapper {
+    overflow-y: auto;
+  }
+
+  .second-navigation {
+    border-left: $euiBorderThin;
+  }
+}