From 791a00c695a9d1d99b2466ea96b2ff7f54ba8f78 Mon Sep 17 00:00:00 2001
From: Preston Baxter <preston@preston-baxter.com>
Date: Mon, 30 Oct 2023 18:43:42 -0500
Subject: [PATCH] B: break up navigation.

---
 ui/templates/dashboard_page.templ | 433 +++---------------------------
 ui/templates/landing_page.templ   |   1 +
 2 files changed, 32 insertions(+), 402 deletions(-)

diff --git a/ui/templates/dashboard_page.templ b/ui/templates/dashboard_page.templ
index 46bab5c..8645771 100644
--- a/ui/templates/dashboard_page.templ
+++ b/ui/templates/dashboard_page.templ
@@ -1,6 +1,8 @@
 package templates
 
 import (
+	"fmt"
+
 	"git.preston-baxter.com/Preston_PLB/capstone/frontend-service/db/models"
 )
 
@@ -37,78 +39,8 @@ templ DashboardNav(user *models.User) {
  				class="md:block text-left md:pb-2 text-blueGray-600 mr-0 inline-block whitespace-nowrap text-sm uppercase font-bold p-4 px-0"
  				href="javascript:void(0)"
 			>
-				Tailwind Starter Kit
+				{ user.Email }
 			</a>
-			<ul class="md:hidden items-center flex flex-wrap list-none">
-				<li class="inline-block relative">
-					<a
- 						class="text-blueGray-500 block py-1 px-3"
- 						href="#pablo"
- 						onclick="openDropdown(event,&#39;notification-dropdown&#39;)"
-					><i class="fas fa-bell"></i></a>
-					<div
- 						class="hidden bg-white text-base z-50 float-left py-2 list-none text-left rounded shadow-lg mt-1"
- 						style="min-width: 12rem;"
- 						id="notification-dropdown"
-					>
-						<a
- 							href="#pablo"
- 							class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"
-						>Action</a><a
- 	href="#pablo"
- 	class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"
->Another action</a><a
- 	href="#pablo"
- 	class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"
->Something else here</a>
-						<div class="h-0 my-2 border border-solid border-blueGray-100"></div>
-						<a
- 							href="#pablo"
- 							class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"
-						>Seprated link</a>
-					</div>
-				</li>
-				<li class="inline-block relative">
-					<a
- 						class="text-blueGray-500 block"
- 						href="#pablo"
- 						onclick="openDropdown(event,&#39;user-responsive-dropdown&#39;)"
-					>
-						<div class="items-center flex">
-							<span
- 								class="w-12 h-12 text-sm text-white bg-blueGray-200 inline-flex items-center justify-center rounded-full"
-							>
-								<img
- 									alt="..."
- 									class="w-full rounded-full align-middle border-none shadow-lg"
- 									src="./assets/img/team-1-800x800.jpg"
-								/>
-							</span>
-						</div>
-					</a>
-					<div
- 						class="hidden bg-white text-base z-50 float-left py-2 list-none text-left rounded shadow-lg mt-1"
- 						style="min-width: 12rem;"
- 						id="user-responsive-dropdown"
-					>
-						<a
- 							href="#pablo"
- 							class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"
-						>Action</a><a
- 	href="#pablo"
- 	class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"
->Another action</a><a
- 	href="#pablo"
- 	class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"
->Something else here</a>
-						<div class="h-0 my-2 border border-solid border-blueGray-100"></div>
-						<a
- 							href="#pablo"
- 							class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"
-						>Seprated link</a>
-					</div>
-				</li>
-			</ul>
 			<div
  				class="md:flex md:flex-col md:items-stretch md:opacity-100 md:relative md:mt-4 md:shadow-none shadow absolute top-0 left-0 right-0 z-40 overflow-y-auto overflow-x-hidden h-auto items-center flex-1 rounded hidden"
  				id="example-collapse-sidebar"
@@ -122,7 +54,7 @@ templ DashboardNav(user *models.User) {
  								class="md:block text-left md:pb-2 text-blueGray-600 mr-0 inline-block whitespace-nowrap text-sm uppercase font-bold p-4 px-0"
  								href="javascript:void(0)"
 							>
-								Tailwind Starter Kit
+								{ user.Email }
 							</a>
 						</div>
 						<div class="w-6/12 flex justify-end">
@@ -146,134 +78,39 @@ templ DashboardNav(user *models.User) {
 					</div>
 				</form>
 				<ul class="md:flex-col md:min-w-full flex flex-col list-none">
-					<li class="items-center">
-						<a
- 							class="text-pink-500 hover:text-pink-600 text-xs uppercase py-3 font-bold block"
- 							href="#/dashboard"
-						>
-							<i class="fas fa-tv opacity-75 mr-2 text-sm"></i>
-							Dashboard
-						</a>
-					</li>
-					<li class="items-center">
-						<a
- 							class="text-blueGray-700 hover:text-blueGray-500 text-xs uppercase py-3 font-bold block"
- 							href="#/landing"
-						>
-							<i class="fas fa-newspaper text-blueGray-400 mr-2 text-sm"></i>
-							Landing Page
-						</a>
-					</li>
-					<li class="items-center">
-						<a
- 							class="text-blueGray-700 hover:text-blueGray-500 text-xs uppercase py-3 font-bold block"
- 							href="#/profile"
-						>
-							<i class="fas fa-user-circle text-blueGray-400 mr-2 text-sm"></i>
-							Profile Page
-						</a>
-					</li>
-					<li class="items-center">
-						<a
- 							class="text-blueGray-700 hover:text-blueGray-500 text-xs uppercase py-3 font-bold block"
- 							href="#/login"
-						>
-							<i class="fas fa-fingerprint text-blueGray-400 mr-2 text-sm"></i>
-							Login
-						</a>
-					</li>
-					<li class="items-center">
-						<a
- 							class="text-blueGray-300 text-xs uppercase py-3 font-bold block"
- 							href="#pablo"
-						>
-							<i
- 								class="fas fa-clipboard-list text-blueGray-300 mr-2 text-sm"
-							></i>
-							Register (soon)
-						</a>
-					</li>
-					<li class="items-center">
-						<a
- 							class="text-blueGray-300 text-xs uppercase py-3 font-bold block"
- 							href="#pablo"
-						>
-							<i class="fas fa-tools text-blueGray-300 mr-2 text-sm"></i>
-							Settings (soon)
-						</a>
-					</li>
-				</ul>
-				<hr class="my-4 md:min-w-full"/>
-				<h6
- 					class="md:min-w-full text-blueGray-500 text-xs uppercase font-bold block pt-1 pb-4 no-underline"
-				>
-					Documentation
-				</h6>
-				<ul
- 					class="md:flex-col md:min-w-full flex flex-col list-none md:mb-4"
-				>
-					<li class="inline-flex">
-						<a
- 							class="text-blueGray-700 hover:text-blueGray-500 text-sm block mb-4 no-underline font-semibold"
- 							href="#/documentation/styles"
-						>
-							<i
- 								class="fas fa-paint-brush mr-2 text-blueGray-400 text-base"
-							></i>
-							Styles
-						</a>
-					</li>
-					<li class="inline-flex">
-						<a
- 							class="text-blueGray-700 hover:text-blueGray-500 text-sm block mb-4 no-underline font-semibold"
- 							href="#/documentation/alerts"
-						>
-							<i class="fab fa-css3-alt mr-2 text-blueGray-400 text-base"></i>
-							CSS Components
-						</a>
-					</li>
-					<li class="inline-flex">
-						<a
- 							class="text-blueGray-700 hover:text-blueGray-500 text-sm block mb-4 no-underline font-semibold"
- 							href="#/documentation/vue/alerts"
-						>
-							<i class="fab fa-vuejs mr-2 text-blueGray-400 text-base"></i>
-							VueJS
-						</a>
-					</li>
-					<li class="inline-flex">
-						<a
- 							class="text-blueGray-700 hover:text-blueGray-500  text-sm block mb-4 no-underline font-semibold"
- 							href="#/documentation/react/alerts"
-						>
-							<i class="fab fa-react mr-2 text-blueGray-400 text-base"></i>
-							React
-						</a>
-					</li>
-					<li class="inline-flex">
-						<a
- 							class="text-blueGray-700 hover:text-blueGray-500  text-sm block mb-4 no-underline font-semibold"
- 							href="#/documentation/angular/alerts"
-						>
-							<i class="fab fa-angular mr-2 text-blueGray-400 text-base"></i>
-							Angular
-						</a>
-					</li>
-					<li class="inline-flex">
-						<a
- 							class="text-blueGray-700 hover:text-blueGray-500  text-sm block mb-4 no-underline font-semibold"
- 							href="#/documentation/javascript/alerts"
-						>
-							<i class="fab fa-js-square mr-2 text-blueGray-400 text-base"></i>
-							Javascript
-						</a>
-					</li>
+					@DashboardNavItem("fa-tv", "Dashboard", "#", true)
+					@DashboardNavItem("fa-newspaper", "Home Page", "/", true)
+					@DashboardNavItem("fa-user-circle", "Profile (SOON)", "#", false)
 				</ul>
 			</div>
 		</div>
 	</nav>
 }
 
+templ DashboardNavItem(icon, name, link string, enabled bool) {
+	<li class="items-center">
+		<a
+ 			if enabled {
+				class="text-pink-500 hover:text-pink-600 text-xs uppercase py-3 font-bold block"
+				href={ templ.URL(link) }
+			} else {
+				class="text-blueGray-300 text-xs uppercase py-3 font-bold block"
+				href="#"
+			}
+ 			href="{ link }"
+		>
+			<i
+ 				if enabled {
+					class={ fmt.Sprintf("fas %s opacity-75 mr-2 text-sm", icon) }
+				} else {
+					class={ fmt.Sprintf("fas %s text-blueGray-300 mr-2 text-sm", icon) }
+				}
+			></i>
+			{ name }
+		</a>
+	</li>
+}
+
 //Break this up
 
 templ DashboardContentNav(user *models.User) {
@@ -460,8 +297,6 @@ templ DashboardContent(user *models.User) {
 }
 
 templ DashboardScript() {
-	<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js" charset="utf-8"></script>
-	<script src="https://unpkg.com/@popperjs/core@2.9.1/dist/umd/popper.min.js" charset="utf-8"></script>
 	<script type="text/javascript">
       function toggleNavbar(collapseID) {
         document.getElementById(collapseID).classList.toggle("hidden");
@@ -482,211 +317,5 @@ templ DashboardScript() {
         document.getElementById(dropdownID).classList.toggle("hidden");
         document.getElementById(dropdownID).classList.toggle("block");
       }
-
-
-      (function() {
-        /* Add current date to the footer */
-        document.getElementById("javascript-date").innerHTML = new Date().getFullYear();
-        /* Chart initialisations */
-        /* Line Chart */
-        var config = {
-          type: "line",
-          data: {
-            labels: [
-              "January",
-              "February",
-              "March",
-              "April",
-              "May",
-              "June",
-              "July"
-            ],
-            datasets: [
-              {
-                label: new Date().getFullYear(),
-                backgroundColor: "#4c51bf",
-                borderColor: "#4c51bf",
-                data: [65, 78, 66, 44, 56, 67, 75],
-                fill: false
-              },
-              {
-                label: new Date().getFullYear() - 1,
-                fill: false,
-                backgroundColor: "#ed64a6",
-                borderColor: "#ed64a6",
-                data: [40, 68, 86, 74, 56, 60, 87]
-              }
-            ]
-          },
-          options: {
-            maintainAspectRatio: false,
-            responsive: true,
-            title: {
-              display: false,
-              text: "Sales Charts",
-              fontColor: "white"
-            },
-            legend: {
-              labels: {
-                fontColor: "white"
-              },
-              align: "end",
-              position: "bottom"
-            },
-            tooltips: {
-              mode: "index",
-              intersect: false
-            },
-            hover: {
-              mode: "nearest",
-              intersect: true
-            },
-            scales: {
-              xAxes: [
-                {
-                  ticks: {
-                    fontColor: "rgba(255,255,255,.7)"
-                  },
-                  display: true,
-                  scaleLabel: {
-                    display: false,
-                    labelString: "Month",
-                    fontColor: "white"
-                  },
-                  gridLines: {
-                    display: false,
-                    borderDash: [2],
-                    borderDashOffset: [2],
-                    color: "rgba(33, 37, 41, 0.3)",
-                    zeroLineColor: "rgba(0, 0, 0, 0)",
-                    zeroLineBorderDash: [2],
-                    zeroLineBorderDashOffset: [2]
-                  }
-                }
-              ],
-              yAxes: [
-                {
-                  ticks: {
-                    fontColor: "rgba(255,255,255,.7)"
-                  },
-                  display: true,
-                  scaleLabel: {
-                    display: false,
-                    labelString: "Value",
-                    fontColor: "white"
-                  },
-                  gridLines: {
-                    borderDash: [3],
-                    borderDashOffset: [3],
-                    drawBorder: false,
-                    color: "rgba(255, 255, 255, 0.15)",
-                    zeroLineColor: "rgba(33, 37, 41, 0)",
-                    zeroLineBorderDash: [2],
-                    zeroLineBorderDashOffset: [2]
-                  }
-                }
-              ]
-            }
-          }
-        };
-        var ctx = document.getElementById("line-chart").getContext("2d");
-        window.myLine = new Chart(ctx, config);
-
-        /* Bar Chart */
-        config = {
-          type: "bar",
-          data: {
-            labels: [
-              "January",
-              "February",
-              "March",
-              "April",
-              "May",
-              "June",
-              "July"
-            ],
-            datasets: [
-              {
-                label: new Date().getFullYear(),
-                backgroundColor: "#ed64a6",
-                borderColor: "#ed64a6",
-                data: [30, 78, 56, 34, 100, 45, 13],
-                fill: false,
-                barThickness: 8
-              },
-              {
-                label: new Date().getFullYear() - 1,
-                fill: false,
-                backgroundColor: "#4c51bf",
-                borderColor: "#4c51bf",
-                data: [27, 68, 86, 74, 10, 4, 87],
-                barThickness: 8
-              }
-            ]
-          },
-          options: {
-            maintainAspectRatio: false,
-            responsive: true,
-            title: {
-              display: false,
-              text: "Orders Chart"
-            },
-            tooltips: {
-              mode: "index",
-              intersect: false
-            },
-            hover: {
-              mode: "nearest",
-              intersect: true
-            },
-            legend: {
-              labels: {
-                fontColor: "rgba(0,0,0,.4)"
-              },
-              align: "end",
-              position: "bottom"
-            },
-            scales: {
-              xAxes: [
-                {
-                  display: false,
-                  scaleLabel: {
-                    display: true,
-                    labelString: "Month"
-                  },
-                  gridLines: {
-                    borderDash: [2],
-                    borderDashOffset: [2],
-                    color: "rgba(33, 37, 41, 0.3)",
-                    zeroLineColor: "rgba(33, 37, 41, 0.3)",
-                    zeroLineBorderDash: [2],
-                    zeroLineBorderDashOffset: [2]
-                  }
-                }
-              ],
-              yAxes: [
-                {
-                  display: true,
-                  scaleLabel: {
-                    display: false,
-                    labelString: "Value"
-                  },
-                  gridLines: {
-                    borderDash: [2],
-                    drawBorder: false,
-                    borderDashOffset: [2],
-                    color: "rgba(33, 37, 41, 0.2)",
-                    zeroLineColor: "rgba(33, 37, 41, 0.15)",
-                    zeroLineBorderDash: [2],
-                    zeroLineBorderDashOffset: [2]
-                  }
-                }
-              ]
-            }
-          }
-        };
-        ctx = document.getElementById("bar-chart").getContext("2d");
-        window.myBar = new Chart(ctx, config);
-      })();
     </script>
 }
diff --git a/ui/templates/landing_page.templ b/ui/templates/landing_page.templ
index d9f398c..0d0c6ea 100644
--- a/ui/templates/landing_page.templ
+++ b/ui/templates/landing_page.templ
@@ -9,6 +9,7 @@ templ Head(msg string) {
 		<meta charset="utf-8"/>
 		<meta name="viewport" content="width=device-width, initial-scale=1"/>
 		<meta name="theme-color" content="#000000"/>
+		<meta name="view-transition" content="same-origin"/>
 		<link rel="shortcut icon" href="./assets/img/favicon.ico"/>
 		<link
  			rel="apple-touch-icon"