initialize all components

src/app.rs

@@ -6,6 +6,8 @@ use leptos_meta::*;
 use leptos_router::*;
 use crate::pages::login::*;
 use crate::pages::signup::*;
+use crate::components::sidebar::*;
+use crate::components::dashboard::*;
 
 #[component]
 pub fn App() -> impl IntoView {
@@ -41,8 +43,12 @@ fn HomePage() -> impl IntoView {
     let play_status = create_rw_signal(play_status);
 
     view! {
-        <PlayBar status=play_status/>
-        <Queue status=play_status/>
+        <div class="home-container">
+            <Sidebar />
+            <Dashboard />
+            <PlayBar status=play_status/>
+            <Queue status=play_status/>
+        </div>
     }
 }
 

src/components.rs

@@ -0,0 +1,2 @@
+pub mod sidebar;
+pub mod dashboard;

src/components/dashboard.rs

@@ -0,0 +1,10 @@
+use leptos::*;
+
+#[component]
+pub fn Dashboard() -> impl IntoView {
+    view! {
+        <div class="dashboard-container">
+            <h1>Dashboard</h1>
+        </div>
+    }
+}

src/components/sidebar.rs

@@ -0,0 +1,22 @@
+use leptos::*;
+
+#[component]
+pub fn Sidebar() -> impl IntoView {
+    view! {
+        <div class="sidebar-container">
+            <Top />
+            <div class="sidebar-header">
+                <h1>LibreTunes</h1>
+            </div>
+            
+        </div>
+    }
+}
+#[component]
+pub fn Top() -> impl IntoView {
+    view! {
+        <div class="sidebar-top-container">
+            <h1>Hello</h1>
+        </div>
+    }
+}

src/lib.rs

@@ -8,6 +8,7 @@ pub mod queue;
 pub mod song;
 pub mod models;
 pub mod pages;
+pub mod components;
 pub mod users;
 pub mod search;
 use cfg_if::cfg_if;

style/dashboard.scss

@@ -0,0 +1,7 @@
+@import 'theme.scss';
+
+.dashboard-container {
+    width: 73%;
+    background: green;
+    height: 100vh;
+}

style/home.scss

@@ -0,0 +1,9 @@
+@import "theme.scss";
+
+.home-container {
+  margin-top: 0;
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  flex-direction: row;
+}

style/main.scss

@@ -1,13 +1,16 @@
-@import 'playbar.scss';
-@import 'theme.scss';
-@import 'queue.scss';
-@import 'login.scss';
-@import 'signup.scss';
+@import "playbar.scss";
+@import "theme.scss";
+@import "queue.scss";
+@import "login.scss";
+@import "signup.scss";
+@import "sidebar.scss";
+@import "dashboard.scss";
+@import 'home.scss';
 
 body {
-	font-family: sans-serif;
-	background-color: $background-color;
-	color: $text-controls-color;
-	margin: 0;
-	padding: 0;
+  font-family: sans-serif;
+  background-color: $background-color;
+  color: $text-controls-color;
+  margin: 0;
+  padding: 0;
 }

style/sidebar.scss

@@ -0,0 +1,14 @@
+@import "theme.scss";
+
+.sidebar-container {
+  background-color: red;
+  width: 27%;
+  height: calc(100% - 75px);
+}
+
+.sidebar-top-container {
+  border-radius: 1rem;
+  background-color: yellow;
+  height: 20%;
+  margin: 5px;
+}