Update Menu elements

exoup · Mar 26, 2024 · e484c71 · e484c71
1 parent 5e46359
commit e484c71
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 33 deletions.
diff --git a/src/components/Menu/Menu.jsx b/src/components/Menu/Menu.jsx
@@ -10,7 +10,7 @@ const generateId = () => Math.random().toString(36).substring(2, 9);
 export default function Menu({ children, className }) {
     return (
         <MenuProvider>
-            <div className={twMerge(className)}>{children}</div>
+            <div className={twMerge('size-max', className)}>{children}</div>
         </MenuProvider>
     );
 }
@@ -30,8 +30,7 @@ export const MenuControl = ({ children }) => {
     }, [setButtonControllerId, setMenuId]);
 
     return (
-        <div ref={buttonRef}
-            className='size-max'>
+        <div ref={buttonRef}>
             {
                 Children.map(children, (child) => {
                     if (isValidElement(child)) {
@@ -42,7 +41,8 @@ export const MenuControl = ({ children }) => {
                             "aria-controls": menuId,
                             "aria-expanded": String(isOpen),
                             "aria-haspopup": "true",
-                            onClick: handleClick
+                            onClick: handleClick,
+                            tabIndex: 0
                         });
                     }
                     return child;

diff --git a/src/components/Menu/Menu.stories.jsx b/src/components/Menu/Menu.stories.jsx
@@ -1,6 +1,7 @@
 import Menu, { MenuControl, MenuContent, MenuItem, MenuDivider } from "./Menu";
 import Avatar, { AvatarWithText, Content, Title, Subtitle } from "../Avatar/Avatar";
 import Button from "../Button/Button";
+import Input from "../Input/Input";
 import { ChevronDownIcon, UserCircleIcon, Cog6ToothIcon, ArrowRightStartOnRectangleIcon } from "@heroicons/react/24/outline";
 
 export default {
@@ -56,39 +57,62 @@ export const MenuStory = ({ ...args }) => (
 MenuStory.storyName = "Menu";
 
 export const MenuProfile = ({ name, subtitle, ...args }) => (
-    <div className='flex justify-between m-2'>
-        <Menu>
-            <MenuControl>
-                <AvatarWithText className='cursor-pointer'>
-                    <Avatar {...args} radius='full' name={name} />
-                    <Content typography={args.color}>
-                        <Title>{name}</Title>
-                        <Subtitle>{subtitle}</Subtitle>
-                    </Content>
-                    <ChevronDownIcon className='size-4 dark:text-white' />
-                </AvatarWithText>
-            </MenuControl>
-            <MenuContent {...args} className='w-56'>
-                <MenuItem>
-                    <UserCircleIcon className='size-5' />
-                    Profile
-                </MenuItem>
-                <MenuItem>
-                    <Cog6ToothIcon className='size-5' />
-                    Settings
-                </MenuItem>
-                <MenuDivider />
-                <MenuItem disabled>
-                    <ArrowRightStartOnRectangleIcon className='size-5' />
-                    Logout
-                </MenuItem>
-            </MenuContent>
-        </Menu>
-    </div>
+    <Menu>
+        <MenuControl>
+            <AvatarWithText className='cursor-pointer'>
+                <Avatar {...args} radius='full' name={name} />
+                <Content typography={args.color}>
+                    <Title>{name}</Title>
+                    <Subtitle>{subtitle}</Subtitle>
+                </Content>
+                <ChevronDownIcon className='size-4 dark:text-white' />
+            </AvatarWithText>
+        </MenuControl>
+        <MenuContent {...args} className='w-56'>
+            <MenuItem>
+                <UserCircleIcon className='size-5' />
+                Profile
+            </MenuItem>
+            <MenuItem>
+                <Cog6ToothIcon className='size-5' />
+                Settings
+            </MenuItem>
+            <MenuDivider />
+            <MenuItem disabled>
+                <ArrowRightStartOnRectangleIcon className='size-5' />
+                Logout
+            </MenuItem>
+        </MenuContent>
+    </Menu>
 );
 
 MenuProfile.storyName = "Profile Menu";
 MenuProfile.args = {
     name: "Just Yogurt",
     subtitle: "To brie or not to brie",
 };
+
+export const MenuLogin = ({ ...args }) => (
+    <Menu>
+        <MenuControl>
+            <Button {...args} className={"flex gap-2 place-content-center"}>
+                Login
+            </Button>
+        </MenuControl>
+        <MenuContent {...args} className={"p-6"}>
+            <form className="flex flex-col gap-6" onSubmit={(e) => e.preventDefault()} action="#">
+                <Input color={args.color} radius={args.radius} label={"Username"} required />
+                <Input color={args.color} radius={args.radius} label={"Password"} type={"password"} required />
+                <div className="flex justify-between items-center gap-2">
+                    <label className="flex items-center gap-2"><input type="checkbox" className="checked:text-roman-5" />Remember me</label>
+                    <a href="#" className="hover:underline text-roman-9 dark:text-roman-5">Forgot Password?</a>
+                </div>
+                <Button {...args} type="submit">Login</Button>
+                <MenuDivider />
+                <a href="#" className="hover:underline text-tertiary-500 self-center">Sign up Here</a>
+            </form>
+        </MenuContent>
+    </Menu>
+);
+
+MenuLogin.storyName = "Login Menu";