Setup new loan template

assets/main.css

@@ -4,6 +4,7 @@
 	--text: #4C555E;
 	--text-light: #1D262E;
 	--text-lighter: #28323B;
+	--text-lightest: #A1A7AD;
 	--outline: #DFE3E8;
 }
 
@@ -141,3 +142,38 @@ menu.sidebar svg {
 	margin-left: 10px;
 	color: var(--text-lighter);
 }
+
+section.loans-list {
+	display: flex;
+	flex-direction: column;
+	width: fit-content;
+	margin: 0;
+	justify-content: center;
+}
+
+.loans-list h3:not(.sel) {
+	color: var(--text-lightest);
+}
+
+.loans-list h3 {
+	cursor: pointer;
+	width: fit-content;
+}
+
+.loans-list {
+	/* cursor: pointer; */
+	border: 1px solid var(--text-lightest);
+	padding: 10px;
+	border-radius: 3px;
+}
+
+.loans-list .add svg {
+	width: 35px;
+	height: 35px;
+	margin: auto;
+	display: block;
+}
+
+.loans-list .add svg:hover {
+	color: black;
+}

components/app.vue

@@ -9,6 +9,7 @@
 </div>
 
 <home :user="user" v-else-if="active == 1" />
+<new-estimate :user="user" v-else-if="active == 2" />
 
 </div>
 </template>
@@ -17,6 +18,7 @@
 import SideBar from "./sidebar.vue"
 import Spinner from "./spinner.vue"
 import Home from "./home.vue"
+import NewEstimate from "./new.vue"
 
 const user = {
  	firstName: "test",
@@ -44,11 +46,11 @@ function active() {
 }
 
 export default {
-	components: { SideBar, Spinner, Home },
+	components: { SideBar, Spinner, Home, NewEstimate },
 	computed: { active },
 	data() {
 		return {
-			loading: false, user: user, hash: ''
+			loading: false, user: user, hash: window.location.hash
 		}
 	},
 	created() {

components/new.vue

@@ -0,0 +1,39 @@
+<template>
+<div id="new" class="page">
+
+<h2>New Loan</h2>
+
+<section class="loans-list">
+
+<h3 v-for="(l, indx) in loans"
+:class="selected == indx ? 'sel' : ''"
+@click="() => selected = indx"
+>
+{{l.title}}
+</h3>
+
+<div class="add">
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
+fill="currentColor" class="bi bi-plus" viewBox="0 0 16 16"> <path d="M8 4a.5.5 0
+0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0
+0 1 8 4z"/> </svg>
+</div>
+
+</section>
+
+</div>
+</template>
+
+<script>
+const loans = [
+	{title: "Loan Example"},
+	{title: "Another One"}
+]
+
+export default {
+	props: ['user'],
+	data() {
+		return {loans: loans, selected: 0}
+	}
+}
+</script>