1 files changed, 104 insertions, 0 deletions
diff --git a/src/components/SideBar.module.css b/src/components/SideBar.module.css
new file mode 100644
index 0000000..b78d731
--- /dev/null
+++ b/src/components/SideBar.module.css
@@ -0,0 +1,104 @@
+.root {
+  background: var(--color-bg-sidebar);
+  position: relative;
+}
+
+.logoLink {
+  display: block;
+}
+
+.logo {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 25px 0 15px;
+  @media (max-width: 768px) {
+    padding: 0;
+  }
+  color: #2a477a;
+  transition: color 0.3s ease-in-out;
+
+  &:hover {
+    animation: pulse 0.3s ease-in-out 0s infinite alternate;
+  }
+
+  img {
+    width: 80px;
+    height: 80px;
+  }
+}
+
+@keyframes pulse {
+  0% {
+    color: #2a477a;
+  }
+  100% {
+    color: #1f52ac;
+  }
+}
+
+.rows {
+  @media (max-width: 768px) {
+    display: flex;
+    justify-content: space-between;
+    overflow: scroll;
+  }
+}
+
+/* a router link */
+.row {
+  color: var(--color-text);
+  text-decoration: none;
+
+  display: flex;
+  align-items: center;
+  padding: 8px 20px;
+
+  @media (max-width: 768px) {
+    flex-direction: column;
+  }
+
+  svg {
+    color: var(--color-icon);
+  }
+}
+
+.rowActive {
+  background: var(--color-sb-active-row-bg);
+
+  @media (max-width: 768px) {
+    background: none;
+    border-bottom: 2px solid #387cec;
+  }
+}
+
+.label {
+  padding-left: 14px;
+  @media (max-width: 768px) {
+    padding-left: 0;
+    padding-top: 5px;
+  }
+}
+
+.themeSwitchContainer {
+  --sz: 50px;
+
+  @media (max-width: 768px) {
+    display: none;
+  }
+
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: var(--sz);
+  height: var(--sz);
+  padding: 20px 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  svg {
+    display: block;
+    color: var(--color-icon);
+  }
+}