diff --git a/src/assets/images/belden-logo.png b/src/assets/images/belden-logo.png new file mode 100644 index 0000000..4ab1d53 Binary files /dev/null and b/src/assets/images/belden-logo.png differ diff --git a/src/assets/stylesheets/app.scss b/src/assets/stylesheets/app.scss index a3e9b93..a33a678 100644 --- a/src/assets/stylesheets/app.scss +++ b/src/assets/stylesheets/app.scss @@ -1,5 +1,20 @@ * { - margin: 0px; - padding: 0px; - background-color: azure; -} \ No newline at end of file + margin: 0px; + padding: 0px; + 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; +} diff --git a/src/assets/stylesheets/home.scss b/src/assets/stylesheets/home.scss new file mode 100644 index 0000000..d30ad2d --- /dev/null +++ b/src/assets/stylesheets/home.scss @@ -0,0 +1,7 @@ +.home { + background-image: none; + background-color: white; + border-radius: 20px; + width: 80%; + height: 100%; +} diff --git a/src/assets/stylesheets/navbar.scss b/src/assets/stylesheets/navbar.scss new file mode 100644 index 0000000..09a78b0 --- /dev/null +++ b/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; +} diff --git a/src/components/HomeComponent.js b/src/components/HomeComponent.js new file mode 100644 index 0000000..48e92c3 --- /dev/null +++ b/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
; + } +} diff --git a/src/components/NavBar.js b/src/components/NavBar.js new file mode 100644 index 0000000..ddb40d4 --- /dev/null +++ b/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 ( +
+
+ Belden +
+
    + + Home + + + Search + + + Settings + +
+
+ ); + } +} diff --git a/src/index.js b/src/index.js index cfa0389..85f7cf1 100644 --- a/src/index.js +++ b/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: , // errorElement: , }, + { + path: "/home", + element: , + // errorElement: , + }, + { + path: "/search", + element: , + // errorElement: , + }, + { + path: "/settings", + element: , + // errorElement: , + }, ]); root.render( + + + Jukebox Draft UI (not styled yet) + + -); \ No newline at end of file +); diff --git a/src/routes/HomeRoute.js b/src/routes/HomeRoute.js index 7010ace..f4cb075 100644 --- a/src/routes/HomeRoute.js +++ b/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 ( -
- +
+ +
); } -} \ No newline at end of file +} diff --git a/src/routes/SearchRoute.js b/src/routes/SearchRoute.js new file mode 100644 index 0000000..30a75a0 --- /dev/null +++ b/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 ( +
+ +
+ ); + } +} diff --git a/src/routes/SettingsRoute.js b/src/routes/SettingsRoute.js new file mode 100644 index 0000000..95e1617 --- /dev/null +++ b/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 ( +
+ +
+ ); + } +}