Added Menu Documentation

src/components/SistentNavigation/content.js

@@ -79,55 +79,59 @@ export const content = [
   { id: 57, link: "/projects/sistent/components/list/guidance", text: "List" },
   { id: 58, link: "/projects/sistent/components/list/code", text: "List" },
 
-  { id: 59, link: "/projects/sistent/components/modal", text: "Modal" },
-  { id: 60, link: "/projects/sistent/components/modal/guidance", text: "Modal" },
-  { id: 61, link: "/projects/sistent/components/modal/code", text: "Modal" },
+  { id: 59, link: "/projects/sistent/components/menu", text: "Menu" },
+  { id: 60, link: "/projects/sistent/components/menu/guidance", text: "Menu" },
+  { id: 61, link: "/projects/sistent/components/menu/code", text: "Menu" },
 
-  { id: 62, link: "/projects/sistent/components/pagination", text: "Pagination" },
-  { id: 63, link: "/projects/sistent/components/pagination/guidance", text: "Pagination" },
-  { id: 64, link: "/projects/sistent/components/pagination/code", text: "Pagination" },
+  { id: 62, link: "/projects/sistent/components/modal", text: "Modal" },
+  { id: 63, link: "/projects/sistent/components/modal/guidance", text: "Modal" },
+  { id: 64, link: "/projects/sistent/components/modal/code", text: "Modal" },
 
-  { id: 65, link: "/projects/sistent/components/paper", text: "Paper" },
-  { id: 66, link: "/projects/sistent/components/paper/guidance", text: "Paper" },
-  { id: 67, link: "/projects/sistent/components/paper/code", text: "Paper" },
+  { id: 65, link: "/projects/sistent/components/pagination", text: "Pagination" },
+  { id: 66, link: "/projects/sistent/components/pagination/guidance", text: "Pagination" },
+  { id: 67, link: "/projects/sistent/components/pagination/code", text: "Pagination" },
 
-  { id: 68, link: "/projects/sistent/components/popper", text: "Popper" },
-  { id: 69, link: "/projects/sistent/components/popper/guidance", text: "Popper" },
-  { id: 70, link: "/projects/sistent/components/popper/code", text: "Popper" },
+  { id: 68, link: "/projects/sistent/components/paper", text: "Paper" },
+  { id: 69, link: "/projects/sistent/components/paper/guidance", text: "Paper" },
+  { id: 70, link: "/projects/sistent/components/paper/code", text: "Paper" },
 
-  { id: 71, link: "/projects/sistent/components/radiogroup", text: "RadioGroup" },
-  { id: 72, link: "/projects/sistent/components/radiogroup/guidance", text: "RadioGroup" },
-  { id: 73, link: "/projects/sistent/components/radiogroup/code", text: "RadioGroup" },
+  { id: 71, link: "/projects/sistent/components/popper", text: "Popper" },
+  { id: 72, link: "/projects/sistent/components/popper/guidance", text: "Popper" },
+  { id: 73, link: "/projects/sistent/components/popper/code", text: "Popper" },
 
-  { id: 74, link: "/projects/sistent/components/select", text: "Select" },
-  { id: 75, link: "/projects/sistent/components/select/guidance", text: "Select" },
-  { id: 76, link: "/projects/sistent/components/select/code", text: "Select" },
+  { id: 74, link: "/projects/sistent/components/radiogroup", text: "RadioGroup" },
+  { id: 75, link: "/projects/sistent/components/radiogroup/guidance", text: "RadioGroup" },
+  { id: 76, link: "/projects/sistent/components/radiogroup/code", text: "RadioGroup" },
 
-  { id: 77, link: "/projects/sistent/components/stepper", text: "Stepper" },
-  { id: 78, link: "/projects/sistent/components/stepper/guidance", text: "Stepper" },
-  { id: 79, link: "/projects/sistent/components/stepper/code", text: "Stepper" },
+  { id: 77, link: "/projects/sistent/components/select", text: "Select" },
+  { id: 78, link: "/projects/sistent/components/select/guidance", text: "Select" },
+  { id: 79, link: "/projects/sistent/components/select/code", text: "Select" },
 
-  { id: 80, link: "/projects/sistent/components/switch", text: "Switch" },
-  { id: 81, link: "/projects/sistent/components/switch/guidance", text: "Switch" },
-  { id: 82, link: "/projects/sistent/components/switch/code", text: "Switch" },
+  { id: 80, link: "/projects/sistent/components/stepper", text: "Stepper" },
+  { id: 81, link: "/projects/sistent/components/stepper/guidance", text: "Stepper" },
+  { id: 82, link: "/projects/sistent/components/stepper/code", text: "Stepper" },
 
-  { id: 83, link: "/projects/sistent/components/tabs", text: "Tabs" },
-  { id: 84, link: "/projects/sistent/components/tabs/guidance", text: "Tabs" },
-  { id: 85, link: "/projects/sistent/components/tabs/code", text: "Tabs" },
+  { id: 83, link: "/projects/sistent/components/switch", text: "Switch" },
+  { id: 84, link: "/projects/sistent/components/switch/guidance", text: "Switch" },
+  { id: 85, link: "/projects/sistent/components/switch/code", text: "Switch" },
 
-  { id: 86, link: "/projects/sistent/components/text-field", text: "Text Field" },
-  { id: 87, link: "/projects/sistent/components/text-field/guidance", text: "Text Field" },
-  { id: 88, link: "/projects/sistent/components/text-field/code", text: "Text Field" },
+  { id: 86, link: "/projects/sistent/components/tabs", text: "Tabs" },
+  { id: 87, link: "/projects/sistent/components/tabs/guidance", text: "Tabs" },
+  { id: 88, link: "/projects/sistent/components/tabs/code", text: "Tabs" },
 
-  { id: 89, link: "/projects/sistent/components/text-input", text: "Text Input" },
-  { id: 90, link: "/projects/sistent/components/text-input/guidance", text: "Text Input" },
-  { id: 91, link: "/projects/sistent/components/text-input/code", text: "Text Input" },
+  { id: 89, link: "/projects/sistent/components/text-field", text: "Text Field" },
+  { id: 90, link: "/projects/sistent/components/text-field/guidance", text: "Text Field" },
+  { id: 91, link: "/projects/sistent/components/text-field/code", text: "Text Field" },
 
-  { id: 92, link: "/projects/sistent/components/toolbar", text: "Toolbar" },
-  { id: 93, link: "/projects/sistent/components/toolbar/guidance", text: "Toolbar" },
-  { id: 94, link: "/projects/sistent/components/toolbar/code", text: "Toolbar" },
+  { id: 92, link: "/projects/sistent/components/text-input", text: "Text Input" },
+  { id: 93, link: "/projects/sistent/components/text-input/guidance", text: "Text Input" },
+  { id: 94, link: "/projects/sistent/components/text-input/code", text: "Text Input" },
 
-  { id: 95, link: "/projects/sistent/components/tooltip", text: "Tooltip" },
-  { id: 96, link: "/projects/sistent/components/tooltip/guidance", text: "Tooltip" },
-  { id: 97, link: "/projects/sistent/components/tooltip/code", text: "Tooltip" },
+  { id: 95, link: "/projects/sistent/components/toolbar", text: "Toolbar" },
+  { id: 96, link: "/projects/sistent/components/toolbar/guidance", text: "Toolbar" },
+  { id: 97, link: "/projects/sistent/components/toolbar/code", text: "Toolbar" },
+
+  { id: 98, link: "/projects/sistent/components/tooltip", text: "Tooltip" },
+  { id: 99, link: "/projects/sistent/components/tooltip/guidance", text: "Tooltip" },
+  { id: 100, link: "/projects/sistent/components/tooltip/code", text: "Tooltip" },
 ];

src/sections/Projects/Sistent/components/content.js

@@ -244,6 +244,13 @@ const componentsData = [
     url: "/projects/sistent/components/stepper",
     src: "/stepper",
   },
+  {
+    id: 32,
+    name: "Menu",
+    description: "Menu provides a way to display a list of options to the user.",
+    url: "/projects/sistent/components/menu",
+    src: "/menu",
+  },
 ];
 
 module.exports = { componentsData };

src/sections/Projects/Sistent/components/menu/code.js

@@ -0,0 +1,277 @@
+import React from "react";
+import { navigate } from "gatsby";
+import { useLocation } from "@reach/router";
+
+import { SistentLayout } from "../../sistent-layout";
+import TabButton from "../../../../../reusecore/Button";
+import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
+import { SistentThemeProvider, Menu, MenuItem, MenuList, Button } from "@sistent/sistent";
+import { CodeBlock } from "../button/code-block";
+
+const codes = [
+  // Basic menu
+  `  <SistentThemeProvider>
+       <Button variant="contained" onClick={handleOpen}>Open menu</Button>
+       <Menu anchorEl={anchorEl} open={open} onClose={handleClose}>
+         <MenuItem onClick={handleClose}>Profile</MenuItem>
+         <MenuItem onClick={handleClose}>My account</MenuItem>
+         <MenuItem onClick={handleClose}>Logout</MenuItem>
+       </Menu>
+  </SistentThemeProvider>`,
+  // Positioned menu
+  `  <SistentThemeProvider>
+       <Button variant="outlined" onClick={handleOpen2}>Top-right menu</Button>
+       <Menu
+         anchorEl={anchorEl2}
+         open={open2}
+         onClose={handleClose2}
+         anchorOrigin={{ vertical: "top", horizontal: "right" }}
+         transformOrigin={{ vertical: "top", horizontal: "right" }}
+       >
+         <MenuItem onClick={handleClose2}>Settings</MenuItem>
+         <MenuItem onClick={handleClose2}>Help</MenuItem>
+       </Menu>
+  </SistentThemeProvider>`,
+  // Menu item states
+  `  <SistentThemeProvider>
+       <Button variant="text" onClick={handleOpen3}>With states</Button>
+       <Menu anchorEl={anchorEl3} open={open3} onClose={handleClose3}>
+         <MenuItem onClick={handleClose3} selected>
+           Selected
+         </MenuItem>
+         <MenuItem onClick={handleClose3} disabled>
+           Disabled
+         </MenuItem>
+         <MenuItem onClick={handleClose3}>Regular</MenuItem>
+       </Menu>
+  </SistentThemeProvider>`,
+  // Long menu with max height and auto focus item
+  `  <SistentThemeProvider>
+       <Button variant="contained" onClick={handleOpen4}>Long menu</Button>
+       <Menu
+         anchorEl={anchorEl4}
+         open={open4}
+         onClose={handleClose4}
+         MenuListProps={{ autoFocusItem: true }}
+         PaperProps={{ style: { maxHeight: 240, width: 220 } }}
+       >
+         {["Profile","My account","Dashboard","Settings","Billing","Support","Sign out"].map((label) => (
+           <MenuItem key={label} onClick={handleClose4}>{label}</MenuItem>
+         ))}
+       </Menu>
+  </SistentThemeProvider>`,
+  // Standalone MenuList
+  `  <SistentThemeProvider>
+       <MenuList autoFocusItem>
+         <MenuItem selected>Selected</MenuItem>
+         <MenuItem>Regular</MenuItem>
+         <MenuItem disabled>Disabled</MenuItem>
+       </MenuList>
+  </SistentThemeProvider>`,
+  // MenuItem as link
+  `  <SistentThemeProvider>
+       <MenuList>
+         <MenuItem component="a" href="#profile">Profile</MenuItem>
+         <MenuItem component="a" href="#account">My account</MenuItem>
+       </MenuList>
+  </SistentThemeProvider>`,
+];
+
+const MenuCode = () => {
+  const location = useLocation();
+  const { isDark } = useStyledDarkMode();
+
+  // Example 1
+  const [anchorEl, setAnchorEl] = React.useState(null);
+  const open = Boolean(anchorEl);
+  const handleOpen = (e) => setAnchorEl(e.currentTarget);
+  const handleClose = () => setAnchorEl(null);
+
+  // Example 2 (positioned)
+  const [anchorEl2, setAnchorEl2] = React.useState(null);
+  const open2 = Boolean(anchorEl2);
+  const handleOpen2 = (e) => setAnchorEl2(e.currentTarget);
+  const handleClose2 = () => setAnchorEl2(null);
+
+  // Example 3 (states)
+  const [anchorEl3, setAnchorEl3] = React.useState(null);
+  const open3 = Boolean(anchorEl3);
+  const handleOpen3 = (e) => setAnchorEl3(e.currentTarget);
+  const handleClose3 = () => setAnchorEl3(null);
+
+  // Example 4 (long)
+  const [anchorEl4, setAnchorEl4] = React.useState(null);
+  const open4 = Boolean(anchorEl4);
+  const handleOpen4 = (e) => setAnchorEl4(e.currentTarget);
+  const handleClose4 = () => setAnchorEl4(null);
+
+  return (
+    <SistentLayout title="Menu">
+      <div className="content">
+        <a id="Identity">
+          <h2>Menu</h2>
+        </a>
+        <p>
+          <code>Menu</code> is the anchored container that manages positioning, anchoring, focus, and
+          open/close behavior. It typically wraps a <code>MenuList</code>, which renders the list of
+          <code> MenuItem</code> options and handles keyboard navigation.
+        </p>
+
+        <div className="filterBtns">
+          <TabButton
+            className={
+              location.pathname === "/projects/sistent/components/menu" ? "active" : ""
+            }
+            onClick={() => navigate("/projects/sistent/components/menu")}
+            title="Overview"
+          />
+          <TabButton
+            className={
+              location.pathname === "/projects/sistent/components/menu/guidance" ? "active" : ""
+            }
+            onClick={() => navigate("/projects/sistent/components/menu/guidance")}
+            title="Guidance"
+          />
+          <TabButton
+            className={
+              location.pathname === "/projects/sistent/components/menu/code" ? "active" : ""
+            }
+            onClick={() => navigate("/projects/sistent/components/menu/code")}
+            title="Code"
+          />
+        </div>
+
+        <div className="main-content">
+          {/* Basic Menu */}
+          <a id="Basic Menu">
+            <h3>Basic Menu</h3>
+          </a>
+          <p>Attach the menu to a trigger using <code>anchorEl</code> and control its visibility with <code>open</code>.</p>
+          <div className="showcase">
+            <div className="items">
+              <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+                <Button variant="contained" onClick={handleOpen}>Open menu</Button>
+                <Menu anchorEl={anchorEl} open={open} onClose={handleClose}>
+                  <MenuItem onClick={handleClose}>Profile</MenuItem>
+                  <MenuItem onClick={handleClose}>My account</MenuItem>
+                  <MenuItem onClick={handleClose}>Logout</MenuItem>
+                </Menu>
+              </SistentThemeProvider>
+            </div>
+            <CodeBlock name="basic-menu" code={codes[0]} />
+          </div>
+
+          {/* Positioned Menu */}
+          <a id="Positioned Menu">
+            <h3>Positioned Menu</h3>
+          </a>
+          <p>Control menu placement with <code>anchorOrigin</code> and <code>transformOrigin</code>.</p>
+          <div className="showcase">
+            <div className="items">
+              <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+                <Button variant="outlined" onClick={handleOpen2}>Top-right menu</Button>
+                <Menu
+                  anchorEl={anchorEl2}
+                  open={open2}
+                  onClose={handleClose2}
+                  anchorOrigin={{ vertical: "top", horizontal: "right" }}
+                  transformOrigin={{ vertical: "top", horizontal: "right" }}
+                >
+                  <MenuItem onClick={handleClose2}>Settings</MenuItem>
+                  <MenuItem onClick={handleClose2}>Help</MenuItem>
+                </Menu>
+              </SistentThemeProvider>
+            </div>
+            <CodeBlock name="positioned-menu" code={codes[1]} />
+          </div>
+
+          {/* Menu Item States */}
+          <a id="Menu Item States">
+            <h3>Menu Item States</h3>
+          </a>
+          <p>Communicate state with <code>selected</code> and <code>disabled</code> props on MenuItem.</p>
+          <div className="showcase">
+            <div className="items">
+              <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+                <Button variant="text" onClick={handleOpen3}>With states</Button>
+                <Menu anchorEl={anchorEl3} open={open3} onClose={handleClose3}>
+                  <MenuItem onClick={handleClose3} selected>
+                    Selected
+                  </MenuItem>
+                  <MenuItem onClick={handleClose3} disabled>
+                    Disabled
+                  </MenuItem>
+                  <MenuItem onClick={handleClose3}>Regular</MenuItem>
+                </Menu>
+              </SistentThemeProvider>
+            </div>
+            <CodeBlock name="menu-item-states" code={codes[2]} />
+          </div>
+
+          {/* Long Menu */}
+          <a id="Long Menu">
+            <h3>Long Menu</h3>
+          </a>
+          <p>Constrain menu size with <code>PaperProps</code> and enable keyboard focus with <code>MenuListProps.autoFocusItem</code>.</p>
+          <div className="showcase">
+            <div className="items">
+              <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+                <Button variant="contained" onClick={handleOpen4}>Long menu</Button>
+                <Menu
+                  anchorEl={anchorEl4}
+                  open={open4}
+                  onClose={handleClose4}
+                  MenuListProps={{ autoFocusItem: true }}
+                  PaperProps={{ style: { maxHeight: 240, width: 220 } }}
+                >
+                  {["Profile","My account","Dashboard","Settings","Billing","Support","Sign out"].map((label) => (
+                    <MenuItem key={label} onClick={handleClose4}>{label}</MenuItem>
+                  ))}
+                </Menu>
+              </SistentThemeProvider>
+            </div>
+            <CodeBlock name="long-menu" code={codes[3]} />
+          </div>
+
+          {/* Standalone MenuList */}
+          <a id="Standalone MenuList">
+            <h3>Standalone MenuList</h3>
+          </a>
+          <p>Use <code>MenuList</code> directly to manage keyboard focus and selection among items without an anchored surface.</p>
+          <div className="showcase">
+            <div className="items">
+              <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+                <MenuList autoFocusItem>
+                  <MenuItem selected>Selected</MenuItem>
+                  <MenuItem>Regular</MenuItem>
+                  <MenuItem disabled>Disabled</MenuItem>
+                </MenuList>
+              </SistentThemeProvider>
+            </div>
+            <CodeBlock name="standalone-menulist" code={codes[4]} />
+          </div>
+
+          {/* MenuItem as link */}
+          <a id="MenuItem as Link">
+            <h3>MenuItem as Link</h3>
+          </a>
+          <p>Render <code>MenuItem</code> as an anchor by setting <code>component="a"</code> and <code>href</code>.</p>
+          <div className="showcase">
+            <div className="items">
+              <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+                <MenuList>
+                  <MenuItem component="a" href="#profile">Profile</MenuItem>
+                  <MenuItem component="a" href="#account">My account</MenuItem>
+                </MenuList>
+              </SistentThemeProvider>
+            </div>
+            <CodeBlock name="menuitem-link" code={codes[5]} />
+          </div>
+        </div>
+      </div>
+    </SistentLayout>
+  );
+};
+
+export default MenuCode;
+