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

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 />
-            <Dashboard />
+            <Sidebar setter=set_dashboard_open />
+            <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 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,22 +1,37 @@
 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>
-            
-        </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::*;