Responsive everything.

src/components/common/FilterRecord.tsx

@@ -65,11 +65,11 @@ export function FilterRecord({
     <Column>
       <Label>{fields.find(f => f.name === name)?.label}</Label>
       <Grid columns="1fr auto" gap>
-        <Grid columns="200px 1fr" gap>
+        <Grid columns={{ xs: '1fr', md: '200px 1fr' }} gap>
           <Select
             items={operators.filter(({ type }) => type === 'string')}
             value={operator}
-            onSelectionChange={handleSelectOperator}
+            onChange={handleSelectOperator}
           >
             {({ name, label }: any) => {
               return (

src/components/common/HamburgerButton.tsx

@@ -1,20 +0,0 @@
-import { Button, Icon } from '@umami/react-zen';
-import { useState } from 'react';
-import { Close, Menu } from '@/components/icons';
-import { MobileMenu } from './MobileMenu';
-
-export function HamburgerButton({ menuItems }: { menuItems: any[] }) {
-  const [active, setActive] = useState(false);
-
-  const handleClick = () => setActive(state => !state);
-  const handleClose = () => setActive(false);
-
-  return (
-    <>
-      <Button variant="quiet" onClick={handleClick}>
-        <Icon>{active ? <Close /> : <Menu />}</Icon>
-      </Button>
-      {active && <MobileMenu items={menuItems} onClose={handleClose} />}
-    </>
-  );
-}

src/components/common/LoadingPanel.tsx

@@ -26,7 +26,7 @@ export function LoadingPanel({
   renderEmpty = () => <Empty />,
   children,
   ...props
-}: LoadingPanelProps) {
+}: LoadingPanelProps): ReactNode {
   const empty = isEmpty ?? checkEmpty(data);
 
   // Show loading spinner only if no data exists

src/components/common/MobileMenu.module.css

@@ -1,39 +0,0 @@
-.menu {
-  position: fixed;
-  top: 60px;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  margin: auto;
-  display: flex;
-  flex-direction: column;
-  background-color: var(--base50);
-  z-index: var(--z-index-popup);
-  overflow: auto;
-}
-
-.items {
-  display: flex;
-  flex-direction: column;
-}
-
-.item {
-  font-size: var(--font-size-lg);
-  font-weight: 700;
-  line-height: 80px;
-  padding: 0 40px;
-}
-
-a.item {
-  color: var(--base600);
-}
-
-a.item.selected,
-.submenu a.item.selected {
-  color: var(--base900);
-}
-
-.submenu a.item {
-  color: var(--base600);
-  margin-inline-start: 40px;
-}

src/components/common/MobileMenu.tsx

@@ -1,45 +1,17 @@
-import { createPortal } from 'react-dom';
-import classNames from 'classnames';
-import { usePathname } from 'next/navigation';
-import Link from 'next/link';
-import styles from './MobileMenu.module.css';
+import { Dialog, DialogTrigger, Button, Icon, Modal, DialogProps } from '@umami/react-zen';
+import { Menu } from '@/components/icons';
 
-export function MobileMenu({
-  items = [],
-  onClose,
-}: {
-  items: any[];
-  className?: string;
-  onClose: () => void;
-}): any {
-  const pathname = usePathname();
-
-  const Items = ({ items, className }: { items: any[]; className?: string }): any => (
-    <div className={classNames(styles.items, className)}>
-      {items.map(({ label, url, children }: { label: string; url: string; children: any[] }) => {
-        const selected = pathname.startsWith(url);
-
-        return (
-          <>
-            <Link
-              key={url}
-              href={url}
-              className={classNames(styles.item, { [styles.selected]: selected })}
-              onClick={onClose}
-            >
-              {label}
-            </Link>
-            {children && <Items items={children} className={styles.submenu} />}
-          </>
-        );
-      })}
-    </div>
-  );
-
-  return createPortal(
-    <div className={classNames(styles.menu)}>
-      <Items items={items} />
-    </div>,
-    document.body,
+export function MobileMenu(props: DialogProps) {
+  return (
+    <DialogTrigger>
+      <Button>
+        <Icon>
+          <Menu />
+        </Icon>
+      </Button>
+      <Modal position="left" offset="80px">
+        <Dialog variant="sheet" {...props} />
+      </Modal>
+    </DialogTrigger>
   );
 }

src/components/common/SideMenu.tsx

@@ -1,4 +1,3 @@
-import { ReactNode } from 'react';
 import {
   Heading,
   NavMenu,
@@ -28,7 +27,6 @@ export interface SideMenuProps extends NavMenuProps {
   title?: string;
   selectedKey?: string;
   allowMinimize?: boolean;
-  children?: ReactNode;
 }
 
 export function SideMenu({
@@ -36,7 +34,6 @@ export function SideMenu({
   title,
   selectedKey,
   allowMinimize,
-  children,
   ...props
 }: SideMenuProps) {
   const renderItems = (items: SideMenuData[]) => {
@@ -54,16 +51,7 @@ export function SideMenu({
   };
 
   return (
-    <Column
-      gap
-      padding
-      overflowY="auto"
-      justifyContent="space-between"
-      position="sticky"
-      top="0"
-      backgroundColor
-    >
-      {children}
+    <Column gap overflowY="auto" justifyContent="space-between">
       {title && (
         <Row padding>
           <Heading size="1">{title}</Heading>