diff --git a/src/app/components/nav/NavCategory.tsx b/src/app/components/nav/NavCategory.tsx
index c012fa77..4ccf1158 100644
--- a/src/app/components/nav/NavCategory.tsx
+++ b/src/app/components/nav/NavCategory.tsx
@@ -1,9 +1,11 @@
import React, { ReactNode } from 'react';
+import { as } from 'folds';
+import classNames from 'classnames';
import * as css from './styles.css';
type NavCategoryProps = {
children: ReactNode;
};
-export function NavCategory({ children }: NavCategoryProps) {
- return
{children}
;
-}
+export const NavCategory = as<'div', NavCategoryProps>(({ className, ...props }, ref) => (
+
+));
diff --git a/src/app/components/nav/NavCategoryHeader.tsx b/src/app/components/nav/NavCategoryHeader.tsx
index b6df7aef..e6ae700a 100644
--- a/src/app/components/nav/NavCategoryHeader.tsx
+++ b/src/app/components/nav/NavCategoryHeader.tsx
@@ -1,14 +1,19 @@
import React, { ReactNode } from 'react';
-import { Header } from 'folds';
+import classNames from 'classnames';
+import { Header, as } from 'folds';
import * as css from './styles.css';
export type NavCategoryHeaderProps = {
children: ReactNode;
};
-export function NavCategoryHeader({ children }: NavCategoryHeaderProps) {
- return (
-
- );
-}
+export const NavCategoryHeader = as<'div', NavCategoryHeaderProps>(
+ ({ className, ...props }, ref) => (
+
+ )
+);
diff --git a/src/app/components/nav/styles.css.ts b/src/app/components/nav/styles.css.ts
index 11cfd576..7bbfbc9a 100644
--- a/src/app/components/nav/styles.css.ts
+++ b/src/app/components/nav/styles.css.ts
@@ -11,10 +11,6 @@ export const NavCategory = style([
export const NavCategoryHeader = style({
paddingLeft: config.space.S200,
- position: 'sticky',
- top: 0,
- zIndex: 1,
-
gap: config.space.S100,
});