Sticky profile

Electron/src/componentes/Home/homeCss.module.css

@@ -48,3 +48,10 @@
 
   color: var(--grey);
 }
+
+.principal{
+
+
+  padding-top: var(--pading-top-sticky-header) !important;
+
+}

Electron/src/componentes/Playlist/Playlist.tsx

@@ -87,7 +87,6 @@ export default function Playlist(props: PropsPlaylist) {
       .getColorAsync(thumbnail,options)
       .then((color) => {
         setMainColorThumbnail(color.hex);
-        console.log('Average color', color);
       })
       .catch((e) => {
         console.log(e);

Electron/src/componentes/Playlist/playlist.module.css

@@ -5,7 +5,7 @@
 
 .header {
 
-  padding: 6% 0% 0% 2%;
+  padding: 8% 0% 0% 2%;
   color: var(--pure-white);
 
 }

Electron/src/componentes/Sidebar/Playlist/playlist.module.css

@@ -23,7 +23,7 @@
 
 .wrapperPlaylist label {
 
-  font-size: 1.15rem;
+  font-size: 1.05rem;
   cursor : pointer;
   font-weight: 500 !important;
   color: var(--primary-white);

Electron/src/componentes/StickyHeader/StickyHeader.jsx

@@ -0,0 +1,73 @@
+import { useEffect, useState } from 'react';
+import styles from './stickyHeader.module.css';
+import groupIcon from '../../assets/imgs/groupIcon.png';
+
+export default function StickyHeader() {
+  const [profileIcon, setProfileIcon] = useState(
+    'https://i.scdn.co/image/ab67757000003b82ae8c728abc415a173667ff85'
+  );
+
+  const [visibleBackground, setVisibleBackground] = useState({});
+
+  const handleScroll = () => {
+    if (window.scrollY > 200) {
+      setVisibleBackground({
+        backgroundColor: 'var(--sticky-header-blue)',
+        marginTop:'0',
+      });
+    }else if(window.scrollY > 150) {
+      setVisibleBackground({
+        backgroundColor: 'var(--sticky-header-blue)',
+        marginTop:'0',
+        opacity:'0.7'
+      });
+    }
+    else if(window.scrollY > 100) {
+      setVisibleBackground({
+        backgroundColor: 'var(--sticky-header-blue)',
+        marginTop:'0',
+        opacity:'0.5',
+      });
+    } else {
+      setVisibleBackground({});
+    }
+  };
+
+  useEffect(() => {
+    window.addEventListener('scroll', handleScroll);
+
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+    };
+  }, []);
+
+  return (
+    <header
+      style={visibleBackground}
+      className={`d-flex flex-row justify-content-space-evenly ${styles.wrapperStickyHeader}`}
+    >
+      <div
+        className={`d-flex flex-row container-fluid ${styles.wrapperDirectionArrows}`}
+      >
+        <figure>
+          <i className="fa-solid fa-chevron-left"></i>
+        </figure>
+        <figure>
+          <i className="fa-solid fa-chevron-right"></i>
+        </figure>
+      </div>
+
+      <div
+        className={`d-flex flex-row container-fluid  ${styles.wrapperProfileOptions}`}
+      >
+        <figure>
+          <img src={profileIcon} alt="" />
+        </figure>
+
+        <figure>
+          <img className={`${styles.groupIcon}`} src={groupIcon} alt="" />
+        </figure>
+      </div>
+    </header>
+  );
+}

Electron/src/componentes/StickyHeader/stickyHeader.module.css

@@ -0,0 +1,68 @@
+.wrapperStickyHeader {
+
+
+  position: fixed;
+  top: 0;
+  right: 0;
+  z-index: 4;
+  padding: 1.5% 3% 0% 2%;
+  margin: 0 0.5% 0  var(--sidebar-width);
+  width: calc(100svw - var(--sidebar-width) - 0.5svw);
+  border-radius: 14px 14px 0 0;
+  height: 8svh;
+
+}
+
+/* ARROWS */
+
+.wrapperDirectionArrows figure {
+
+  margin: 0;
+  margin-right: 2%;
+  width: 24px;
+  height: 24px;
+  padding: 0.75%;
+  background-color: var(--primary-black);
+  border-radius: 50px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: var(--secondary-white);
+  cursor: pointer;
+}
+
+
+/* PROFILE and GROUP SESSION */
+
+.wrapperProfileOptions{
+
+  justify-content: flex-end;
+
+}
+
+.wrapperProfileOptions figure {
+
+  padding: 0.75%;
+  border-radius: 50px;
+  background-color: var(--primary-black);
+  cursor: pointer;
+
+
+}
+
+.wrapperProfileOptions figure img {
+
+  width: 24px;
+  height: 24px;
+  border-radius: 50px;
+
+
+}
+
+.groupIcon {
+
+  color: var(--primary-white);
+
+}
+
+

Electron/src/renderer/App.tsx

@@ -6,6 +6,7 @@ import Footer from '../componentes/footer/Footer';
 import { Route, Routes } from 'react-router-dom';
 import { useState } from 'react';
 import Playlist from 'componentes/Playlist/Playlist';
+import StickyHeader from 'componentes/StickyHeader/StickyHeader';
 
 function App() {
   const [songName, setSongName] = useState('none');
@@ -16,6 +17,8 @@ function App() {
 
   return (
     <div className={`App d-flex flex-column ${styles.appBackground}`}>
+            <StickyHeader />
+
       <div className="d-flex">
         <Sidebar />
         <div
@@ -35,7 +38,6 @@ function App() {
           </Routes>
         </div>
       </div>
-
       <Footer songName={songName} />
     </div>
   );

Electron/src/renderer/AppCss.module.css

@@ -14,6 +14,8 @@
   overflow-x: hidden;
   padding: 0% !important;
   min-height: 99svh;
+  position: relative;
+  overflow: hidden;
 
 }
 

Electron/src/renderer/index.css

@@ -23,6 +23,8 @@
 
   --grey: #888;
 
+  --sticky-header-blue : #1e0f44;
+
   /* Sidebar default width */
   --sidebar-width: 25svw;
   --sidebar-height: 90svh;
@@ -40,6 +42,13 @@
   --font-size-song-footer: 1.05rem;
   --font-size-artist-footer: 0.85rem;
 
+
+  /* sticky header */
+
+  --pading-top-sticky-header:5%
+
+
+
 }
 
 html {