diff --git a/apps/explorer/src/app/app.tsx b/apps/explorer/src/app/app.tsx
index 1e788bad9..8aac5da50 100644
--- a/apps/explorer/src/app/app.tsx
+++ b/apps/explorer/src/app/app.tsx
@@ -50,8 +50,8 @@ function App() {
)}
>
-
+
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 b9d4ce12f..127825bfe 100644
--- a/apps/explorer/src/app/components/search/search.tsx
+++ b/apps/explorer/src/app/components/search/search.tsx
@@ -111,8 +111,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);
};