Liu Song’s Projects

diff --git a/sidebar-03/assets/analytics.svg b/sidebar-03/assets/analytics.svg
new file mode 100644
index 0000000000000000000000000000000000000000..50ced2b32a1862778a45e7cbd568fb631bcaaec2
--- /dev/null
+++ b/sidebar-03/assets/analytics.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="#F8F7FD" fill="none" stroke-linecap="round" stroke-linejoin="round">
+    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+    <path d="M3 3v18h18"></path>
+    <path d="M20 18v3"></path>
+    <path d="M16 16v5"></path>
+    <path d="M12 13v8"></path>
+    <path d="M8 16v5"></path>
+    <path d="M3 11c6 0 5 -5 9 -5s3 5 9 5"></path>
+</svg>
\ No newline at end of file




diff --git a/sidebar-03/assets/chevron.svg b/sidebar-03/assets/chevron.svg
new file mode 100644
index 0000000000000000000000000000000000000000..18014589a6abb74b7b0511146eb933d0cb92e587
--- /dev/null
+++ b/sidebar-03/assets/chevron.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="#6067EB" fill="none" stroke-linecap="round" stroke-linejoin="round">
+    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+    <path d="M7 7l5 5l-5 5"></path>
+    <path d="M13 7l5 5l-5 5"></path>
+</svg>    
\ No newline at end of file




diff --git a/sidebar-03/assets/dashboard.svg b/sidebar-03/assets/dashboard.svg
new file mode 100644
index 0000000000000000000000000000000000000000..0986aeeb43ac15bb07e369ac5e7d60a864348e3a
--- /dev/null
+++ b/sidebar-03/assets/dashboard.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="#F8F7FD" fill="none" stroke-linecap="round" stroke-linejoin="round">
+    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+    <path d="M12 13m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"></path>
+    <path d="M13.45 11.55l2.05 -2.05"></path>
+    <path d="M6.4 20a9 9 0 1 1 11.2 0z"></path>
+</svg>
\ No newline at end of file




diff --git a/sidebar-03/assets/funds.svg b/sidebar-03/assets/funds.svg
new file mode 100644
index 0000000000000000000000000000000000000000..64548519ba3aeec61262c62dc1e7e287e1152b1f
--- /dev/null
+++ b/sidebar-03/assets/funds.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="#F8F7FD" fill="none" stroke-linecap="round" stroke-linejoin="round">
+    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+    <path d="M3 21l18 0"></path>
+    <path d="M3 10l18 0"></path>
+    <path d="M5 6l7 -3l7 3"></path>
+    <path d="M4 10l0 11"></path>
+    <path d="M20 10l0 11"></path>
+    <path d="M8 14l0 3"></path>
+    <path d="M12 14l0 3"></path>
+    <path d="M16 14l0 3"></path>
+</svg>
\ No newline at end of file




diff --git a/sidebar-03/assets/help.svg b/sidebar-03/assets/help.svg
new file mode 100644
index 0000000000000000000000000000000000000000..06891a284071075d3f17a385e50d3657265fbd47
--- /dev/null
+++ b/sidebar-03/assets/help.svg
@@ -0,0 +1,6 @@
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="#F8F7FD" fill="none" stroke-linecap="round" stroke-linejoin="round">
+    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+    <path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0"></path>
+    <path d="M12 16v.01"></path>
+    <path d="M12 13a2 2 0 0 0 .914 -3.782a1.98 1.98 0 0 0 -2.414 .483"></path>
+</svg>
\ No newline at end of file




diff --git a/sidebar-03/assets/logo.svg b/sidebar-03/assets/logo.svg
new file mode 100644
index 0000000000000000000000000000000000000000..4a29497407afed77936927377243cb71486c870f
--- /dev/null
+++ b/sidebar-03/assets/logo.svg
@@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1413" height="1413" viewBox="0 0 1413 1413" fill="none">
+<g filter="url(#filter0_d_69_9)">
+<g clip-path="url(#clip0_69_9)">
+<rect x="60" y="45" width="1293" height="1293" rx="240" fill="url(#paint0_linear_69_9)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M713.825 463.827C710.514 459.204 703.717 459.227 700.435 463.871L643.738 544.13L371.814 929.049L307.182 1020.53C303.265 1026.08 307.17 1033.8 313.892 1033.8H424.81H707.1H994.352H1105.73C1112.48 1033.8 1116.37 1026.03 1112.41 1020.5L1046.93 929.049L771.027 543.715L713.825 463.827ZM714.388 642.801C711.078 638.177 704.28 638.2 700.998 642.844L508.182 915.785C504.264 921.331 508.169 929.049 514.892 929.049H707.1H903.141C909.887 929.049 913.786 921.282 909.82 915.742L714.388 642.801Z" fill="white"/>
+<path d="M709.59 230.409L1107.75 785.629C1111.81 791.299 1114 798.135 1114 805.15V878.805C1114 886.831 1103.9 890.17 1099.25 883.682L709.589 339.868C706.313 335.295 699.591 335.323 696.354 339.924L313.798 883.261C309.181 889.818 299 886.501 299 878.441V805.468C299 798.551 301.13 791.809 305.091 786.183L696.356 230.467C699.594 225.869 706.313 225.839 709.59 230.409Z" fill="white"/>
+<path d="M651.356 823.291L620.032 867.255C615.805 873.187 620.019 881.443 627.272 881.443H785.655C792.908 881.443 797.121 873.187 792.894 867.255L761.57 823.291C759.898 820.943 757.202 819.551 754.331 819.551H658.596C655.725 819.551 653.029 820.943 651.356 823.291Z" fill="white"/>
+</g>
+</g>
+<defs>
+    <filter id="filter0_d_69_9" x="0" y="0" width="1413" height="1413" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+        <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+        <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+        <feOffset dy="15"/>
+        <feGaussianBlur stdDeviation="30"/>
+        <feColorMatrix type="matrix" values="0 0 0 0 0.241667 0 0 0 0 0.241667 0 0 0 0 0.241667 0 0 0 0.3 0"/>
+        <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_69_9"/>
+        <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_69_9" result="shape"/>
+    </filter>
+    <clipPath id="clip0_69_9">
+        <rect x="60" y="45" width="1293" height="1293" rx="240" fill="white"/>
+    </clipPath>
+</defs>
+</svg>
\ No newline at end of file




diff --git a/sidebar-03/assets/performance.svg b/sidebar-03/assets/performance.svg
new file mode 100644
index 0000000000000000000000000000000000000000..148b9b51a36eb1b01a91513a579e70293bd4f17c
--- /dev/null
+++ b/sidebar-03/assets/performance.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="#F8F7FD" fill="none" stroke-linecap="round" stroke-linejoin="round">
+    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+    <path d="M3 12m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v6a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z"></path>
+    <path d="M9 8m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v10a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z"></path>
+    <path d="M15 4m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v14a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z"></path>
+    <path d="M4 20l14 0"></path>
+</svg>
\ No newline at end of file




diff --git a/sidebar-03/assets/profile.jpg b/sidebar-03/assets/profile.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..e8bdb752b110b5009c8c55eb9ef045975ecac5c3
Binary files /dev/null and b/sidebar-03/assets/profile.jpg differ




diff --git a/sidebar-03/assets/settings.svg b/sidebar-03/assets/settings.svg
new file mode 100644
index 0000000000000000000000000000000000000000..8e87da0c959420ad12871c293a4bc01bc2c41e31
--- /dev/null
+++ b/sidebar-03/assets/settings.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="#F8F7FD" fill="none" stroke-linecap="round" stroke-linejoin="round">
+    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+    <path d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z"></path>
+    <path d="M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0"></path>
+</svg>
\ No newline at end of file




diff --git a/sidebar-03/index.html b/sidebar-03/index.html
new file mode 100644
index 0000000000000000000000000000000000000000..4168cdd24b350d0531910b59d41b394a503d89da
--- /dev/null
+++ b/sidebar-03/index.html
@@ -0,0 +1,91 @@
+
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+      <meta charset="utf-8">
+      <title>Sidebar</title>
+      <link rel="preconnect" href="https://fonts.googleapis.com">
+      <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+      <link
+          href="https://fonts.googleapis.com/css2?family=Poppins&display=swap"
+          rel="stylesheet"
+      >
+      <link rel="stylesheet" href="style.css">
+    </head>
+    <body>
+        <nav>
+            <div class="sidebar-top">
+              <a href="#" class="logo__wrapper">
+                <img src="assets/logo.svg" alt="Logo" class="logo">
+                <h1 class="hide">Laplace</h1>
+              </a>
+              <div class="expand-btn">
+                <img src="assets/chevron.svg" alt="Chevron">
+              </div>
+            </div>
+            <div class="sidebar-links">
+                <ul>
+                  <li>
+                    <a href="#dashboard" title="Dashboard" class="tooltip">
+                      <img src="assets/dashboard.svg" alt="Dashboard">
+                      <span class="link hide">Dashboard</span>
+                      <span class="tooltip__content">Dashboard</span>
+                    </a>
+                  </li>
+                  <li>
+                    <a href="#project" title="Project" class="tooltip">
+                      <img src="assets/analytics.svg" alt="Analytics">
+                      <span class="link hide">Analytics</span>
+                      <span class="tooltip__content">Analytics</span>
+                    </a>
+                  </li>
+                  <li>
+                    <a href="#performance" title="Performance" class="tooltip">
+                      <img src="assets/performance.svg" alt="Performance">
+                      <span class="link hide">Performance</span>
+                      <span class="tooltip__content">Performance</span>
+                    </a>
+                  </li>
+                  <li>
+                    <a href="#funds" title="Funds" class="tooltip">
+                      <img src="assets/funds.svg" alt="Funds">
+                      <span class="link hide">Funds</span>
+                      <span class="tooltip__content">Funds</span>
+                    </a>
+                  </li>
+                </ul>
+              </div>
+              <div class="sidebar-bottom">
+                <div class="sidebar-links">
+                  <ul>
+                    <li>
+                      <a href="#help" title="Help" class="tooltip">
+                       <img src="assets/help.svg" alt="Help">
+                        <span class="link hide">Help</span>
+                        <span class="tooltip__content">Help</span>
+                      </a>
+                    </li>
+                    <li>
+                      <a href="#settings" title="Settings" class="tooltip">
+                        <img src="assets/settings.svg" alt="Settings">
+                        <span class="link hide">Settings</span>
+                        <span class="tooltip__content">Settings</span>
+                      </a>
+                    </li>
+                  </ul>
+                </div>
+                <div class="sidebar__profile">
+                  <div class="avatar__wrapper">
+                    <img class="avatar" src="assets/profile.jpg" alt="Profile">
+                    <div class="online__status"></div>
+                  </div>
+                  <div class="avatar__name hide">
+                      <div class="user-name">Joe Doe</div>
+                      <div class="email">[email protected]</div>
+                  </div>
+                </div>
+              </div>
+          </nav>
+          <script src="script.js"></script>
+    </body>
+</html>
\ No newline at end of file




diff --git a/sidebar-03/script.js b/sidebar-03/script.js
new file mode 100644
index 0000000000000000000000000000000000000000..95ed00104644be3033e88e936e320afc934386dd
--- /dev/null
+++ b/sidebar-03/script.js
@@ -0,0 +1,28 @@
+
+const expand_btn = document.querySelector(".expand-btn");
+
+let activeIndex;
+
+expand_btn.addEventListener("click", () => {
+  document.body.classList.toggle("collapsed");
+});
+
+const current = window.location.href;
+
+const allLinks = document.querySelectorAll(".sidebar-links a");
+
+allLinks.forEach((elem) => {
+  elem.addEventListener('click', function() {
+    const hrefLinkClick = elem.href;
+
+    allLinks.forEach((link) => {
+      if (link.href == hrefLinkClick){
+        link.classList.add("active");
+      } else {
+        link.classList.remove('active');
+      }
+    });
+  })
+});
+
+




diff --git a/sidebar-03/style.css b/sidebar-03/style.css
new file mode 100644
index 0000000000000000000000000000000000000000..16738b0b01016a6d8b7683ef636adcfee6c9793f
--- /dev/null
+++ b/sidebar-03/style.css
@@ -0,0 +1,248 @@
+
+:root {
+    --primary-color: #3841E6;
+    --text: #EDF0F7;
+    --sidebar-gray: #111926;
+    --sidebar-gray-light: #F8F7FD;
+    --sidebar-gray-background: #6067EB;
+    --success: #00C896;
+}
+
+html {
+  font-family: Poppins, sans-serif;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+nav {
+    position: sticky;
+    top: 0;
+    left: 0;
+    height: 100vh;
+    background-color: var(--primary-color);
+    width: 18rem;
+    padding: 4px 12px;
+    display: flex;
+    color: white;
+    flex-direction: column;
+    transition: width 0.5s linear;
+}
+
+main {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+body.collapsed nav {
+  width: 80px;
+}
+
+body.collapsed .hide {
+  position: absolute;
+  display: none;
+  pointer-events: none;
+}
+
+/*? sidebar top */
+.sidebar-top {
+  position: relative;
+  display: flex;
+  align-items: start;
+  justify-content: center;
+  flex-direction: column;
+  min-height: 40px;
+  padding: 16px 0px;
+}
+
+body.collapsed .sidebar-top {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.logo__wrapper {
+  display: flex;
+  justify-content: start;
+  align-items: center;
+  gap: 20px;
+  color: white;
+  text-decoration: none;
+}
+
+.logo {
+  width: 54px;
+  height: 54px;
+  background-color: var(--sidebar-gray-background);
+  border-radius: 12px;
+}
+
+.expand-btn {
+  top: 16px;
+  right: -62px;
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+  background-color: white;
+  cursor: pointer;
+  box-shadow: #6067EB50 0px 2px 8px 0px;
+}
+
+.expand-btn img {
+  transform: rotate(180deg);
+  stroke: var(--primary-color);
+  width: 38px;
+  height: 38px;
+}
+
+
+body.collapsed .expand-btn img {
+  transform: rotate(360deg);
+}
+
+.sidebar-links {
+  padding: 8px 0px;
+  border-top: 1px solid var(--sidebar-gray-background);
+}
+
+/*? menu links */
+.sidebar-links ul {
+  list-style-type: none;
+  position: relative;
+}
+
+.sidebar-links li {
+  position: relative;
+}
+
+.sidebar-links li a {
+  padding: 12px 10px;
+  margin: 8px 0px;
+  color: var(--sidebar-gray-light);
+  font-size: 1.25rem;
+  display: flex;
+  align-items: center;
+  height: 56px;
+  text-decoration: none;
+  transition: all 0.2s ease-in-out;
+}
+
+.sidebar-links li a img {
+  height: 32px;
+  width: 32px;
+}
+
+
+.sidebar-links .link {
+  margin-left: 30px;
+}
+
+.sidebar-links li a:hover, .sidebar-links .active {
+  width: 100%;
+  text-decoration: none;
+  background-color: var(--sidebar-gray-background);
+  border-radius: 10px;
+  color: var(--sidebar-gray-light);
+}
+
+.sidebar-links .active {
+  color: white;
+}
+
+/*? bottom sidebar */
+
+.sidebar-bottom {
+  padding: 8px 0px;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  margin-top: auto;
+}
+
+/*? account part */
+.sidebar__profile {
+  display: flex;
+  align-items: center;
+  gap: 18px;
+  flex-direction: row;
+  padding: 24px 8px;
+  border-top: 1px solid var(--sidebar-gray-background);
+}
+
+.avatar__wrapper {
+  position: relative;
+  display: flex;
+}
+
+.avatar {
+  display: block;
+  width: 50px;
+  height: 50px;
+  cursor: pointer;
+  border-radius: 50%;
+  object-fit: cover;
+  filter: drop-shadow(
+    -20px 0 10px rgba(0, 0, 0, 0.1)
+  );
+}
+
+.avatar:hover {
+  transform: scale(1.05);
+  transition: all 0.2s ease-in-out;
+}
+
+.avatar__name {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.user-name {
+  font-size: 0.95rem;
+  font-weight: 800;
+  text-align: left;
+}
+
+.email {
+  font-size: 0.9rem;
+}
+
+.online__status {
+  position: absolute;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background-color: var(--success);
+  bottom: 3px;
+  right: 3px;
+}
+
+/* * Tooltip */
+
+.tooltip {
+  position: relative;
+}
+
+.tooltip .tooltip__content {
+  visibility: hidden;
+  background-color: var(--sidebar-gray-background);
+  color: #fff;
+  text-align: center;
+  border-radius: 6px;
+  padding: 6px 12px;
+  position: absolute;
+  z-index: 1;
+  left: 75px;
+}
+
+body.collapsed .tooltip:hover .tooltip__content {
+  visibility: visible;
+}