Poprawki stylistyczne

src/components/SideBar.vue

@@ -64,13 +64,13 @@ export default defineComponent({
 @import '../styles/global.scss';
 
 .sidebar {
-  position: fixed;
-  top: 50%;
+  position: absolute;
+  top: 0;
   left: 0;
 
   z-index: 999;
 
-  transform: translateY(-50%);
+  transform: translate(-100%, 0);
 }
 
 .sidebar_content {
@@ -91,14 +91,14 @@ export default defineComponent({
     align-items: center;
 
     color: white;
-    background-color: #00000073;
+    background-color: #1d1d1d;
     width: 50px;
     height: 85px;
 
     .bar {
       position: absolute;
       top: 0;
-      right: 0;
+      left: 0;
 
       height: 100%;
       width: 4px;
@@ -118,7 +118,7 @@ export default defineComponent({
     }
 
     &:focus-visible {
-      background-color: #6d6d6d73;
+      background-color: #6d6d6d;
     }
   }
 }
@@ -140,17 +140,18 @@ button.option-save {
   .sidebar {
     left: 50%;
     top: 0;
+    width: 100%;
 
-    transform: translate(-50%, 0);
+    transform: translate(-50%, -100%);
   }
 
   .sidebar_content {
-    grid-template-rows: 1fr;
-    grid-template-columns: repeat(3, 1fr);
+    display: flex;
+    justify-content: space-between;
 
     & > button {
-      height: 60px;
-      width: 60px;
+      height: 40px;
+      width: 100px;
 
       .bar {
         width: 100%;
@@ -160,3 +161,4 @@ button.option-save {
   }
 }
 </style>
+