10 files changed, 531 insertions, 247 deletions

diff --git a/package.json b/package.json
index f49df56..24040cc 100644
--- a/package.json
+++ b/package.json
@@ -10,8 +10,10 @@
   },
   "license": "MIT",
   "dependencies": {
+    "bootstrap": "^5.1.3",
     "classnames": "^2.3.1",
     "react": "^17.0.2",
+    "react-bootstrap": "^2.1.1",
     "react-dom": "^17.0.2",
     "react-json-view": "^1.21.3"
   },
diff --git a/src/_reset.scss b/src/_reset.scss
deleted file mode 100644
index ed11813..0000000
--- a/src/_reset.scss
+++ /dev/null
@@ -1,48 +0,0 @@
-/* http://meyerweb.com/eric/tools/css/reset/
-   v2.0 | 20110126
-   License: none (public domain)
-*/
-
-html, body, div, span, applet, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
-del, dfn, em, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
-b, u, i, center,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, embed,
-figure, figcaption, footer, header, hgroup,
-menu, nav, output, ruby, section, summary,
-time, mark, audio, video {
-        margin: 0;
-        padding: 0;
-        border: 0;
-        font-size: 100%;
-        font: inherit;
-        vertical-align: baseline;
-}
-/* HTML5 display-role reset for older browsers */
-article, aside, details, figcaption, figure,
-footer, header, hgroup, menu, nav, section {
-        display: block;
-}
-body {
-        line-height: 1;
-}
-ol, ul {
-        list-style: none;
-}
-blockquote, q {
-        quotes: none;
-}
-blockquote:before, blockquote:after,
-q:before, q:after {
-        content: '';
-        content: none;
-}
-table {
-        border-collapse: collapse;
-        border-spacing: 0;
-}
diff --git a/src/components/App/App.module.scss b/src/components/App/App.module.scss
index 2036eb9..9837cdf 100644
--- a/src/components/App/App.module.scss
+++ b/src/components/App/App.module.scss
@@ -1,55 +1,3 @@
-.app {
-  display: flex;
-  flex-flow: column nowrap;
-  grid-template-rows: auto 1fr;
-  height: 100vh;
-  overflow: hidden;
-}
-
-.main {
-  display: flex;
-  flex-flow: row nowrap;
-  flex-grow: 1;
-  overflow: hidden;
-}
-
-.header {
-  font-size: 1.2em;
-  display: flex;
-  flex-flow: row nowrap;
-  align-items: center;
-  justify-content: space-between;
-  background: black;
-  color: white;
-  padding: 1em;
-
-  a {
-    color: white;
-  }
-}
-
-.sidebar {
-  width: calc((6 / 16) * 100%);
-  height: 100%;
-  grid-area: sidebar;
-  border-right: 1px solid black;
-  overflow-y: auto;
-
-  li {
-    border-bottom: 1px solid gray;
-  }
-}
-
-.details {
-  width: calc((10 / 16) * 100%);
-  overflow: hidden;
-  height: 100%;
-}
-
-.noRequest, .noRequestSelected {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
+.content {
+  flex: 1 0 auto;
 }
diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx
index e361aa5..61f88f6 100644
--- a/src/components/App/App.tsx
+++ b/src/components/App/App.tsx
@@ -6,6 +6,8 @@ import styles from './App.module.scss';
 import Details from "../Details/Details";
 import RequestSummary from "../RequestSummary/RequestSummary";
 import {getHost} from "../../utils";
+import {Container, Navbar, Col, Row, Nav, ListGroup} from "react-bootstrap";
+import classNames from "classnames";
 
 interface Config {
   url: string
@@ -50,29 +52,59 @@ export default function App() {
   ), [selectedRequestIndex, calls]);
 
   return config && (
-    <div className={styles.app}>
-      <header className={styles.header}>
-        {statusMap[readyState]} TTUN
-        <a href={config.url} target="_blank">{config.url}</a>
-      </header>
-      <main className={styles.main}>
-        <ul className={styles.sidebar}>
-          {
-            calls.length > 0
-              ? calls.slice(0).reverse().map((requestResponse, index) => (
-                <li onClick={() => setSelectedRequestIndex(calls.length - index - 1)} key={`request-${index}`}>
-                  <RequestSummary requestResponse={requestResponse} />
-                </li>
-              ))
-              : (
-                <div className={styles.noRequest}>
-                  <p>No requests</p>
-                </div>
-              )
-          }
-        </ul>
+    <>
+      <Navbar
+        bg="dark"
+        variant="dark"
+        expand
+      >
+        <Container fluid>
+          <Navbar.Brand>
+            {statusMap[readyState]} TTUN
+          </Navbar.Brand>
+          <Navbar.Text>
+            <a href={config.url} target="_blank">{config.url}</a>
+          </Navbar.Text>
+        </Container>
+      </Navbar>
+      <Container>
 
-        <div className={styles.details}>
+      </Container>
+      <Row className={classNames(styles.content, 'gx-0', 'overflow-hidden')}>
+        <Col className='border-end overflow-auto' xs={4}>
+          <ListGroup variant='flush'>
+            {
+              calls.length > 0
+                ? (
+                  calls.slice(0).reverse().map((requestResponse, index) => {
+                    const selected = selectedRequestIndex === calls.length - index - 1;
+                    return (
+                      <ListGroup.Item
+                        onClick={() => setSelectedRequestIndex(calls.length - index - 1)}
+                        key={`request-${index}`}
+                        className={classNames({
+                          'bg-primary': selected,
+                          'text-light': selected,
+                          'border-bottom': true
+                        })}
+                      >
+                        <RequestSummary
+                          requestResponse={requestResponse}
+                          selected={selected}
+                        />
+                      </ListGroup.Item>
+                    )
+                  })
+                )
+                : (
+                  <div className={styles.noRequest}>
+                    <p>No requests</p>
+                  </div>
+                )
+            }
+          </ListGroup>
+        </Col>
+        <Col xs={8} className=''>
           {
             selectedRequest !== null
               ? (
@@ -83,8 +115,44 @@ export default function App() {
                 </div>
               )
           }
-        </div>
-      </main>
-    </div>
+        </Col>
+      </Row>
+    </>
+    // <div className={styles.app}>
+    //   <header className={styles.header}>
+    //     {statusMap[readyState]} TTUN
+    //     <a href={config.url} target="_blank">{config.url}</a>
+    //   </header>
+    //   <main className={styles.main}>