Working on positioning nav, next need to make it respect the position…

…s of other components.
Oia20 · Apr 23, 2024 · 56f0da0 · 56f0da0
1 parent 7e50e68
commit 56f0da0
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 6 deletions.
diff --git 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
@@ -0,0 +1,3 @@
+.content1 {
+    width: fit-content;
+}
diff --git a/CropSQL/Pages/Components/SideBarNav.razor 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
@@ -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
@@ -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
@@ -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 {