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 ( -
- {children} -
- ); -} +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, });