diff --git a/apps/explorer/src/app/components/header/header.tsx b/apps/explorer/src/app/components/header/header.tsx index 76feff02f..2230193e6 100644 --- a/apps/explorer/src/app/components/header/header.tsx +++ b/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 { diff --git a/apps/explorer/src/app/components/search/search.tsx b/apps/explorer/src/app/components/search/search.tsx index e722394db..5ce6b7467 100644 --- a/apps/explorer/src/app/components/search/search.tsx +++ b/apps/explorer/src/app/components/search/search.tsx @@ -129,8 +129,8 @@ export const Search = () => { const searchTrigger = ( - diff --git a/libs/ui-toolkit/src/components/navigation/navigation-utils.ts b/libs/ui-toolkit/src/components/navigation/navigation-utils.ts index da349216d..a89bbf85d 100644 --- a/libs/ui-toolkit/src/components/navigation/navigation-utils.ts +++ b/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' }); diff --git a/libs/ui-toolkit/src/components/navigation/navigation.tsx b/libs/ui-toolkit/src/components/navigation/navigation.tsx index aac9cbdbf..93ecfdfea 100644 --- a/libs/ui-toolkit/src/components/navigation/navigation.tsx +++ b/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 = () => ; 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); };