Address nav cleanup feedback (#21447)

* Use `rem` for padding

* Extract `SidebarButton` component to its own dir

frontend/src/metabase/nav/components/SidebarButton/SidebarButton.styled.tsx

+import styled from "@emotion/styled";
+
+import Icon from "metabase/components/Icon";
+
+import { color } from "metabase/lib/colors";
+import { space } from "metabase/styled-components/theme";
+
+export const SidebarIcon = styled(Icon)`
+  &:hover {
+    cursor: pointer;
+    color: ${color("brand")};
+  }
+`;
+
+export const SidebarButtonRoot = styled.div`
+  margin-left: ${space(1)};
+  margin-top: ${space(1)};
+`;

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

+import React from "react";
+
+import { SidebarButtonRoot, SidebarIcon } from "./SidebarButton.styled";
+
+interface SidebarButtonProps {
+  isSidebarOpen: boolean;
+  onClick: () => void;
+}
+
+function SidebarButton({ isSidebarOpen, onClick }: SidebarButtonProps) {
+  return (
+    <SidebarButtonRoot data-testid="sidebar-toggle-button">
+      <SidebarIcon
+        size={28}
+        name={isSidebarOpen ? "sidebar_open" : "sidebar_closed"}
+        onClick={onClick}
+      />
+    </SidebarButtonRoot>
+  );
+}
+
+export default SidebarButton;

frontend/src/metabase/nav/components/SidebarButton/index.ts

+export { default } from "./SidebarButton";

frontend/src/metabase/nav/containers/AppBar.styled.tsx

-import React from "react";
 import styled from "@emotion/styled";
 
-import Icon from "metabase/components/Icon";
-
 import { color } from "metabase/lib/colors";
 import { space } from "metabase/styled-components/theme";
 
@@ -32,32 +29,3 @@ export const LogoIconWrapper = styled.div`
     background-color: ${color("bg-light")};
   }
 `;
-
-const SidebarIcon = styled(Icon)`
-  &:hover {
-    cursor: pointer;
-    color: ${color("brand")};
-  }
-`;
-
-const SidebarButtonRoot = styled.div`
-  margin-left: ${space(1)};
-  margin-top: ${space(1)};
-`;
-
-interface SidebarButtonProps {
-  isSidebarOpen: boolean;
-  onClick: () => void;
-}
-
-export function SidebarButton({ isSidebarOpen, onClick }: SidebarButtonProps) {
-  return (
-    <SidebarButtonRoot data-testid="sidebar-toggle-button">
-      <SidebarIcon
-        size={28}
-        name={isSidebarOpen ? "sidebar_open" : "sidebar_closed"}
-        onClick={onClick}
-      />
-    </SidebarButtonRoot>
-  );
-}

frontend/src/metabase/nav/containers/AppBar.tsx

@@ -7,6 +7,7 @@ import Tooltip from "metabase/components/Tooltip";
 import LogoIcon from "metabase/components/LogoIcon";
 
 import SearchBar from "metabase/nav/components/SearchBar";
+import SidebarButton from "metabase/nav/components/SidebarButton";
 import NewButton from "metabase/nav/containers/NewButton";
 import {
   SearchBarContainer,
@@ -16,7 +17,7 @@ import {
 import Database from "metabase/entities/databases";
 import { isSmallScreen } from "metabase/lib/dom";
 
-import { AppBarRoot, LogoIconWrapper, SidebarButton } from "./AppBar.styled";
+import { AppBarRoot, LogoIconWrapper } from "./AppBar.styled";
 
 type Props = {
   isSidebarOpen: boolean;

frontend/src/metabase/nav/containers/MainNavbar/BookmarkList/BookmarkList.styled.tsx

@@ -6,7 +6,7 @@ import { space } from "metabase/styled-components/theme";
 import { SidebarLink } from "../SidebarItems";
 
 export const SidebarBookmarkItem = styled(SidebarLink)`
-  padding-left: 12px;
+  padding-left: 0.75rem;
 
   &:hover {
     button {