Add the app version (#16)

src/components/Backdrop/backdrop.css

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

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) {
             <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>
-          {items.map((item, index) => renderItem(item, index))}
         </div>
       </aside>
     </>

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

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 (
     <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} />

stories/Menu.stories.tsx

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

stories/Page.stories.tsx

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