Blink

tauri-runner/package.json

@@ -10,21 +10,22 @@
     "tauri": "tauri"
   },
   "dependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "@tauri-apps/api": "^1.0.2",
     "@emotion/react": "^11.8.2",
     "@emotion/styled": "^11.8.1",
     "@mui/icons-material": "^5.5.1",
-    "@mui/material": "^5.5.1"
+    "@mui/material": "^5.5.1",
+    "@tauri-apps/api": "^1.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.4.0"
   },
   "devDependencies": {
+    "@tauri-apps/cli": "^1.0.5",
     "@types/node": "^18.7.10",
     "@types/react": "^18.0.15",
     "@types/react-dom": "^18.0.6",
     "@vitejs/plugin-react": "^2.0.0",
     "typescript": "^4.6.4",
-    "vite": "^3.0.2",
-    "@tauri-apps/cli": "^1.0.5"
+    "vite": "^3.0.2"
   }
 }

tauri-runner/src/App.tsx

@@ -1,21 +1,17 @@
-import { useState } from "react";
-import StepOneContent from "./step-one-content";
-import StepTwoContent from "./step-two-content";
+import { Outlet } from 'react-router-dom';
+import Sidebar from "./components/Sidebar/Sidebar";
+import "./app.css";
 
 function App() {
-    const [commands, setCommands] = useState([] as string[]);
-
-    const getCommands = (cmds: string[]) => {
-        setCommands(cmds);
-     }
   return (
-    <div className="container">
-      <h1> NPM Dev Runner (beta) </h1>
-
-      <StepOneContent liftCommands={getCommands}/>
-      <StepTwoContent commands={commands}/>
-
-    </div>
+    <>
+        <div id="sidebar">
+            <Sidebar />
+        </div>
+        <div id="detail">
+            <Outlet />
+        </div>
+    </>
   );
 }
 

tauri-runner/src/app.css

@@ -0,0 +1,17 @@
+#root {
+    display: flex;
+    height: 100%;
+    width: 100%;
+}
+
+#sidebar {
+    border-right: solid 1px #e3e3e3;
+    display: flex;
+    flex-direction: column;
+}
+
+#detail {
+    flex: 1;
+    padding: 2rem 4rem;
+    width: 100%;
+}

tauri-runner/src/components/Sidebar/Sidebar.tsx

@@ -0,0 +1,20 @@
+import "./sidebar.css";
+import {Link} from "react-router-dom";
+
+function Sidebar() {
+    return (<>
+
+<nav className="nav-trans">
+    <ul className="sidebar-items">
+        <li className="sidebar-item">
+            <Link to={'runner'}>Runner</Link>
+        </li>
+        <li className="sidebar-item">
+            <Link to={'results-history'}>Results History</Link>
+        </li>
+    </ul>
+</nav>
+</>
+);
+}
+export default Sidebar;

tauri-runner/src/components/Sidebar/sidebar.css

@@ -0,0 +1,36 @@
+.link {
+    text-transform: uppercase;
+    text-decoration: none;
+    color: #e7e8f2;
+    font-size: 13px;
+    opacity: 0.8;
+}
+.link:hover {
+    opacity: 1;
+}
+
+li {
+    list-style-type: none;
+}
+
+.sidebar-items {
+    width: 203px;
+    padding: 0;
+    margin: 45px 0 0;
+    visibility: visible;
+    /* animation: linear 260ms hidden; */
+}
+
+.sidebar-item {
+    align-items: center;
+    display: flex;
+    box-sizing: content-box;
+    height: 32px;
+    padding: 0 16px 0 16px;
+    vertical-align: middle;
+    cursor: pointer;
+}
+
+.sidebar-item:hover {
+    background-color: rgba(44,45,82, .5);
+}

tauri-runner/src/main.tsx

@@ -1,10 +1,11 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
-import App from "./App";
+import {RouterProvider} from 'react-router-dom';
+import {router} from "./router";
 import "./style.css";
 
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
   <React.StrictMode>
-    <App />
+    <RouterProvider router={router} />
   </React.StrictMode>
 );

tauri-runner/src/pages/runner/Runner.tsx

@@ -0,0 +1,27 @@
+import StepOneContent from "./step-one-content";
+import StepTwoContent from "./step-two-content";
+import {useState} from "react";
+import "./runner.css";
+
+
+function Runner() {
+    const [commands, setCommands] = useState([] as string[]);
+
+    const getCommands = (cmds: string[]) => {
+        setCommands(cmds);
+    }
+
+    return (
+        <>
+          <div className="container">
+                <h1> NPM Dev Runner (beta) </h1>
+
+                <StepOneContent liftCommands={getCommands}/>
+                <StepTwoContent commands={commands}/>
+
+            </div>
+        </>
+    );
+}
+
+export default Runner;

tauri-runner/src/pages/runner/runner.css

@@ -0,0 +1,57 @@
+.container {
+    margin: 0;
+    padding-top: 10vh;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    text-align: center;
+}
+
+
+input {
+    width: 60%;
+}
+
+input,
+button {
+    border-radius: 8px;
+    border: 1px solid transparent;
+    padding: 0.6em 1.2em;
+    font-size: 1em;
+    font-weight: 500;
+    font-family: inherit;
+    color: #0f0f0f;
+    background-color: #ffffff;
+    transition: border-color 0.25s;
+    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
+}
+
+button {
+    cursor: pointer;
+}
+
+button:hover {
+    border-color: #396cd8;
+}
+
+input,
+button {
+    outline: none;
+}
+
+.textField {
+    width: 600px;
+}
+
+.alertPos {
+    width: 600px;
+    transform: translateY(5px);
+}
+
+.btnPos {
+    transform: translateY(10px);
+}
+
+.nextButtonsG {
+    padding-top: 10px;
+}

tauri-runner/src/router.tsx

@@ -0,0 +1,24 @@
+import {createBrowserRouter} from 'react-router-dom';
+import App from './App';
+import Runner from "./pages/runner/Runner";
+
+export const router = createBrowserRouter([
+    {
+path: '',
+    element: <App />,
+    children: [
+    {
+        path: 'runner',
+        element: <Runner/>,
+    },
+    {
+        path: 'results-history',
+        element: 'Results History'
+    },
+    {
+        path: 'p3',
+        element: `page 3 `,
+    },
+],
+},
+]);

tauri-runner/src/style.css

@@ -4,87 +4,28 @@
   line-height: 24px;
   font-weight: 400;
 
-  color: #0f0f0f;
-  background-color: #f6f6f6;
-
   font-synthesis: none;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   -webkit-text-size-adjust: 100%;
-}
-
-.container {
-  margin: 0;
-  padding-top: 10vh;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  text-align: center;
-}
-
-
-input {
-  width: 60%;
-}
-
-input,
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  color: #0f0f0f;
-  background-color: #ffffff;
-  transition: border-color 0.25s;
-  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
-}
 
-button {
-  cursor: pointer;
+  height: 100%;
+  box-sizing: border-box;
+  background-color: #191a2e;
+  color: #e7e8f2;
 }
 
-button:hover {
-  border-color: #396cd8;
+* {
+  box-sizing: border-box;
 }
 
-input,
-button {
-  outline: none;
-}
-
-.textField {
-  width: 600px;
-}
-
-.alertPos {
-  width: 600px;
-  transform: translateY(5px);
-}
-
-.btnPos {
-  transform: translateY(10px);
-}
-
-.nextButtonsG {
-  padding-top: 10px;
+body {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  position: relative;
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    color: #f6f6f6;
-    background-color: #2f2f2f;
-  }
 
-  a:hover {
-    color: #24c8db;
-  }
 
-  input,
-  button {
-    color: #ffffff;
-    background-color: #0f0f0f98;
-  }
-}