fix: No reserving space in sidebar for overflow (#2807)

* fix: No reserving space in sidebar for overflow
closes #2486

Co-authored-by: Charles Harries <charles@harries.me>

.babelrc

@@ -25,5 +25,17 @@
     "@babel/plugin-transform-destructuring",
     "@babel/plugin-transform-regenerator",
     "transform-class-properties"
-  ]
+  ],
+  "env": {
+    "production": {
+      "plugins": [
+        [
+          "styled-components",
+          {
+            "displayName": false
+          }
+        ]
+      ]
+    }
+  }
 }

app/components/Sidebar/components/DocumentLink.tsx

@@ -250,9 +250,8 @@ function DocumentLink(
                     />
                   </>
                 }
-                // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'match' implicitly has an 'any' type.
                 isActive={(match, location) =>
-                  match && location.search !== "?starred"
+                  !!match && location.search !== "?starred"
                 }
                 isActiveDrop={isOverReparent && canDropToReparent}
                 depth={depth}

app/components/Sidebar/components/NavLink.tsx

@@ -4,7 +4,11 @@
 // it avoids recalculating the link match again.
 import { Location, createLocation } from "history";
 import * as React from "react";
-import { __RouterContext as RouterContext, matchPath } from "react-router";
+import {
+  __RouterContext as RouterContext,
+  matchPath,
+  match,
+} from "react-router";
 import { Link } from "react-router-dom";
 import scrollIntoView from "smooth-scroll-into-view-if-needed";
 
@@ -32,7 +36,7 @@ export type Props = React.HTMLAttributes<HTMLAnchorElement> & {
   className?: string;
   scrollIntoViewIfNeeded?: boolean;
   exact?: boolean;
-  isActive?: any;
+  isActive?: (match: match | null, location: Location) => boolean;
   location?: Location;
   strict?: boolean;
   style?: React.CSSProperties;

app/components/Sidebar/components/SidebarLink.tsx

@@ -3,6 +3,7 @@ import * as React from "react";
 import styled, { useTheme } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
 import EventBoundary from "~/components/EventBoundary";
+import NudeButton from "~/components/NudeButton";
 import { NavigationNode } from "~/types";
 import NavLink, { Props as NavLinkProps } from "./NavLink";
 
@@ -153,8 +154,27 @@ const Link = styled(NavLink)<{ $isActiveDrop?: boolean }>`
       transparentize("0.25", props.theme.sidebarItemBackground)};
   }
 
+  & + ${Actions} {
+    ${NudeButton} {
+      background: ${(props) => props.theme.sidebarBackground};
+    }
+  }
+
+  &:focus + ${Actions} {
+    ${NudeButton} {
+      background: ${(props) =>
+        transparentize("0.25", props.theme.sidebarItemBackground)};
+    }
+  }
+
+  &[aria-current="page"] + ${Actions} {
+    ${NudeButton} {
+      background: ${(props) => props.theme.sidebarItemBackground};
+    }
+  }
+
   ${breakpoint("tablet")`
-    padding: 4px 32px 4px 16px;
+    padding: 4px 8px 4px 16px;
     font-size: 15px;
   `}
 

app/components/Sidebar/components/StarredLink.tsx

@@ -75,9 +75,8 @@ function StarredLink({ depth, title, to, documentId, collectionId }: Props) {
         <SidebarLink
           depth={depth}
           to={`${to}?starred`}
-          // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'match' implicitly has an 'any' type.
           isActive={(match, location) =>
-            match && location.search === "?starred"
+            !!match && location.search === "?starred"
           }
           label={
             <>