fixes

Author: xPaw

web/src/components/Search/index.tsx

@@ -29,6 +29,7 @@ export const SearchInput = styled.input.attrs({ type: "search" })`
   border-radius: 8px;
   background: ${(props) => props.theme.searchbox.background};
   color: ${(props) => props.theme.text};
+  font-family: inherit;
   font-size: 14px;
   outline: none;
   transition: border-color 0.15s, box-shadow 0.15s;
@@ -43,7 +44,7 @@ export const SearchInput = styled.input.attrs({ type: "search" })`
   }
 `;
 
-export function SearchBox({ baseUrl, className }: { baseUrl: string; className?: string }) {
+export function SearchBox({ baseUrl, className, placeholder = "Search..." }: { baseUrl: string; className?: string; placeholder?: string }) {
   const { search, setSearch } = useContext(SearchContext);
   const navigate = useNavigate();
   const location = useLocation();
@@ -80,7 +81,7 @@ export function SearchBox({ baseUrl, className }: { baseUrl: string; className?:
   return (
     <SearchInput
       className={className}
-      placeholder="Search..."
+      placeholder={placeholder}
       ref={ref}
       value={search}
       onChange={onChange}

web/src/components/layout/NavBar.tsx

@@ -31,7 +31,7 @@ function NavBarWithSearch({ baseUrl }: { baseUrl: string }) {
         />
       </NavBarSidebarCell>
       <NavBarContentCell>
-        <NavBarSearchBox baseUrl={baseUrl} />
+        <NavBarSearchBox baseUrl={baseUrl} placeholder="Search... (module:name to filter)" />
         <HomeBrandLink to="/schemas">Source 2 Schemas</HomeBrandLink>
         <NavBarThemeSwitcher />
       </NavBarContentCell>

web/src/components/layout/Sidebar.tsx

@@ -1,10 +1,11 @@
 import React, { useContext } from "react";
+import { NavLink } from "react-router-dom";
 import styled from "styled-components";
 import { IconKind, KindIcon } from "~components/KindIcon";
 import { Declaration } from "~components/Docs/api";
 import { DeclarationsContext } from "~components/Docs/DeclarationsContext";
 
-const SidebarLink = styled.a`
+const SidebarLink = styled(NavLink)`
   display: block;
   background: transparent;
   border-radius: 6px;
@@ -37,32 +38,30 @@ const SidebarKindIcon = styled(KindIcon)`
 `;
 
 export const SidebarElement: React.FC<{
-  href: string;
+  to: string;
   icon: IconKind;
   text: string;
-  active?: boolean;
-}> = React.memo(({ href, icon, text, active }) => (
-  <SidebarLink href={href} className={active ? "active" : undefined}>
+}> = React.memo(({ to, icon, text }) => (
+  <SidebarLink to={to}>
     <SidebarKindIcon kind={icon} size="small" /> {text}
   </SidebarLink>
 ));
 
-export const DeclarationSidebarElement: React.FC<{ declaration: Declaration; active?: boolean }> = React.memo(({ declaration, active }) => {
+export const DeclarationSidebarElement: React.FC<{ declaration: Declaration }> = React.memo(({ declaration }) => {
   const { root } = useContext(DeclarationsContext);
   return (
     <SidebarElement
-      href={`#${root}/${declaration.name}`}
+      to={`${root}/${declaration.name}`}
       icon={declaration.kind}
       text={declaration.name}
-      active={active}
     />
   );
 });
 
 export const SidebarGroupHeader = styled.div<{ $collapsed: boolean }>`
   background: ${(props) => props.theme.sidebar};
   padding: 0 6px;
-  height: 100%;
+  height: 28px;
   box-sizing: border-box;
   font-size: 14px;
   font-weight: 600;

web/src/pages/DeclarationsSidebar.tsx

@@ -147,7 +147,7 @@ export const DeclarationsSidebar = () => {
                 }}
               >
                 {isHeader ? (
-                  <div style={{ paddingTop: virtualRow.index > 0 ? HEADER_GAP : 0, height: "100%", background: "inherit" }}>
+                  <div style={{ paddingTop: virtualRow.index > 0 && !isActiveSticky ? HEADER_GAP : 0, background: "inherit" }}>
                     <SidebarGroupHeader
                       $collapsed={collapsed.has(row.module)}
                       onClick={() => toggleModule(row.module)}
@@ -156,7 +156,7 @@ export const DeclarationsSidebar = () => {
                     </SidebarGroupHeader>
                   </div>
                 ) : (
-                  <DeclarationSidebarElement declaration={row.declaration} active={scope === row.declaration.name} />
+                  <DeclarationSidebarElement declaration={row.declaration} />
                 )}
               </div>
             );