[add] Drawer component

[migrate] Home page & components

package.json

@@ -33,6 +33,8 @@
         "husky": "^9.0.10",
         "lint-staged": "^15.2.2",
         "parcel": "~2.11.0",
+        "postcss": "^8.4.35",
+        "postcss-modules": "^4.3.1",
         "prettier": "^3.2.5",
         "typescript": "~5.3.3",
         "workbox-cli": "^7.0.0"

source/component/Button.tsx

@@ -1,17 +1,22 @@
 import classNames from 'classnames';
 import { FC, WebCellProps } from 'web-cell';
-import '@material/web/all';
+import '@material/web/icon/icon';
+import '@material/web/button/filled-button';
 
 type Props = JSX.IntrinsicElements['md-filled-button'];
 
-export type ButtonProps = Props &
-    Pick<WebCellProps<HTMLAnchorElement>, 'href' | 'target'>;
+export interface ButtonProps
+    extends Omit<Props, 'target'>,
+        Pick<WebCellProps<HTMLAnchorElement>, 'href' | 'target'> {
+    icon?: string;
+}
 
 export const Button: FC<ButtonProps> = ({
     className,
     style,
     title,
     slot,
+    icon,
     href,
     target,
     children,
@@ -20,6 +25,7 @@ export const Button: FC<ButtonProps> = ({
     const props = { className, style, title, slot };
     const button = (
         <md-filled-button {...(href ? null : props)} {...rest}>
+            {icon && <md-icon slot="icon">{icon}</md-icon>}
             {children}
         </md-filled-button>
     );

source/component/Drawer.tsx

@@ -0,0 +1,74 @@
+import { OffcanvasBox, OffcanvasBoxProps } from 'boot-cell';
+import { observable } from 'mobx';
+import { WebCell, attribute, component, observer } from 'web-cell';
+
+export interface DrawerProps extends OffcanvasBoxProps {}
+
+export interface Drawer extends WebCell<DrawerProps> {}
+
+@component({
+    tagName: 'md-drawer',
+    mode: 'open'
+})
+@observer
+export class Drawer extends HTMLElement implements WebCell<DrawerProps> {
+    @attribute
+    @observable
+    accessor open = false;
+
+    @observable
+    accessor narrow = false;
+
+    updateScreen = () => (this.narrow = innerWidth < innerHeight);
+
+    mountedCallback() {
+        this.updateScreen();
+
+        globalThis.addEventListener('resize', this.updateScreen);
+    }
+
+    disconnectedCallback() {
+        globalThis.removeEventListener('resize', this.updateScreen);
+    }
+
+    renderContent() {
+        const { title, narrow, open } = this;
+
+        return (
+            <>
+                <div className="sticky-top shadow-sm d-flex justify-content-between align-items-center p-3">
+                    {title}
+
+                    {narrow && (
+                        <md-icon-button onClick={() => (this.open = true)}>
+                            <md-icon>menu</md-icon>
+                        </md-icon-button>
+                    )}
+                </div>
+                {narrow ? (
+                    <OffcanvasBox
+                        title={title}
+                        show={open}
+                        onHide={() => (this.open = false)}
+                    >
+                        <slot />
+                    </OffcanvasBox>
+                ) : (
+                    <slot />
+                )}
+            </>
+        );
+    }
+
+    render() {
+        return (
+            <>
+                <link
+                    rel="stylesheet"
+                    href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css"
+                />
+                {this.renderContent()}
+            </>
+        );
+    }
+}