Navigation: Remove some redundant css and tidy up reverse logic (#43403)

* Remove some redundant css and tidy up reverse logic

* Fix alignment of subtitle

* Remove navbar-dropdown class

public/app/core/components/NavBar/NavBarItem.tsx

@@ -35,7 +35,7 @@ const NavBarItem = ({
     .filter((item) => !item.hideFromMenu)
     .map((i) => ({ ...i, menuItemType: NavMenuItemType.Item }));
   const adjustHeightForBorder = filteredItems.length === 0;
-  const styles = getStyles(theme, adjustHeightForBorder, isActive, reverseMenuDirection);
+  const styles = getStyles(theme, adjustHeightForBorder, isActive);
   const section: NavModelItem = {
     ...link,
     children: filteredItems,
@@ -115,12 +115,7 @@ const NavBarItem = ({
 
 export default NavBarItem;
 
-const getStyles = (
+const getStyles = (theme: GrafanaTheme2, adjustHeightForBorder: boolean, isActive?: boolean) => ({
-  theme: GrafanaTheme2,
-  adjustHeightForBorder: boolean,
-  isActive?: boolean,
-  reverseMenuDirection?: boolean
-) => ({
   ...getNavBarItemWithoutMenuStyles(theme, isActive),
   header: css`
     color: ${theme.colors.text.primary};
@@ -134,12 +129,4 @@ const getStyles = (
   item: css`
     color: ${theme.colors.text.primary};
   `,
-  subtitle: css`
-      border-${reverseMenuDirection ? 'bottom' : 'top'}: 1px solid ${theme.colors.border.weak};
-      color: ${theme.colors.text.secondary};
-      font-size: ${theme.typography.bodySmall.fontSize};
-      font-weight: ${theme.typography.bodySmall.fontWeight};
-      padding: ${theme.spacing(1)} ${theme.spacing(2)} ${theme.spacing(1)};
-      white-space: nowrap;
-    `,
 });

public/app/core/components/NavBar/NavBarItemMenu.tsx

@@ -25,7 +25,7 @@ export function NavBarItemMenu(props: NavBarItemMenuProps): ReactElement | null
   };
   const { menuHasFocus, menuProps: contextMenuProps = {} } = contextProps;
   const theme = useTheme2();
-  const styles = getStyles(theme, adjustHeightForBorder, reverseMenuDirection);
+  const styles = getStyles(theme, reverseMenuDirection);
   const state = useTreeState<NavModelItem>({ ...rest, disabledKeys });
   const ref = useRef(null);
   const { menuProps } = useMenu(completeProps, { ...state }, ref);
@@ -54,38 +54,26 @@ export function NavBarItemMenu(props: NavBarItemMenuProps): ReactElement | null
     <NavBarItemMenuItem key={section.key} item={section} state={state} onNavigate={onNavigate} />
   );
 
-  const subTitleComponent = (
+  const itemComponents = items.map((item) => (
-    <li key={menuSubTitle} className={styles.menuItem}>
+    <NavBarItemMenuItem key={getNavModelItemKey(item.value)} item={item} state={state} onNavigate={onNavigate} />
-      <div className={styles.subtitle}>{menuSubTitle}</div>
+  ));
+
+  const subTitleComponent = menuSubTitle && (
+    <li key={menuSubTitle} className={styles.subtitle}>
+      {menuSubTitle}
     </li>
   );
 
+  const menu = [sectionComponent, itemComponents, subTitleComponent];
+
   return (
-    <ul
+    <ul className={styles.menu} ref={ref} {...mergeProps(menuProps, contextMenuProps)} tabIndex={menuHasFocus ? 0 : -1}>
-      className={`${styles.menu} navbar-dropdown`}
+      {reverseMenuDirection ? menu.reverse() : menu}
-      ref={ref}
-      {...mergeProps(menuProps, contextMenuProps)}
-      tabIndex={menuHasFocus ? 0 : -1}
-    >
-      {!reverseMenuDirection ? sectionComponent : null}
-      {menuSubTitle && reverseMenuDirection ? subTitleComponent : null}
-      {items.map((item, index) => {
-        return (
-          <NavBarItemMenuItem key={getNavModelItemKey(item.value)} item={item} state={state} onNavigate={onNavigate} />
-        );
-      })}
-      {reverseMenuDirection ? sectionComponent : null}
-      {menuSubTitle && !reverseMenuDirection ? subTitleComponent : null}
     </ul>
   );
 }
 
-function getStyles(
+function getStyles(theme: GrafanaTheme2, reverseDirection?: boolean) {
-  theme: GrafanaTheme2,
-  adjustHeightForBorder: boolean,
-  reverseDirection?: boolean,
-  isFocused?: boolean
-) {
   return {
     menu: css`
       background-color: ${theme.colors.background.primary};
@@ -103,26 +91,14 @@ function getStyles(
       z-index: ${theme.zIndex.sidemenu};
       list-style: none;
     `,
-    menuItem: css`
-      background-color: ${isFocused ? theme.colors.action.hover : 'transparent'};
-      color: ${isFocused ? 'white' : theme.colors.text.primary};
-
-      &:focus-visible {
-        background-color: ${theme.colors.action.hover};
-        box-shadow: none;
-        color: ${theme.colors.text.primary};
-        outline: 2px solid ${theme.colors.primary.main};
-        // Need to add condition, header is 0, otherwise -2
-        outline-offset: -0px;
-        transition: none;
-      }
-    `,
     subtitle: css`
+      background-color: transparent;
       border-${reverseDirection ? 'bottom' : 'top'}: 1px solid ${theme.colors.border.weak};
       color: ${theme.colors.text.secondary};
       font-size: ${theme.typography.bodySmall.fontSize};
       font-weight: ${theme.typography.bodySmall.fontWeight};
       padding: ${theme.spacing(1)} ${theme.spacing(2)} ${theme.spacing(1)};
+      text-align: left;
       white-space: nowrap;
     `,
   };

public/app/core/components/NavBar/NavBarItemMenuItem.tsx

@@ -72,7 +72,7 @@ function getStyles(theme: GrafanaTheme2, isFocused: boolean, isSection: boolean)
   return {
     menuItem: css`
       background-color: ${backgroundColor};
-      color: ${isFocused ? 'white' : theme.colors.text.primary};
+      color: ${theme.colors.text.primary};
 
       &:focus-visible {
         background-color: ${theme.colors.action.hover};

public/app/core/components/NavBar/NavBarItemMenuTrigger.tsx

@@ -164,22 +164,6 @@ export function NavBarItemMenuTrigger(props: NavBarItemMenuTriggerProps): ReactE
 }
 
 const getStyles = (theme: GrafanaTheme2, isActive?: boolean) => ({
-  container: css`
-    position: relative;
-    color: ${isActive ? theme.colors.text.primary : theme.colors.text.secondary};
-    list-style: none;
-
-    &:hover {
-      background-color: ${theme.colors.action.hover};
-      color: ${theme.colors.text.primary};
-
-      // TODO don't use a hardcoded class here, use isVisible in NavBarDropdown
-      .navbar-dropdown {
-        opacity: 1;
-        visibility: visible;
-      }
-    }
-  `,
   element: css`
     background-color: transparent;
     border: none;