added profile section to homepage

Cargo.lock

@@ -1310,6 +1310,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "f41f2deec9249d16ef6b1a8442fbe16013f67053797052aa0b7d2f5ebd0f0098"
 dependencies = [
  "icondata_ai",
+ "icondata_bi",
  "icondata_bs",
  "icondata_cg",
  "icondata_core",
@@ -1327,6 +1328,15 @@ dependencies = [
  "icondata_core",
 ]
 
+[[package]]
+name = "icondata_bi"
+version = "0.0.8"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "c0953768d0b9cdd2da0b85b5ef44a0b43078d59411282b8da8fe6c13b123e01f"
+dependencies = [
+ "icondata_core",
+]
+
 [[package]]
 name = "icondata_bs"
 version = "0.0.8"

Cargo.toml

@@ -29,7 +29,8 @@ leptos_icons = { version = "0.1.0", default_features = false, features = [
   "AiEyeFilled",
   "AiEyeInvisibleFilled",
   "OcHomeFillLg",
-  "AiSearchOutlined"
+  "BiSearchRegular",
+  "CgProfile"
 ] }
 dotenv = { version = "0.15.0", optional = true }
 diesel = { version = "2.1.4", features = ["postgres", "r2d2", "time"], optional = true }

src/app.rs

@@ -38,6 +38,7 @@ pub fn App() -> impl IntoView {
 use crate::components::sidebar::*;
 use crate::components::dashboard::*;
 use crate::components::search::*;
+use crate::components::personal::*;
 
 /// Renders the home page of your application.
 #[component]
@@ -49,13 +50,14 @@ fn HomePage() -> impl IntoView {
 
     view! {
         <div class="home-container">
-            <Sidebar setter=set_dashboard_open />
+            <Sidebar setter=set_dashboard_open active=dashboard_open />
             <Show 
                 when=move || {dashboard_open() == true}
                 fallback=move || view! { <Search /> }
             >
                 <Dashboard />
             </Show>
+            <Personal />
             <PlayBar status=play_status/>
             <Queue status=play_status/>
         </div>

src/components.rs

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

src/components/dashboard.rs

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

src/components/personal.rs

@@ -0,0 +1,25 @@
+use leptos::leptos_dom::*;
+use leptos::*;
+use leptos_icons::*;
+use leptos_icons::CgIcon::*;
+
+#[component]
+pub fn Personal() -> impl IntoView {
+    view! {
+        <div class=" personal-container">
+            <Profile />
+        </div>
+    }
+}
+
+#[component]
+pub fn Profile() -> impl IntoView {
+    view! {
+        <div class="profile-container">
+            <div class="profile-icon">
+                <Icon icon=Icon::from(CgProfile) />
+            </div>
+            
+        </div>
+    }
+}

src/components/search.rs

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

src/components/sidebar.rs

@@ -1,11 +1,11 @@
-use leptos::*;
 use leptos::leptos_dom::*;
-use leptos_icons::AiIcon::*;
+use leptos::*;
+use leptos_icons::BiIcon::*;
 use leptos_icons::OcIcon::*;
 use leptos_icons::*;
 
 #[component]
-pub fn Sidebar(setter: WriteSignal<bool>) -> impl IntoView {
+pub fn Sidebar(setter: WriteSignal<bool>, active: ReadSignal<bool>) -> impl IntoView {
     let open_dashboard = move |_| {
         setter.update(|value| *value = true);
         log!("open dashboard");
@@ -19,16 +19,16 @@ pub fn Sidebar(setter: WriteSignal<bool>) -> impl IntoView {
         <div class="sidebar-container">
             <div class="sidebar-top-container">
                 <h2 class="header">LibreTunes</h2>
-                <div class="buttons" on:click=open_dashboard>
+                <div class="buttons" on:click=open_dashboard style={move || if active() {"color: #e1e3e1"} else {""}} >
                     <Icon icon=Icon::from(OcHomeFillLg) />
                     <h1>Dashboard</h1>
                 </div>
-                <div class="buttons" on:click=open_search>
+                <div class="buttons" on:click=open_search style={move || if !active() {"color: #e1e3e1"} else {""}}>
-                    <Icon icon=Icon::from(AiSearchOutlined) />
+                    <Icon icon=Icon::from(BiSearchRegular) />
                     <h1>Search</h1>
                 </div>
             </div>
-            <div class="sidebar-header">
+            <div class="sidebar-bottom-container">
                 <h1>LibreTunes</h1>
             </div>
 

style/dashboard.scss

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

style/home.scss

@@ -7,3 +7,10 @@
   display: flex;
   flex-direction: row;
 }
+.home-component {
+  background: #1c1c1c;
+  height: 100vh;
+  margin: 2px;
+  padding: 1rem 1.5rem 1.5rem 1.5rem;
+  border-radius: 0.5rem;
+}

style/main.scss

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

style/personal.scss

@@ -0,0 +1,38 @@
+@import "theme.scss";
+
+.personal-container {
+  width: 16rem;
+  background: #1c1c1c;
+  height: 100vh;
+  margin: 2px;
+  border-radius: 0.5rem;
+
+  .profile-container {
+    display: flex;
+    border-radius: 0.4rem;
+    margin: 0.3rem;
+    min-height: 6rem;
+    border: 2px solid rgba(89, 89, 89, 0.199);
+    padding: 0.5rem;
+
+    .profile-icon {
+      display: inline-flex;
+      padding: 0.2rem;
+      cursor: pointer;
+      font-size: 2rem;
+      border-radius: 50%;
+      transition: all 0.3s;
+      height: max-content;
+      margin-left: auto;
+    }
+
+    .profile-icon:hover {
+      transform: scale(1.1);
+      background-color: rgba(255, 255, 255, 0.1);
+    }
+
+    .profile-icon:active {
+      transform: scale(0.8);
+    }
+  }
+}

style/search.scss

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

style/sidebar.scss

@@ -1,26 +1,26 @@
 @import "theme.scss";
 
 .sidebar-container {
-  background-color: red;
+  background-color: transparent;
   width: 22rem;
   height: calc(100% - 75px);
 }
 
 .sidebar-top-container {
   border-radius: 1rem;
-  background-color: darkblue;
+  background-color: #1c1c1c;
-  height: 10rem;
+  height: 9rem;
-  margin: 5px;
+  margin: 3px;
-  padding: 0.2rem 1rem 1rem 1rem;
+  padding: 0.1rem 1rem 1rem 1rem;
 }
 
 .sidebar-top-container .header {
-  font-size: 1.4rem;
+  font-size: 1.2rem;
 }
 .sidebar-top-container .buttons {
   display: flex;
   flex-direction: row;
-  font-size: 2rem;
+  font-size: 1.8rem;
   align-items: center;
   transition: all 0.5s;
   cursor: pointer;
@@ -32,10 +32,22 @@
 
 .sidebar-top-container .buttons:last-child {
   margin-left: 0.02rem;
+  margin-top: 0.5rem;
 }
 
 .sidebar-top-container h1 {
-  font-size: 1.1rem;
+  font-size: 0.95rem;
-  margin-left: 0.8rem;
+  margin-left: 0.9rem;
-  font-weight: 200;
+  font-weight: 400;
+  font-style: $standard-font;
+  letter-spacing: 0.5px;
+}
+
+.sidebar-bottom-container {
+  border-radius: 1rem;
+  background-color: #1c1c1c;
+  margin: 3px;
+  margin-top: 6px;
+  padding: 0.2rem 1rem 1rem 1rem;
+  height: calc(100% - 9rem);
 }

style/theme.scss

@@ -1,3 +1,7 @@
+@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300,400,500,700,800;1,300,400,500,600,800&display=swap');
+
+$standard-font: 'Open Sans', sans-serif;
+
 $background-color: #030303;
 $accent-color: #4032a8;
 $text-controls-color: #e0e0e0;