update nav category component

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) {
+export const NavCategory = as<'div', NavCategoryProps>(({ className, ...props }, ref) => (
-  return <div className={css.NavCategory}>{children}</div>;
+  <div className={classNames(css.NavCategory, className)} {...props} ref={ref} />
-}
+));

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) {
+export const NavCategoryHeader = as<'div', NavCategoryHeaderProps>(
-  return (
+  ({ className, ...props }, ref) => (
-    <Header className={css.NavCategoryHeader} variant="Background" size="300">
+    <Header
-      {children}
+      className={classNames(css.NavCategoryHeader, className)}
-    </Header>
+      variant="Background"
-  );
+      size="300"
-}
+      {...props}
+      ref={ref}
+    />
+  )
+);

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,
 });