UI Base

src/assets/stylesheets/app.scss

@@ -1,5 +1,20 @@
 * {
-    margin: 0px;
+  margin: 0px;
-    padding: 0px;
+  padding: 0px;
-    background-color: azure;
+  background-image: linear-gradient(#004990, #002554);
-}
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.container {
+  background-image: none;
+  margin: 20px;
+  padding: 0px;
+  width: calc(100% - 40px);
+  height: calc(100% - 40px);
+  outline: solid white 1px;
+  border-radius: 20px;
+  display: flex;
+  flex-direction: row;
+}

src/assets/stylesheets/home.scss

@@ -0,0 +1,7 @@
+.home {
+  background-image: none;
+  background-color: white;
+  border-radius: 20px;
+  width: 80%;
+  height: 100%;
+}

src/assets/stylesheets/navbar.scss

@@ -0,0 +1,61 @@
+.navbar {
+  background-image: none;
+  width: 20%;
+  height: 100%;
+  display: flex;
+  position: relative;
+  border-radius: 20px;
+  flex-direction: column;
+  outline: white solid 1px;
+  border-radius: 20px;
+}
+
+.navbar-top {
+  background-image: none;
+  width: 100%;
+  height: 14%;
+  padding: 5px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: white;
+}
+
+.navbar-top-logo {
+  background-image: none;
+  height: 120px;
+  width: auto;
+  aspect-ratio: 2333/1003;
+  background-color: transparent;
+  border-radius: 20px;
+}
+
+.navbar-list {
+  background-image: none;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  flex-direction: column;
+  margin: 0px;
+  padding: 0px;
+}
+
+.navbar-list-item {
+  background-image: none;
+  width: 90%;
+  height: 10%;
+  margin: 20px 0px 20px 0px;
+  background-color: rgb(255, 255, 255);
+  border-radius: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.navbar-list-item-label {
+  background-image: none;
+  width: auto;
+  height: auto;
+}

src/components/HomeComponent.js

@@ -0,0 +1,12 @@
+import React, { Component } from "react";
+import "../assets/stylesheets/home.scss";
+
+export default class HomeComponent extends Component {
+  // constructor(props) {
+  //     super(props);
+  // }
+
+  render() {
+    return <div className="home"></div>;
+  }
+}

src/components/NavBar.js

@@ -0,0 +1,31 @@
+import React, { Component } from "react";
+import { NavLink } from "react-router-dom";
+import BeldenLogo from "../assets/images/belden-logo.png";
+import "../assets/stylesheets/navbar.scss";
+
+export default class NavBar extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <div className="navbar">
+        <div className="navbar-top">
+          <img className="navbar-top-logo" src={BeldenLogo} alt="Belden" />
+        </div>
+        <ol className="navbar-list">
+          <NavLink className="navbar-list-item" to="/">
+            <span className="navbar-list-item-label">Home</span>
+          </NavLink>
+          <NavLink className="navbar-list-item" to="/search">
+            <span className="navbar-list-item-label">Search</span>
+          </NavLink>
+          <NavLink className="navbar-list-item" to="/settings">
+            <span className="navbar-list-item-label">Settings</span>
+          </NavLink>
+        </ol>
+      </div>
+    );
+  }
+}

src/index.js

@@ -2,6 +2,8 @@ import React from "react";
 import ReactDOM from "react-dom/client";
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import HomeRoute from "./routes/HomeRoute";
+import SearchRoute from "./routes/SearchRoute";
+import SettingsRoute from "./routes/SettingsRoute";
 
 const root = ReactDOM.createRoot(document.getElementById("root"));
 
@@ -11,10 +13,45 @@ const router = createBrowserRouter([
     element: <HomeRoute></HomeRoute>,
     // errorElement: <ErrorRoute></ErrorRoute>,
   },
+  {
+    path: "/home",
+    element: <HomeRoute></HomeRoute>,
+    // errorElement: <ErrorRoute></ErrorRoute>,
+  },
+  {
+    path: "/search",
+    element: <SearchRoute></SearchRoute>,
+    // errorElement: <ErrorRoute></ErrorRoute>,
+  },
+  {
+    path: "/settings",
+    element: <SettingsRoute></SettingsRoute>,
+    // errorElement: <ErrorRoute></ErrorRoute>,
+  },
 ]);
 
 root.render(
   <React.StrictMode>
     <RouterProvider router={router} />
+
+    <span
+      style={{
+        position: "absolute",
+        top: "95%",
+        left: "0%",
+        color: "red",
+        backgroundImage: "none",
+        width: "270px",
+        height: "30px",
+        backgroundColor: "white",
+        borderRadius: "20px",
+        textAlign: "center",
+        padding: "5px 0 0px 0",
+        outline: "solid black 1px",
+      }}
+    >
+      Jukebox Draft UI (not styled yet)
+    </span>
+    
   </React.StrictMode>
-);
+);

src/routes/HomeRoute.js

@@ -1,4 +1,6 @@
 import React, { Component } from "react";
+import NavBar from "../components/NavBar";
+import HomeComponent from "../components/HomeComponent";
 import "../assets/stylesheets/app.scss";
 
 export default class HomeRoute extends Component {
@@ -9,9 +11,10 @@ export default class HomeRoute extends Component {
 
   render() {
     return (
-      <div>
+      <div className="container">
-        
+        <NavBar />
+        <HomeComponent />
       </div>
     );
   }
-}
+}

src/routes/SearchRoute.js

@@ -0,0 +1,18 @@
+import React, { Component } from "react";
+import NavBar from "../components/NavBar";
+import "../assets/stylesheets/app.scss";
+
+export default class SearchRoute extends Component {
+  constructor(props) {
+    super(props);
+    document.title = "ITR - Search";
+  }
+
+  render() {
+    return (
+      <div className="container">
+        <NavBar />
+      </div>
+    );
+  }
+}

src/routes/SettingsRoute.js

@@ -0,0 +1,18 @@
+import React, { Component } from "react";
+import NavBar from "../components/NavBar";
+import "../assets/stylesheets/app.scss";
+
+export default class SettingsRoute extends Component {
+  constructor(props) {
+    super(props);
+    document.title = "ITR - Settings";
+  }
+
+  render() {
+    return (
+      <div className="container">
+        <NavBar />
+      </div>
+    );
+  }
+}