fixed side nav

web/pages/components/main-layout.tsx

@@ -81,10 +81,7 @@ export default function MainLayout(props) {
       
       <Sider
         width={240}
-        style={{
+        className={adminStyles.sideNav}
-          overflow: "auto",
-          height: "100vh",
-        }}
       >
         <Menu
           theme="dark"
@@ -153,7 +150,7 @@ export default function MainLayout(props) {
         </Menu>
       </Sider>
 
-      <Layout>
+      <Layout className={adminStyles.layoutMain}>
         <Header className={adminStyles.header}>
         <Popover content={content} title="Thumbnail" trigger="hover">
           <div className={adminStyles.statusIndicatorContainer}>

web/pages/index.tsx

@@ -6,6 +6,17 @@ Will display an overview with the following datasources:
 3. Video settings.
 
 TODO: Link each overview value to the sub-page that focuses on it.
+
+GW: to do:
+- fix side nav on long pages
+- Hardware + Viewer count views-  top 3 boxes - restyle
+- "Current stream" - rename to "latest" stream?
+- Home  - more box shadoe?
+- "Viewers" section - not "current viewers"
+- maybe not have "current stream" nav section
+- put viewers table info on Home
+  - maybe make outbound/inbound smaller (since it's fixed info for current stream)
+- reformat "Inbound Video Stream" section.
 */
 
 import React, { useState, useEffect, useContext } from "react";

web/styles/styles.module.css

@@ -39,6 +39,17 @@
   padding-right: 1rem;
 }
 
+.sideNav {
+  position: fixed;
+  height: 100vh;
+  overflow: auto;
+  z-index: 10;
+}
+
+.layoutMain {
+  margin-left: 240px;
+}
+
 .statusIndicatorContainer {
   display: flex;
   flex-direction: row;