fix: search trigger, hide

apps/explorer/src/app/components/header/header.tsx

@@ -72,7 +72,7 @@ export const Header = () => {
       }
       onResize={(width, el) => {
         if (width < 1157) {
-          // switch to magnifying glass trigger when widht < 1157
+          // switch to magnifying glass trigger when width < 1157
           el.classList.remove('nav-search-full');
           el.classList.add('nav-search-compact');
         } else {

apps/explorer/src/app/components/search/search.tsx

@@ -129,8 +129,8 @@ export const Search = () => {
   const searchTrigger = (
     <DropdownMenu.Root>
       <DropdownMenu.Trigger asChild>
-        <button className="mt-[-1px] text-vega-light-300 dark:text-vega-dark-300 data-open:text-black dark:data-open:text-white">
-          <Icon name="search" size={4} />
+        <button className="text-vega-light-300 dark:text-vega-dark-300 data-open:text-black dark:data-open:text-white w-8 h-8 relative">
+          <Icon name="search" size={4} className="absolute top-2 left-2" />
         </button>
       </DropdownMenu.Trigger>
       <DropdownMenu.Portal>

libs/ui-toolkit/src/components/navigation/navigation-utils.ts

@@ -60,24 +60,6 @@ export type NavigationElementProps = {
   hideInDrawer?: boolean;
 };
 
-export const determineIfHidden = ({
-  hide,
-  hideInDrawer,
-}: NavigationElementProps) => [
-  {
-    '[.nav-size-full_.navbar_&]:hidden': hide?.includes(
-      NavigationBreakpoint.Full
-    ),
-    '[.nav-size-narrow_.navbar_&]:hidden': hide?.includes(
-      NavigationBreakpoint.Narrow
-    ),
-    '[.nav-size-small_.navbar_&]:hidden': hide?.includes(
-      NavigationBreakpoint.Small
-    ),
-    '[.drawer-content_&]:hidden': hideInDrawer,
-  },
-];
-
 export const NavigationContext = createContext<{
   theme: NavigationProps['theme'];
 }>({ theme: 'system' });

libs/ui-toolkit/src/components/navigation/navigation.tsx

@@ -13,8 +13,7 @@ import type {
   NavigationProps,
 } from './navigation-utils';
 import { setSizeVariantClasses } from './navigation-utils';
-import { NavigationContext } from './navigation-utils';
-import { determineIfHidden } from './navigation-utils';
+import { NavigationBreakpoint, NavigationContext } from './navigation-utils';
 import {
   NavigationDrawerTrigger,
   NavigationDrawerContext,
@@ -59,6 +58,21 @@ const Logo = ({
   );
 };
 
+const determineIfHidden = ({ hide, hideInDrawer }: NavigationElementProps) => [
+  {
+    '[.nav-size-full_.navbar_&]:hidden': hide?.includes(
+      NavigationBreakpoint.Full
+    ),
+    '[.nav-size-narrow_.navbar_&]:hidden': hide?.includes(
+      NavigationBreakpoint.Narrow
+    ),
+    '[.nav-size-small_.navbar_&]:hidden': hide?.includes(
+      NavigationBreakpoint.Small
+    ),
+    '[.drawer-content_&]:hidden': hideInDrawer,
+  },
+];
+
 const Spacer = () => <div className="w-full" aria-hidden="true"></div>;
 
 export const NavigationItem = ({
@@ -273,13 +287,13 @@ export const Navigation = ({
       window.innerWidth
     );
     setSizeVariantClasses(breakpoints, currentWidth, target);
+    onResize?.(currentWidth, target);
 
     const handler = () => {
       const currentWidth = Math.min(
         target.getBoundingClientRect().width,
         window.innerWidth
       );
-      console.log(currentWidth);
       setSizeVariantClasses(breakpoints, currentWidth, target);
       onResize?.(currentWidth, target);
     };