[navigation] Fit and finish issues collective for left nav and landing page

changelogs/fragments/8140.yml

@@ -0,0 +1,2 @@
+feat:
+- [navigation] Adjust the appearances of the left navigation menu and the landing page ([#8140](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8140))

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

@@ -2,32 +2,29 @@
   border: none !important;
 
   .nav-link-item {
-    padding: calc($euiSize / 4) $euiSize;
-    border-radius: $euiSize;
+    padding: $euiSizeXS $euiSizeS;
+    border-radius: $euiSizeS;
     box-shadow: none;
     margin-bottom: 0;
     margin-top: 0;
 
     .nav-link-item-btn {
       margin-bottom: 0;
-
-      &::after {
-        display: none;
-      }
     }
   }
 
-  .nav-link-parent-item-button {
-    > span {
-      flex-direction: row-reverse;
+  .nav-link-item-category-item {
+    margin-top: $euiSizeL;
 
-      > * {
-        margin-right: $euiSizeS;
-        margin-left: 2px;
-      }
+    > * {
+      margin-bottom: 0;
     }
   }
 
+  .nav-link-item-category-title {
+    padding: 0;
+  }
+
   .nav-link-fake-item {
     margin-top: 0;
   }
@@ -37,15 +34,11 @@
   }
 
   .nav-nested-item {
-    margin-bottom: 4px;
+    padding: $euiSizeS 0;
 
-    &::after {
-      height: unset;
-    }
-
-    .nav-link-item-btn {
-      padding-left: 0;
-      padding-right: 0;
+    // The height is used to comply with the extra padding
+    &:last-of-type::after {
+      height: 50%;
     }
   }
 

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

@@ -324,6 +324,7 @@ export function CollapsibleNavGroupEnabled({
             paddingSize={!isNavOpen ? 's' : 'l'}
             hasShadow={false}
             className="eui-yScroll flex-1-container"
+            style={{ paddingTop: 0 }}
           >
             {shouldShowCollapsedNavHeaderContent && collapsibleNavHeaderRender ? (
               <>
@@ -369,17 +370,17 @@ export function CollapsibleNavGroupEnabled({
   return (
     <>
       <EuiHideFor sizes={['xs', 's', 'm']}>{rendeLeftNav()}</EuiHideFor>
-      <EuiShowFor sizes={['xs', 's', 'm']}>
-        {isNavOpen
-          ? rendeLeftNav({
-              type: 'overlay',
-              size: undefined,
-              outsideClickCloses: true,
-              paddingSize: undefined,
-              ownFocus: true,
-            })
-          : null}
-      </EuiShowFor>
+      {isNavOpen ? (
+        <EuiShowFor sizes={['xs', 's', 'm']}>
+          {rendeLeftNav({
+            type: 'overlay',
+            size: undefined,
+            outsideClickCloses: true,
+            paddingSize: undefined,
+            ownFocus: true,
+          })}
+        </EuiShowFor>
+      ) : null}
     </>
   );
 }

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

@@ -22,7 +22,6 @@ import { ChromeNavGroupServiceStartContract, NavGroupItemInMap } from '../../nav
 import { ChromeNavLink } from '../../nav_links';
 import { ALL_USE_CASE_ID } from '../../../../../core/utils';
 import { fulfillRegistrationLinksToChromeNavLinks } from '../../utils';
-import './collapsible_nav_group_enabled_top.scss';
 
 export interface CollapsibleNavTopProps {
   homeLink?: ChromeNavLink;
@@ -131,8 +130,8 @@ export const CollapsibleNavTop = ({
               <EuiIcon
                 type={icon}
                 size="l"
-                className="leftNavTopIcon"
                 data-test-subj={`collapsibleNavIcon-${icon}`}
+                color={currentWorkspace?.color}
               />
             </EuiButtonEmpty>
           </EuiFlexItem>
@@ -151,7 +150,9 @@ export const CollapsibleNavTop = ({
       {currentNavGroup?.title && (
         <>
           <EuiSpacer />
-          <EuiText>{currentNavGroup?.title}</EuiText>
+          <EuiText size="s">
+            <h3>{currentNavGroup?.title}</h3>
+          </EuiText>
         </>
       )}
     </EuiPanel>