Avanço na sidebar - Top quase completo e cabeçalho do bottom quase te…

…rminado

spotify-clone/package.json

@@ -11,7 +11,8 @@
   },
   "dependencies": {
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-icons": "^5.0.1"
   },
   "devDependencies": {
     "@types/react": "^18.2.64",

spotify-clone/src/App.jsx

@@ -1,11 +1,14 @@
-import SidebarRoot from "./components/sidebar/sidebarRoot"
+import { Sidebar } from "./components/sidebar/Widget";
 
 function App() {
   return (
     <>
-      <SidebarRoot />
+      <Sidebar.Root>
+        <Sidebar.Top />
+        <Sidebar.Bottom />
+      </Sidebar.Root>
     </>
-  )
+  );
 }
 
-export default App
+export default App;

spotify-clone/src/components/sidebar/Widget.jsx

@@ -0,0 +1,11 @@
+import { SidebarBottom } from "./sidebarBottom";
+
+import { SidebarTop } from "./sidebarTop";
+
+import { SidebarRoot } from "./sidebarRoot";
+
+export const Sidebar = {
+  Root: SidebarRoot,
+  Top: SidebarTop,
+  Bottom: SidebarBottom,
+};

spotify-clone/src/components/sidebar/sidebar.scss

@@ -1,23 +1,107 @@
 @import "../spotify-colors";
 
+//função que define o comportamento da flexbox
+
+@mixin flexBox($just, $align) {
+  display: flex;
+  justify-content: $just;
+  align-items: $align;
+}
+
 #sidebar {
   display: flex;
   flex-direction: column;
   padding: 8px;
-  gap: 8px;
+  gap: 6px;
   height: 100%;
   width: 350px;
-}
 
-#sidebar * {
-  background-color: $spotify-cinza;
-  border-radius: 8px;
+  > * {
+    background-color: $spotify-cinza;
+    border-radius: 8px;
+  }
 }
 
 #sidebar_top {
-  height: 120px;
+  min-height: 12.5%;
+  padding: 0.5rem 0.35rem;
+
+  li {
+
+    //provisório até definir o main e controle de estado da página
+
+    &:first-child a{
+      color: $spotify-branco;
+    }
+    //--------------//
+
+    a {
+      @include flexBox(start, center);
+
+      font-size: 0.85rem;
+      font-weight: 600;
+
+
+      color: darken($color: $spotify-branco, $amount: 15);
+
+      gap: 1rem;
+      padding: 0.5rem;
+      border-radius: 8px;
+
+      &:hover {
+        background-color: lighten($color: $spotify-cinza, $amount: 10);
+      }
+    }
+  }
 }
 
 #sidebar_bottom {
-  height: 100%;
-}
+  position: relative;
+  height: 87.5%;
+  overflow: hidden;
+
+  // "controlador" da sidebar_bottom
+  header{
+    @include flexBox(space-between, space-between);
+    flex-direction: column;
+    position: absolute;
+    top: 0;
+
+    height: 17.5%;
+    width: 100%;
+
+    padding: 1rem 0.85rem 0.5rem 0.85rem;
+    box-shadow: 8px 0 8px 8px rgba(0,0,0,0.22);
+
+
+    // cabeçalho / tags
+    div {
+      @include flexBox(space-between, center);
+      gap: 1rem;
+      font-weight: 600;
+    }
+
+    #tags{
+      @include flexBox(space-between, center);
+
+      width: 100%;
+      font-size: 0.75rem;
+      font-weight: 500;
+
+      li{
+        padding: 0.35rem 0.65rem;
+        border-radius: 9999px;
+        background-color: lighten($color: $spotify-cinza, $amount: 8); 
+
+        transition: 0.23s all ease;
+        &:hover{
+          color: $spotify-preto;
+          background-color: $spotify-branco;
+          font-weight: 600;
+        }
+
+        cursor: pointer;
+      }
+    }
+  }
+}

spotify-clone/src/components/sidebar/sidebarBottom.jsx

@@ -1,11 +1,28 @@
-import './sidebar.scss';
+import { LuLibrary } from "react-icons/lu";
+import { FiPlus } from "react-icons/fi";
+import { IoMdArrowForward } from "react-icons/io";
 
-function SidebarBottom() {
+export function SidebarBottom() {
   return (
-    <div id="sidebar_bottom">
-      sidebarBottom
-    </div>
+    <section id="sidebar_bottom">
+      <header>
+        <div id="library">
+          <div>
+            <LuLibrary size={24} />
+            Sua Biblioteca
+          </div>
+          <div>
+            <FiPlus size={20} />
+            <IoMdArrowForward size={20} />
+          </div>
+        </div>
+        <menu id="tags">
+          <li>Playlists</li>
+          <li>Podcasts e programas</li>
+          <li>Artistas</li>
+        </menu>
+      </header>
+      <ul></ul>
+    </section>
   );
 }
-
-export default SidebarBottom

spotify-clone/src/components/sidebar/sidebarRoot.jsx

@@ -1,14 +1,5 @@
-import './sidebar.scss';
-import SidebarBottom from './sidebarBottom';
-import SidebarTop from './sidebarTop';
+import "./sidebar.scss";
 
-function SidebarRoot() {
-  return (
-    <div id="sidebar">
-      <SidebarTop />
-      <SidebarBottom />
-    </div>
-  );
+export function SidebarRoot({ children }) {
+  return <aside id="sidebar">{children}</aside>;
 }
-
-export default SidebarRoot

spotify-clone/src/components/sidebar/sidebarTop.jsx

@@ -1,11 +1,26 @@
-import './sidebar.scss';
+import { GoHomeFill, GoHome } from "react-icons/go";
+import { CiSearch } from "react-icons/ci";
 
-function SidebarTop() {
+export function SidebarTop() {
   return (
-    <div id="sidebar_top">
-      sidebarTop
-    </div>
+    <menu id="sidebar_top">
+      <li>
+        <a href="#">
+          <GoHomeFill color="#fff" size={24} style={{ background: "none" }} />
+          Início
+        </a>
+      </li>
+      <li>
+        <a href="#">
+          <CiSearch
+            color="#fff"
+            size={24}
+            style={{ background: "none" }}
+            strokeWidth={0.5}
+          />
+          Buscar
+        </a>
+      </li>
+    </menu>
   );
 }
-
-export default SidebarTop

spotify-clone/src/index.scss

@@ -6,6 +6,9 @@
   margin: 0;
   padding: 0;
   box-sizing: border-box;
+  text-decoration: none;
+  list-style: none;
+
   font-family: "Figtree", sans-serif;
 }