Improve demo layout (#2813)

FormidableLabs · Feb 16, 2024 · 4ddd5ae · 4ddd5ae
1 parent 7da7909
commit 4ddd5ae
Show file tree

Hide file tree

Showing 2 changed files with 121 additions and 56 deletions.
diff --git a/demo/ts/app.tsx b/demo/ts/app.tsx
@@ -116,6 +116,47 @@ interface AppState {
   route: string;
 }
 
+const containerStyle = {
+  fontFamily: "sans-serif",
+  display: "flex",
+  gap: "20px",
+  height: "100vh",
+  overflow: "hidden",
+};
+
+const sidebarStyle = {
+  flexShrink: "0",
+  width: "240px",
+  borderRight: "1px solid #ddd",
+  overflow: "auto",
+  padding: "0 20px 20px",
+};
+
+const mainStyle = {
+  overflow: "auto",
+};
+
+const listStyle = {
+  display: "flex",
+  flexDirection: "column",
+  gap: "8px",
+  listStyle: "none",
+  padding: "0",
+  margin: "0",
+} as const;
+
+const linkStyle = {
+  color: "black",
+  fontSize: "14px",
+  textDecoration: "none",
+};
+
+const activeLinkStyle = {
+  ...linkStyle,
+  fontWeight: "bold",
+  textDecoration: "underline",
+};
+
 class App extends React.Component<any, AppState> {
   constructor(props: any) {
     super(props);
@@ -142,19 +183,29 @@ class App extends React.Component<any, AppState> {
     const Child = this.getDemo();
     const routes = keys(MAP).sort();
     return (
-      <div>
-        <h1>Demos (Typescript)</h1>
-        <ul>
-          {routes.map((route, index) => {
-            const item = MAP[route] || {};
-            return (
-              <li key={index}>
-                <a href={`#${route}`}>{item.name}</a>
-              </li>
-            );
-          })}
-        </ul>
-        <Child />
+      <div style={containerStyle}>
+        <aside style={sidebarStyle}>
+          <h1>Victory Demos</h1>
+          <ul style={listStyle}>
+            {routes.map((route, index) => {
+              const item = MAP[route] || {};
+              const isActive = this.state.route === route;
+              return (
+                <li key={index}>
+                  <a
+                    href={`#${route}`}
+                    style={isActive ? activeLinkStyle : linkStyle}
+                  >
+                    {item.name}
+                  </a>
+                </li>
+              );
+            })}
+          </ul>
+        </aside>
+        <main style={mainStyle}>
+          <Child />
+        </main>
       </div>
     );
   }

diff --git a/demo/ts/index.html b/demo/ts/index.html
@@ -1,45 +1,59 @@
-<!doctype html>
+<!DOCTYPE html>
 <html>
-<head>
-  <!--[if lt IE 9]>
-    <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv-printshiv.js"></script>
-  <![endif]-->
-  <meta charset="utf-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-  <title>Demo (Typescript)</title>
-  <meta name="description" content="">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
-  <style type="text/css">
-    * {
-      box-sizing: border-box;
-    }
-    .tile {
-      display: block;
-      float: left;
-      width: 100px;
-      height: 100px;
-      margin: 20px;
-    }
-    .tile img {
-      display: block;
-      width: 100px;
-      height: 100px;
-    }
-    .demo {
-      width: 80%;
-      margin: auto;
-      position: relative;
-    }
-  </style>
-  <link href='https://fonts.googleapis.com/css?family=Poppins' rel='stylesheet' type='text/css'>
-</head>
-<body>
-  <!--[if lt IE 8]>
-    <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
-  <![endif]-->
-  <div id="content">
-    <h3>Loading...</h3>
-  </div>
-  <script type="text/javascript" src="assets/main.js"></script>
-</body>
+  <head>
+    <!--[if lt IE 9]>
+      <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv-printshiv.js"></script>
+    <![endif]-->
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+    <title>Demo (Typescript)</title>
+    <meta name="description" content="" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <style type="text/css">
+      * {
+        box-sizing: border-box;
+      }
+      body {
+        margin: 0;
+      }
+      .tile {
+        display: block;
+        float: left;
+        width: 100px;
+        height: 100px;
+        margin: 20px;
+      }
+      .tile img {
+        display: block;
+        width: 100px;
+        height: 100px;
+      }
+      .demo {
+        width: 80%;
+        margin: auto;
+        position: relative;
+      }
+    </style>
+    <link
+      href="https://fonts.googleapis.com/css?family=Poppins"
+      rel="stylesheet"
+      type="text/css"
+    />
+  </head>
+  <body>
+    <!--[if lt IE 8]>
+      <p class="browsehappy">
+        You are using an <strong>outdated</strong> browser. Please
+        <a href="http://browsehappy.com/">upgrade your browser</a> to improve
+        your experience.
+      </p>
+    <![endif]-->
+    <div id="content">
+      <h3>Loading...</h3>
+    </div>
+    <script type="text/javascript" src="assets/main.js"></script>
+  </body>
 </html>