feat: integrate ThemeToggle into sidebar with proper positioning

Author: theEquinoxDev

client/components/Sidebar.css

@@ -1,13 +1,14 @@
 @value toggleTime: 200ms;
 
 .container {
-  background: #fff;
+  background: var(--bg-primary);
   border: none;
-  border-right: 1px solid #aaa;
+  border-right: 1px solid var(--border-color);
   box-sizing: border-box;
   max-width: calc(50% - 10px);
   opacity: 0.95;
   z-index: 1;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
 }
 
 .container:not(.hidden) {
@@ -45,6 +46,16 @@
   padding: 0;
 }
 
+.container :global(.themeToggle) {
+  position: absolute;
+  top: 10px;
+  left: 15px;
+  z-index: 10;
+  height: 26px;
+  width: 27px;
+  padding: 0;
+}
+
 .pinButton,
 .toggleButton {
   cursor: pointer;

client/components/Sidebar.jsx

@@ -4,6 +4,7 @@ import cls from 'classnames';
 import s from './Sidebar.css';
 import Button from './Button';
 import Icon from './Icon';
+import ThemeToggle from './ThemeToggle';
 
 const toggleTime = parseInt(s.toggleTime);
 
@@ -48,6 +49,7 @@ export default class Sidebar extends Component {
         className={className}
         onClick={this.handleClick}
         onMouseLeave={this.handleMouseLeave}>
+        <ThemeToggle/>
         {visible &&
           <Button type="button"
             title="Pin"