From 56f0da0913f7fc0ef6b859a0b2454538df4f9e6f Mon Sep 17 00:00:00 2001
From: Jacob <92279567+Oia20@users.noreply.github.com>
Date: Mon, 22 Apr 2024 19:57:17 -0500
Subject: [PATCH] Working on positioning nav, next need to make it respect the
 positions of other components.

---
 CropSQL/Pages/Components/Home.razor           |  8 ++---
 CropSQL/Pages/Components/Home.razor.css       |  3 ++
 CropSQL/Pages/Components/SideBarNav.razor     |  9 ++++++
 CropSQL/Pages/Components/SideBarNav.razor.css | 30 +++++++++++++++++++
 .../Pages/Components/WelcomeModal.razor.css   |  2 ++
 CropSQL/wwwroot/css/app.css                   |  5 ++--
 6 files changed, 51 insertions(+), 6 deletions(-)
 create mode 100644 CropSQL/Pages/Components/Home.razor.css
 create mode 100644 CropSQL/Pages/Components/SideBarNav.razor
 create mode 100644 CropSQL/Pages/Components/SideBarNav.razor.css

diff --git a/CropSQL/Pages/Components/Home.razor b/CropSQL/Pages/Components/Home.razor
index a47d963..40ca6a6 100644
--- a/CropSQL/Pages/Components/Home.razor
+++ b/CropSQL/Pages/Components/Home.razor
@@ -1,11 +1,11 @@
 @page "/"
 @page "/home"
 
-<PageTitle>Home</PageTitle>
+<PageTitle>CropSQL</PageTitle>
 <WelcomeModal />
 <Header />
-
-<h1>Hello, world!</h1>
-<p>   
+<SideBarNav />
+<h1 class="content1">Hello, world!</h1>
+<p class="content1">   
 Welcome to crop sql!
 </p>
diff --git a/CropSQL/Pages/Components/Home.razor.css b/CropSQL/Pages/Components/Home.razor.css
new file mode 100644
index 0000000..d11ecc7
--- /dev/null
+++ b/CropSQL/Pages/Components/Home.razor.css
@@ -0,0 +1,3 @@
+.content1 {
+    width: fit-content;
+}
\ No newline at end of file
diff --git a/CropSQL/Pages/Components/SideBarNav.razor b/CropSQL/Pages/Components/SideBarNav.razor
new file mode 100644
index 0000000..9e197a5
--- /dev/null
+++ b/CropSQL/Pages/Components/SideBarNav.razor
@@ -0,0 +1,9 @@
+<!-- SidebarNav.razor -->
+<div class="sidebar">
+    <ul>
+        <li><a href="#">Home</a></li>
+        <li><a href="#">About</a></li>
+        <li><a href="#">Services</a></li>
+        <li><a href="#">Contact</a></li>
+    </ul>
+</div>
diff --git a/CropSQL/Pages/Components/SideBarNav.razor.css b/CropSQL/Pages/Components/SideBarNav.razor.css
new file mode 100644
index 0000000..1a31455
--- /dev/null
+++ b/CropSQL/Pages/Components/SideBarNav.razor.css
@@ -0,0 +1,30 @@
+/* SidebarNav.razor.css */
+.sidebar {
+    position:relative;
+    left: 0;
+    height:90vh;
+    width: 200px;
+    background-color: #333;
+    color: #fff;
+    padding-top: 20px;
+}
+
+.sidebar ul {
+    list-style-type: none;
+    padding: 0;
+}
+
+.sidebar ul li {
+    margin-bottom: 10px;
+}
+
+.sidebar ul li a {
+    display: block;
+    padding: 10px;
+    color: #fff;
+    text-decoration: none;
+}
+
+.sidebar ul li a:hover {
+    background-color: #555;
+}
diff --git a/CropSQL/Pages/Components/WelcomeModal.razor.css b/CropSQL/Pages/Components/WelcomeModal.razor.css
index b45d796..a376499 100644
--- a/CropSQL/Pages/Components/WelcomeModal.razor.css
+++ b/CropSQL/Pages/Components/WelcomeModal.razor.css
@@ -10,6 +10,8 @@
     display: flex;
     justify-content: center;
     align-items: center;
+    z-index: 500;
+
 }
 
 .modalBack {
diff --git a/CropSQL/wwwroot/css/app.css b/CropSQL/wwwroot/css/app.css
index 8df9d52..9a0de67 100644
--- a/CropSQL/wwwroot/css/app.css
+++ b/CropSQL/wwwroot/css/app.css
@@ -2,8 +2,9 @@
 
 html, body {
     font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
-    height: 100vh;
-    background-color: #a2b780;
+    height:100vh;
+    background-image: linear-gradient(180deg, #a2b780, #5e8d61);
+
 }
 
 h1:focus {