diff --git a/src/components/Backdrop/backdrop.css b/src/components/Backdrop/backdrop.css index 9e0c51e..b208cbf 100644 --- a/src/components/Backdrop/backdrop.css +++ b/src/components/Backdrop/backdrop.css @@ -11,8 +11,6 @@ z-index: 10; } -@media (min-width: 800px) { - .document-noOverflow { - overflow: hidden; - } +.document-noOverflow { + overflow: hidden; } diff --git a/src/components/Menu/Menu.tsx b/src/components/Menu/Menu.tsx index 0fa9fcf..105d73e 100644 --- a/src/components/Menu/Menu.tsx +++ b/src/components/Menu/Menu.tsx @@ -38,9 +38,21 @@ type Props = { items: MenuItem[]; className?: string; + + /** + * The application version + */ + version?: string; }; -export function Menu({ expanded, onClose, onOpen, items, className }: Props) { +export function Menu({ + expanded, + onClose, + onOpen, + items, + className, + version = "", +}: Props) { useEffect(() => { if (expanded && onOpen) { onOpen(); @@ -77,9 +89,18 @@ export function Menu({ expanded, onClose, onOpen, items, className }: Props) { | Codex - ALPHA + ALPHA + + +
+ {items.map((item, index) => renderItem(item, index))} +
+ +
+ {version && ( + Version: {version} + )}
- {items.map((item, index) => renderItem(item, index))} diff --git a/src/components/Menu/menu.css b/src/components/Menu/menu.css index 58b1610..efaa90e 100644 --- a/src/components/Menu/menu.css +++ b/src/components/Menu/menu.css @@ -15,13 +15,20 @@ } .menu-container { + display: flex; + flex-direction: column; padding: 0.75rem; + flex: 1; } .menu-backdrop { display: none; } +.menu-items { + flex: 1; +} + .menu[aria-expanded] { transform: translatex(0); min-width: 200px; @@ -64,7 +71,7 @@ width: 100%; } -.menu-version { +.menu-state { font-size: 0.6rem; background-color: var(--codex-background-light); padding: 0.25rem; @@ -73,6 +80,14 @@ top: 1px; } +.menu-footer { + text-align: center; +} + +.menu-version { + padding: 0; +} + @media (min-width: 1000px) { .menu { transform: translatex(0px); diff --git a/src/components/Page/Page.tsx b/src/components/Page/Page.tsx index f6fddce..cc13822 100644 --- a/src/components/Page/Page.tsx +++ b/src/components/Page/Page.tsx @@ -9,9 +9,11 @@ type Props = { Right: ReactNode; items: MenuItem[]; + + version?: string; }; -export function Page({ children, Right, items }: Props) { +export function Page({ children, Right, items, version = "" }: Props) { const [open, setOpen] = useState(false); const onClose = () => { @@ -24,7 +26,12 @@ export function Page({ children, Right, items }: Props) { return (
- +
diff --git a/stories/Menu.stories.tsx b/stories/Menu.stories.tsx index 78c822a..f3e88d5 100644 --- a/stories/Menu.stories.tsx +++ b/stories/Menu.stories.tsx @@ -126,6 +126,7 @@ const Template = (p: Props) => { onOpen={p.onOpen} items={items} className="menu-noSticky" + version="1.0.0" >
); diff --git a/stories/Page.stories.tsx b/stories/Page.stories.tsx index 1c908ae..1494381 100644 --- a/stories/Page.stories.tsx +++ b/stories/Page.stories.tsx @@ -98,5 +98,6 @@ export const Default: Story = { }, ] satisfies MenuItem[], Right: , + version: "1.0.0", }, };