create dashboard/search toggle.

modified:   Cargo.lock
	modified:   Cargo.toml
	modified:   src/app.rs
	modified:   src/components.rs
	new file:   src/components/search.rs
	modified:   src/components/sidebar.rs
	modified:   src/pages/signup.rs
	modified:   style/dashboard.scss
	modified:   style/main.scss
	new file:   style/search.scss
	modified:   style/sidebar.scss

Cargo.lock

@@ -1314,6 +1314,7 @@ dependencies = [
  "icondata_cg",
  "icondata_core",
  "icondata_io",
+ "icondata_oc",
  "icondata_ri",
 ]
 
@@ -1359,6 +1360,15 @@ dependencies = [
  "icondata_core",
 ]
 
+[[package]]
+name = "icondata_oc"
+version = "0.0.8"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "667cb0b74516ec3d4ce357b9ec94189eab6e1bfe5a4a28b5e36579028a8075b1"
+dependencies = [
+ "icondata_core",
+]
+
 [[package]]
 name = "icondata_ri"
 version = "0.0.8"

Cargo.toml

@@ -27,7 +27,9 @@ leptos_icons = { version = "0.1.0", default_features = false, features = [
   "CgTrash",
   "IoReturnUpBackSharp",
   "AiEyeFilled",
-  "AiEyeInvisibleFilled"
+  "AiEyeInvisibleFilled",
+  "OcHomeFillLg",
+  "AiSearchOutlined"
 ] }
 dotenv = { version = "0.15.0", optional = true }
 diesel = { version = "2.1.4", features = ["postgres", "r2d2", "time"], optional = true }

src/app.rs

@@ -6,8 +6,7 @@ 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 {
@@ -36,16 +35,27 @@ pub fn App() -> impl IntoView {
     }
 }
 
+use crate::components::sidebar::*;
+use crate::components::dashboard::*;
+use crate::components::search::*;
+
 /// Renders the home page of your application.
 #[component]
 fn HomePage() -> impl IntoView {
     let mut play_status = PlayStatus::default();
     let play_status = create_rw_signal(play_status);
     
+    let (dashboard_open, set_dashboard_open) = create_signal(true);
+
     view! {
         <div class="home-container">
-            <Sidebar />
+            <Sidebar setter=set_dashboard_open />
-            <Dashboard />
+            <Show 
+                when=move || {dashboard_open() == true}
+                fallback=move || view! { <Search /> }
+            >
+                <Dashboard />
+            </Show>
             <PlayBar status=play_status/>
             <Queue status=play_status/>
         </div>

src/components.rs

@@ -1,2 +1,3 @@
 pub mod sidebar;
 pub mod dashboard;
+pub mod search;

src/components/search.rs

@@ -0,0 +1,11 @@
+use leptos::*;
+use leptos::leptos_dom::*;
+
+#[component]
+pub fn Search() -> impl IntoView {
+    view! {
+        <div class="search-container">
+            <h1>Searching...</h1>
+        </div>
+    }
+}

src/components/sidebar.rs

@@ -1,10 +1,33 @@
 use leptos::*;
+use leptos::leptos_dom::*;
+use leptos_icons::AiIcon::*;
+use leptos_icons::OcIcon::*;
+use leptos_icons::*;
 
 #[component]
-pub fn Sidebar() -> impl IntoView {
+pub fn Sidebar(setter: WriteSignal<bool>) -> impl IntoView {
+    let open_dashboard = move |_| {
+        setter.update(|value| *value = true);
+        log!("open dashboard");
+    };
+    let open_search = move |_| {
+        setter.update(|value| *value = false);
+        log!("open search");
+    };
+
     view! {
         <div class="sidebar-container">
-            <Top />
+            <div class="sidebar-top-container">
+                <h2 class="header">LibreTunes</h2>
+                <div class="buttons" on:click=open_dashboard>
+                    <Icon icon=Icon::from(OcHomeFillLg) />
+                    <h1>Dashboard</h1>
+                </div>
+                <div class="buttons" on:click=open_search>
+                    <Icon icon=Icon::from(AiSearchOutlined) />
+                    <h1>Search</h1>
+                </div>
+            </div>
             <div class="sidebar-header">
                 <h1>LibreTunes</h1>
             </div>
@@ -12,11 +35,3 @@ pub fn Sidebar() -> impl IntoView {
         </div>
     }
 }
-#[component]
-pub fn Top() -> impl IntoView {
-    view! {
-        <div class="sidebar-top-container">
-            <h1>Hello</h1>
-        </div>
-    }
-}

src/pages/signup.rs

@@ -1,6 +1,5 @@
 use crate::auth::signup;
 use crate::models::User;
-use leptos::ev::input;
 use leptos::leptos_dom::*;
 use leptos::*;
 use leptos_icons::AiIcon::*;

style/dashboard.scss

@@ -1,7 +1,7 @@
-@import 'theme.scss';
+@import "theme.scss";
 
 .dashboard-container {
-    width: 73%;
+  width: calc(100% - 22rem);
-    background: green;
+  background: green;
-    height: 100vh;
+  height: 100vh;
 }

style/main.scss

@@ -6,6 +6,7 @@
 @import "sidebar.scss";
 @import "dashboard.scss";
 @import 'home.scss';
+@import 'search.scss';
 
 body {
   font-family: sans-serif;

style/search.scss

@@ -0,0 +1,8 @@
+@import 'theme.scss';
+
+.search-container {
+    width: calc(100% - 22rem);
+    background: green;
+    height: 100vh;
+  }
+  

style/sidebar.scss

@@ -2,13 +2,40 @@
 
 .sidebar-container {
   background-color: red;
-  width: 27%;
+  width: 22rem;
   height: calc(100% - 75px);
 }
 
 .sidebar-top-container {
   border-radius: 1rem;
-  background-color: yellow;
+  background-color: darkblue;
-  height: 20%;
+  height: 10rem;
   margin: 5px;
+  padding: 0.2rem 1rem 1rem 1rem;
+}
+
+.sidebar-top-container .header {
+  font-size: 1.4rem;
+}
+.sidebar-top-container .buttons {
+  display: flex;
+  flex-direction: row;
+  font-size: 2rem;
+  align-items: center;
+  transition: all 0.5s;
+  cursor: pointer;
+  color: grey;
+}
+.sidebar-top-container .buttons:hover {
+  color: white;
+}
+
+.sidebar-top-container .buttons:last-child {
+  margin-left: 0.02rem;
+}
+
+.sidebar-top-container h1 {
+  font-size: 1.1rem;
+  margin-left: 0.8rem;
+  font-weight: 200;
 }