UI Base

src/assets/stylesheets/app.scss

@@ -1,5 +1,20 @@
 * {
-    margin: 0px;
-    padding: 0px;
-    background-color: azure;
-}
+  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;
+}

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;
+}