a bit of refactor, use context for overall broacast status; move files around for routing

web/pages/components/main-layout.tsx

@@ -0,0 +1,119 @@
+import React, { useContext } from 'react';
+import PropTypes from 'prop-types';
+import Link from 'next/link';
+import { useRouter } from 'next/router';
+import { Layout, Menu } from 'antd';
+import {
+  SettingOutlined,
+  HomeOutlined,
+  LineChartOutlined,
+  CloseCircleOutlined,
+  PlayCircleFilled,
+} from '@ant-design/icons';
+import classNames from 'classNames';
+
+
+import OwncastLogo from './logo';
+import { BroadcastStatusContext } from '../utils/broadcast-status-context';
+
+import adminStyles from '../../styles/styles.module.css';
+
+export default function MainLayout(props) {
+  const { children } = props;
+
+  const context = useContext(BroadcastStatusContext);
+  const { broadcastActive } = context || {};
+
+  const router = useRouter();
+  const { route } = router || {};
+
+  const { Header, Footer, Content, Sider } = Layout;
+  const { SubMenu } = Menu;
+
+  const statusMessage = broadcastActive ?
+    'Online' : 'Offline';
+
+  const appClass = classNames({
+    'owncast-layout': true,
+    [adminStyles.online]: broadcastActive,
+  })
+  return (
+    <Layout className={appClass}>
+      <Sider
+        width={240}
+        style={{
+          overflow: 'auto',
+          height: '100vh',
+        }}
+      >
+        <Menu
+          theme="dark"
+          defaultSelectedKeys={[route.substring(1)]}
+          defaultOpenKeys={['current-stream-menu', 'utilities-menu']}
+          mode="inline"
+        >
+          <h1 className={adminStyles.owncastTitleContainer}>
+            <span className={adminStyles.logoContainer}>
+              <OwncastLogo />
+            </span>
+            <span className={adminStyles.owncastTitle}>Owncast Admin</span>
+          </h1>
+          <Menu.Item key="home" icon={<HomeOutlined />}>
+            <Link href="/index2">Home</Link>
+          </Menu.Item>
+
+          <SubMenu key="current-stream-menu" icon={<LineChartOutlined />} title="Stream Details">
+            <Menu.Item key="hardware-info">
+              <Link href="/hardware-info">Hardware</Link>
+            </Menu.Item>
+            <Menu.Item key="broadcast-info">
+              <Link href="/broadcast-info">Broadcaster Info</Link>
+            </Menu.Item>
+            <Menu.Item key="viewer-info">
+              <Link href="/viewer-info">Viewers</Link>
+            </Menu.Item>
+            <Menu.Item key="connected-clients">
+              <Link href="/connected-clients">Connected Clients</Link>
+            </Menu.Item>
+            { broadcastActive ? (
+              <Menu.Item key="disconnect-stream" icon={<CloseCircleOutlined />}>
+                <Link href="/disconnect-stream">Disconnect Stream...</Link>
+              </Menu.Item>
+             ) : null}
+          </SubMenu>
+          
+          <SubMenu key="utilities-menu" icon={<SettingOutlined />} title="Utilities">
+            <Menu.Item key="update-server-config">
+              <Link href="/update-server-config">Update Server Configuration</Link>
+            </Menu.Item>
+            <Menu.Item key="update-stream-key">
+              <Link href="/update-stream-key">Change Stream Key</Link>
+            </Menu.Item>
+          </SubMenu>
+        </Menu>
+      </Sider>
+
+      <Layout>
+        <Header className={adminStyles.header}>
+          <div className={adminStyles.statusIndicatorContainer}>
+          <span className={adminStyles.statusIcon}>
+            <PlayCircleFilled />
+          </span>
+            <span className={adminStyles.statusLabel}>
+              {statusMessage}
+            </span>
+          </div>
+        </Header>
+        <Content className={adminStyles.contentMain}>
+          {children}
+        </Content>
+      
+        <Footer style={{ textAlign: 'center' }}><a href="https://owncast.online/">About Owncast</a></Footer>
+      </Layout>
+    </Layout>
+  );
+}
+
+MainLayout.propTypes = {
+  children: PropTypes.element.isRequired,
+};