Intial general structure of source code and page.

src/App.css

@@ -3,3 +3,8 @@
 .App {
   text-align: center;
 }
+
+.App .App-content {
+  display: flex;
+  justify-content: center;
+}

src/App.tsx

@@ -1,19 +1,20 @@
 import './App.css';
-import { Header } from "./components/header";
+import { BrowserRouter as Router, Switch, Route, Redirect } from "react-router-dom";
-import { RegForm } from './components/regForm';
+import { Main } from './pages/Main';
-import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
+import { Registration } from './pages/Registration';
 
 export default function App() {
   return (
     <Router>
       <Switch>
-        <Route exact path="/">
+        <Route exact path="/:page">
           <div className="App">
-            <Header />
+            <Main />
           </div>
         </Route>
-        <Route path="/registration/:id" component={RegForm} />
+        <Route path="/registration/:id" component={Registration} />
+        <Redirect from="/" to="/program" />
       </Switch>
-    </Router>
+    </Router >
   );
 }

src/components/Header.tsx

@@ -1,4 +1,4 @@
-import "./../styles/header.css"
+import "./styles/header.css"
 
 export const Header = () => {
     return (

src/components/Menu.tsx

@@ -0,0 +1,56 @@
+import "./styles/menu.css";
+
+export const Menu = () => {
+    return (
+        <article>
+            <h1>Menu</h1>
+            <table>
+                <tr>
+                    <th></th>
+                    <th>Starters</th>
+                    <th></th>
+                </tr>
+                <tr>
+                    <td>Chrumky</td>
+                    <td>Very good yummy yummy. Lorem ipsum dolor sit amet.</td>
+                    <td>Nuts</td>
+                </tr>
+                <tr>
+                    <td>Halusky</td>
+                    <td>Fatty fat stuff.</td>
+                    <td>Meat, fat</td>
+                </tr>
+                <tr>
+                    <th></th>
+                    <th>Main dish</th>
+                    <th></th>
+                </tr>
+                <tr>
+                    <td>Chrumky</td>
+                    <td>Very good yummy yummy. Lorem ipsum dolor sit amet.</td>
+                    <td>Nuts</td>
+                </tr>
+                <tr>
+                    <td>Halusky</td>
+                    <td>Fatty fat stuff.</td>
+                    <td>Meat, fat</td>
+                </tr>
+                <tr>
+                    <th></th>
+                    <th>Dessert</th>
+                    <th></th>
+                </tr>
+                <tr>
+                    <td>Chrumky</td>
+                    <td>Very good yummy yummy. Lorem ipsum dolor sit amet.</td>
+                    <td>Nuts</td>
+                </tr>
+                <tr>
+                    <td>Halusky</td>
+                    <td>Fatty fat stuff.</td>
+                    <td>Meat, fat</td>
+                </tr>
+            </table>
+        </article>
+    )
+}

src/components/NotFound.tsx

@@ -0,0 +1,10 @@
+import "./styles/notFound.css";
+
+export const NotFound = () => {
+    return (
+        <article>
+            <h1>Page not found</h1>
+            <p>Check the link address...</p>
+        </article>
+    )
+}

src/components/Program.tsx

@@ -0,0 +1,57 @@
+import { Link } from 'react-router-dom';
+import "./styles/program.css";
+
+export const Program = () => {
+    return (
+        <article>
+            <h1>Program</h1>
+            <table>
+                <tr>
+                    <th></th>
+                    <th>12:00</th>
+                    <th></th>
+                </tr>
+                <tr>
+                    <td>Speech</td>
+                    <td>Boring BS. Lorem ipsum dolor sit amet.</td>
+                    <td>Veikko</td>
+                </tr>
+                <tr>
+                    <td>Lunch</td>
+                    <td>Eating yummy yum.</td>
+                    <td><Link to="/menu" >To menu</Link></td>
+                </tr>
+                <tr>
+                    <th></th>
+                    <th>14:00</th>
+                    <th></th>
+                </tr>
+                <tr>
+                    <td>Games</td>
+                    <td>Activity lol.</td>
+                    <td>Be active.</td>
+                </tr>
+                <tr>
+                    <td>More something</td>
+                    <td>Lorem ipsum dolor sit amet.</td>
+                    <td>More more more</td>
+                </tr>
+                <tr>
+                    <th></th>
+                    <th>23:00</th>
+                    <th></th>
+                </tr>
+                <tr>
+                    <td>More something</td>
+                    <td>Lorem ipsum dolor sit amet.</td>
+                    <td>More more more</td>
+                </tr>
+                <tr>
+                    <td>More something</td>
+                    <td>Lorem ipsum dolor sit amet.</td>
+                    <td>More more more</td>
+                </tr>
+            </table>
+        </article>
+    )
+}

src/components/RegForm.tsx

@@ -1,8 +1,8 @@
-import { Button, Checkbox, Col, Form, Input, Row, Select, Space } from 'antd';
+import { Button, Checkbox, Col, Form, Input, Row, Select } from 'antd';
 import { useParams } from 'react-router';
 import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
 
-import "./../styles/registration.css"
+import "./styles/regForm.css";
 import { addVisitor } from '../api';
 import { arrayToString, capFirstLetter } from './utils';
 import { Visitor } from '../model/visitor';
@@ -49,7 +49,7 @@ export const RegForm = () => {
                     <>
                         {
                             fields.map(field => (
-                                <div className="visitorContainer" key={field.key}>
+                                <div className="visitors" key={field.key}>
                                     <div className="nameBar">
                                         <Form.Item
                                             label="Name"

src/components/SideNav.tsx

@@ -0,0 +1,13 @@
+import "./styles/sideNav.css";
+import { Link } from 'react-router-dom';
+
+export const SideNav = () => {
+    return (
+        <aside className="SideNav">
+            <ul>
+                <li><Link to="/menu">Menu</Link></li>
+                <li><Link to="/program">Program</Link></li>
+            </ul>
+        </aside>
+    )
+}

src/components/styles/header.css

@@ -1,6 +1,5 @@
 .App-header {
   background-color: #282c34;
-  min-height: 100vh;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -8,3 +7,7 @@
   font-size: calc(10px + 2vmin);
   color: white;
 }
+
+.App-header h1 {
+  color: white;
+}

src/components/styles/menu.css

@@ -0,0 +1,21 @@
+table {
+  width: 100%;
+}
+
+table,
+td,
+th {
+  border-bottom: 1px solid black;
+}
+
+th {
+  height: 10vh;
+}
+
+tr {
+  line-break: auto;
+}
+th,
+td {
+  width: 33%;
+}

src/components/styles/program.css

@@ -0,0 +1,21 @@
+table {
+  width: 100%;
+}
+
+table,
+td,
+th {
+  border-bottom: 1px solid black;
+}
+
+th {
+  height: 10vh;
+}
+
+tr {
+  line-break: auto;
+}
+th,
+td {
+  width: 33%;
+}

src/components/styles/regForm.css

@@ -9,7 +9,7 @@ form#registration {
   align-items: baseline;
 }
 
-.visitorContainer {
+.visitors {
   margin-top: 1em;
   margin-bottom: 1em;
   padding: 1em;

src/components/styles/sideNav.css

@@ -0,0 +1,3 @@
+.SideNav {
+  width: 333px;
+}

src/pages/Main.tsx

@@ -0,0 +1,27 @@
+import "./styles/main.css";
+
+import { useParams } from "react-router-dom";
+import { Menu } from '../components/Menu';
+import { Header } from '../components/Header';
+import { SideNav } from '../components/SideNav';
+import { Program } from '../components/Program';
+import { NotFound } from '../components/NotFound';
+
+interface MainParams {
+    page: string
+}
+
+export const Main = () => {
+    const { page } = useParams<MainParams>()
+
+    return (
+        <>
+            <Header />
+            <section className="App-content">
+                <SideNav />
+                {page === "menu" ? <Menu /> : page === "program" ? <Program /> : <NotFound />}
+                <div style={{ width: 333 }} />
+            </section>
+        </>
+    )
+}

src/pages/Registration.tsx

@@ -0,0 +1,15 @@
+import "./styles/registration.css";
+
+import { Header } from '../components/Header'
+import { RegForm } from '../components/RegForm'
+
+export const Registration = () => {
+    return (
+        <>
+            <Header />
+            <div className="Registration-form">
+                <RegForm />
+            </div>
+        </>
+    )
+}

src/pages/styles/registration.css

@@ -0,0 +1,4 @@
+.Registration-form {
+  display: flex;
+  justify-items: center;
+}