Indicate selected item in the admin nav (#19424)

frontend/src/metabase/components/Link.tsx

@@ -6,7 +6,7 @@ import { color, display, hover, space } from "styled-system";
 import Tooltip from "metabase/components/Tooltip";
 import { stripLayoutProps } from "metabase/lib/utils";
 
-interface Props extends HTMLProps<HTMLAnchorElement> {
+export interface LinkProps extends HTMLProps<HTMLAnchorElement> {
   to: string;
   disabled?: boolean;
   className?: string;
@@ -24,7 +24,7 @@ function BaseLink({
   disabled,
   tooltip,
   ...props
-}: Props) {
+}: LinkProps) {
   const link = (
     <ReactRouterLink
       to={to}

frontend/src/metabase/css/admin.css

@@ -6,47 +6,12 @@
   --page-header-padding: 2.375rem;
 }
 
-.AdminNav {
-  background: var(--color-admin-navbar);
-  color: var(--color-text-white);
-  font-size: 0.85rem;
-}
-
-.AdminNav .NavItem {
-  color: color-mod(var(--color-text-white) alpha(-37%));
-}
-
-.AdminNav .NavItem:hover,
-.AdminNav .NavItem.is--selected {
-  color: var(--color-text-white);
-}
-
-/* TODO: this feels itchy. should refactor .NavItem.is--selected to be less cascadey */
-.AdminNav .NavItem:hover:after,
-.AdminNav .NavItem.is--selected:after {
-  display: none;
-}
-
-.AdminNav .NavDropdown.open .NavDropdown-button,
-.AdminNav .NavDropdown .NavDropdown-content-layer {
-  background-color: var(--color-bg-dark);
-}
-
-.AdminNav .Dropdown-item:hover {
-  background-color: var(--color-bg-dark);
-}
-
 /* utility to get a simple common hover state for admin items */
-.HoverItem:hover,
-.AdminHoverItem:hover {
+.HoverItem:hover {
   background-color: var(--color-bg-medium);
   transition: background 0.2s linear;
 }
 
-.AdminNav .Dropdown-chevron {
-  color: var(--color-text-white);
-}
-
 .Actions-group {
   margin-bottom: 2em;
 }

frontend/src/metabase/nav/components/AdminNavbar/AdminNavItem.styled.tsx

+import styled from "styled-components";
+import Link, { LinkProps } from "metabase/components/Link";
+import { alpha, color } from "metabase/lib/colors";
+
+interface AdminNavLinkProps extends LinkProps {
+  isSelected?: boolean;
+}
+
+export const AdminNavLink = styled<AdminNavLinkProps>(Link)`
+  padding: 0.5rem 1rem;
+  text-decoration: none;
+  color: ${props => (props.isSelected ? color("white") : alpha("white", 0.63))};
+`;

frontend/src/metabase/nav/components/AdminNavbar/AdminNavItem.tsx

 import React from "react";
 import cx from "classnames";
 import Link from "metabase/components/Link";
+import { AdminNavLink } from "./AdminNavItem.styled";
 
 interface AdminNavItem {
   name: string;
@@ -10,14 +11,12 @@ interface AdminNavItem {
 
 export const AdminNavItem = ({ name, path, currentPath }: AdminNavItem) => (
   <li>
-    <Link
+    <AdminNavLink
       to={path}
       data-metabase-event={`NavBar;${name}`}
-      className={cx("NavItem py1 px2 no-decoration", {
-        "is--selected": currentPath.startsWith(path),
-      })}
+      isSelected={currentPath.startsWith(path)}
     >
       {name}
-    </Link>
+    </AdminNavLink>
   </li>
 );

frontend/src/metabase/nav/components/AdminNavbar/AdminNavbar.tsx

@@ -3,7 +3,6 @@ import { t } from "ttag";
 import { PLUGIN_ADMIN_NAV_ITEMS } from "metabase/plugins";
 import MetabaseSettings from "metabase/lib/settings";
 import { AdminNavItem } from "./AdminNavItem";
-import Link from "metabase/components/Link";
 import StoreLink from "../StoreLink";
 import LogoIcon from "metabase/components/LogoIcon";
 import {