Add the app version (#16)
This commit is contained in:
parent
f911de93f4
commit
50af3fe96b
|
@ -11,8 +11,6 @@
|
|||
z-index: 10;
|
||||
}
|
||||
|
||||
@media (min-width: 800px) {
|
||||
.document-noOverflow {
|
||||
.document-noOverflow {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
</>
|
||||
);
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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} />
|
||||
|
|
|
@ -126,6 +126,7 @@ const Template = (p: Props) => {
|
|||
onOpen={p.onOpen}
|
||||
items={items}
|
||||
className="menu-noSticky"
|
||||
version="1.0.0"
|
||||
></Menu>
|
||||
</div>
|
||||
);
|
||||
|
|
|
@ -98,5 +98,6 @@ export const Default: Story = {
|
|||
},
|
||||
] satisfies MenuItem[],
|
||||
Right: <NetworkIndicator online={true} text="Online" />,
|
||||
version: "1.0.0",
|
||||
},
|
||||
};
|
||||
|
|
Loading…
Reference in New Issue