Add the app version (#16)

This commit is contained in:
Arnaud 2024-09-16 17:26:17 +02:00 committed by GitHub
parent f911de93f4
commit 50af3fe96b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 53 additions and 10 deletions

View File

@ -11,8 +11,6 @@
z-index: 10;
}
@media (min-width: 800px) {
.document-noOverflow {
.document-noOverflow {
overflow: hidden;
}
}

View File

@ -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,10 +89,19 @@ export function Menu({ expanded, onClose, onOpen, items, className }: Props) {
<LogoInverse width={50} />
<span className="menu-separator">|</span>
<span className="menu-name">Codex</span>
<span className="menu-version">ALPHA</span>
<span className="menu-state">ALPHA</span>
</div>
<div className="menu-items">
{items.map((item, index) => renderItem(item, index))}
</div>
<div className="menu-footer">
{version && (
<small className="menu-version">Version: {version}</small>
)}
</div>
</div>
</aside>
</>
);

View File

@ -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);

View File

@ -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 (
<div className="page">
<Menu expanded={open} onClose={onClose} items={items}></Menu>
<Menu
expanded={open}
onClose={onClose}
items={items}
version={version}
></Menu>
<main className="page-main">
<AppBar onExpand={onExpand} Right={Right} />

View File

@ -126,6 +126,7 @@ const Template = (p: Props) => {
onOpen={p.onOpen}
items={items}
className="menu-noSticky"
version="1.0.0"
></Menu>
</div>
);

View File

@ -98,5 +98,6 @@ export const Default: Story = {
},
] satisfies MenuItem[],
Right: <NetworkIndicator online={true} text="Online" />,
version: "1.0.0",
},
};