📝docs:menu component

actifyjs · Jun 11, 2024 · 2251b11 · 2251b11
1 parent 415313a
commit 2251b11
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 18 deletions.
diff --git a/README.md b/README.md
@@ -73,9 +73,9 @@ Our goals is convert all [Material Web](https://github.com/material-components/m
 | Progress indicators |               | ✅              |
 | Radio               |               | ✅              |
 | Divider             |               | ✅              |
+| Menu                |               | ✅              |
+| Select              | ✅            | 🟡              |
 | Dialog              | ✅            |                 |
-| Menu                | ✅            |                 |
-| Select              | ✅            |                 |
 | SegmentedButton     | ✅            |                 |
 | SegmentedButtonSet  | ✅            |                 |
 

diff --git a/apps/docs/src/components/ThemeChanger.tsx b/apps/docs/src/components/ThemeChanger.tsx
@@ -26,7 +26,7 @@ import { useTheme } from 'next-themes'
 
 export const ThemeChanger = () => {
   const { setTheme } = useTheme()
-  const menuRef = React.useRef(null)
+  const [open, setOpen] = React.useState(false)
   const [hue, setHue] = React.useState<number>(0)
   const [chroma, setChroma] = React.useState<number>(0)
   const [tone, setTone] = React.useState<number>(0)
@@ -97,13 +97,12 @@ export const ThemeChanger = () => {
         title="change theme"
         id="theme-menu-anchor"
         onClick={() => {
-          // @ts-expect-error
-          menuRef.current!.open = !menuRef.current!.open
+          setOpen(!open)
         }}
       >
         <Icon>palette</Icon>
       </IconButton>
-      <Menu anchor="theme-menu-anchor" ref={menuRef}>
+      <Menu xOffset={-160} open={open} setOpen={setOpen}>
         <div className="flex flex-col w-56 my-3 mx-4 *:[margin-block-end:16px]">
           <section className="flex relative">
             <h2 className="text-2xl tracking-tighter leading-none">

diff --git a/apps/docs/src/usages/menus.tsx b/apps/docs/src/usages/menus.tsx
@@ -1,24 +1,42 @@
-import { Button, Menu, MenuItem } from 'actify'
+import { Button, Icon, Menu, MenuItem } from 'actify'
+
+import React from 'react'
 
 export default () => {
+  const [open, setOpen] = React.useState(false)
   return (
-    <div className="relative">
+    <div className="relative w-fit">
       <Button
         id="usage-anchor"
         onClick={() => {
-          const menuEl = document.body.querySelector('#usage-menu')
-          // @ts-ignore
-          menuEl.open = !menuEl.open
+          setOpen(!open)
         }}
       >
-        Open Menu with idref
+        Open Menu
       </Button>
-      <Menu yOffset={25} id="usage-menu" anchor="usage-anchor">
-        <MenuItem>
-          <div slot="headline">React</div>
-        </MenuItem>
-        <MenuItem>
-          <div slot="headline">Actify</div>
+      <Menu open={open} setOpen={setOpen}>
+        <MenuItem start={<Icon>home</Icon>}>React</MenuItem>
+        <MenuItem
+          start={
+            <Icon>
+              <svg
+                width="33.455"
+                height="36.987"
+                fill="#fff"
+                viewBox="0 0 33.455 36.987"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  strokeWidth="2.5"
+                  stroke="currentColor"
+                  transform="translate(-28.272 365)"
+                  d="M55.047-328.513l-5.238-13.822-14.323,5.317-3.243,8.5H29L42.821-364.5h4.359L61-328.513Zm-6.067-15.969.829,2.147-.829-2.147-5.308-13.745-7.123,18.445"
+                />
+              </svg>
+            </Icon>
+          }
+        >
+          Actify
         </MenuItem>
       </Menu>
     </div>