scuffed update for dynamic sidebars

.gitignore

@@ -37,3 +37,5 @@
 **/Release
 **/Debug
 app/yarn.lock
+
+app/test/

app/assets/scss/.ignore/_components.scss

@@ -1,3 +1,5 @@
 @import './components/button';
 @import './components/checkbox';
 @import './components/sidebar';
+@import './components/radar';
+@import './components/map';

app/assets/scss/.ignore/components/_map.scss

@@ -0,0 +1,25 @@
+.map {
+    position: relative;
+    width: 100vh;
+
+    &_image {
+        display: none;
+    }
+
+    &_no {
+        align-items: center;
+        display: flex;
+        height: 100vh;
+        justify-content: center;
+        left: 0;
+        position: absolute;
+        top: 0;
+        width: 100vh;
+        z-index: 200;
+
+        & > div {
+            font-size: 4rem;
+            letter-spacing: 1.5;
+        }
+    }
+}

app/assets/scss/.ignore/components/_radar.scss

@@ -0,0 +1,59 @@
+.entity {
+    color: #ffffff;
+    font-family: 'Staatliches', sans-serif !important;
+    letter-spacing: 1px;
+    position: absolute;
+    text-shadow: 1px 1px 1px black, 1px -1px 1px black, -1px 1px 1px black,
+        -1px -1px 1px black;
+
+    & .dot {
+        border: 1px solid black;
+        border-radius: 50%;
+        display: none;
+        height: 10px;
+        width: 10px;
+
+        &.enemy {
+            background-color: red;
+        }
+
+        &.local {
+            background-color: green;
+        }
+
+        &.team {
+            background-color: blue;
+        }
+    }
+
+    & .health {
+        display: none;
+        position: absolute;
+    }
+
+    & .name {
+        display: none;
+        position: absolute;
+    }
+
+    & .weapon {
+        display: none;
+        position: absolute;
+    }
+}
+
+#players {
+    left: 0;
+    width: 100vh;
+    position: absolute;
+    top: 0;
+    z-index: 100;
+}
+
+#radar {
+    position: relative;
+}
+
+.resize {
+    height: 100vh;
+}

app/assets/scss/.ignore/components/_sidebar.scss

@@ -1,29 +1,142 @@
 .sidebar {
-    width: 100%;
     height: 100%;
+    width: 100%;
 
-    &_title {
-        font-size: 2rem;
-        padding-bottom: 3rem;
+    &_close {
+        display: none;
+        font-size: 20px;
+        padding: 0 5px 0 5px;
+        transition: ease-in-out 0.3s;
+
+        &:hover {
+            color: white;
+        }
     }
 
     &_tab {
         padding: 1rem 0;
 
+        &_content {
+            padding: 0.5rem 0;
+        }
+
         &_title {
+            border-bottom: 1px solid $sBorder;
             font-size: 1.5rem;
             padding-bottom: 0.5rem;
-            border-bottom: 1px solid $sBorder;
         }
+    }
 
-        &_content {
-            padding: 0.5rem 0;
+    &_title {
+        align-items: center;
+        display: flex;
+        flex-direction: row;
+        font-size: 2rem;
+        justify-content: space-between;
+        padding-bottom: 3rem;
+    }
+}
+
+.left {
+    left: 0;
+    padding-right: 1rem;
+    top: 0;
+}
+
+.right {
+    padding-left: 1rem;
+    right: 0;
+    top: 0;
+}
+
+.sidebar_toggle {
+    align-items: center;
+    background-color: $pBG;
+    cursor: pointer;
+    display: none;
+    height: 100%;
+    justify-content: center;
+    position: absolute;
+    width: 50px;
+    z-index: 500;
+
+    &.left {
+        border-right: 1px solid $sBorder;
+        padding: 0;
+
+        &::after {
+            content: '⫸';
+            font-size: 36px;
         }
     }
+
+    &.right {
+        border-left: 1px solid $sBorder;
+        padding: 0;
+
+        &::after {
+            content: '⫷';
+            font-size: 36px;
+        }
+    }
+}
+
+.animate_left {
+    animation: fade_in_left 1s;
+    animation-fill-mode: forwards;
+    z-index: 500;
+}
+
+.animate_right {
+    animation: fade_in_right 1s;
+    animation-fill-mode: forwards;
+    z-index: 500;
+}
+
+@keyframes fade_in_left {
+    0% {
+        left: -50%;
+    }
+
+    100% {
+        left: 0%;
+    }
+}
+
+@keyframes fade_in_right {
+    0% {
+        right: -50%;
+    }
+
+    100% {
+        right: 0%;
+    }
 }
 
 @media only screen and (max-width: 1399.98px) {
     .sidebar {
-        //width: 0;
+        background-color: rgba(0, 0, 0, 0.5);
+        margin-right: auto;
+        margin-left: auto;
+        padding-right: 1rem;
+        padding-left: 1rem;
+        position: absolute;
+        width: 50%;
+
+        &_close {
+            display: block;
+        }
+
+        &.left {
+            left: -50%;
+        }
+
+        &.right {
+            right: -50%;
+        }
+    }
+
+    .sidebar_toggle {
+        display: flex;
     }
 }

app/assets/scss/.ignore/layouts/_body.scss

@@ -4,6 +4,13 @@ body {
     color: darken($pColor, 30%);
     font-family: 'Quicksand', sans-serif !important;
     height: 100%;
+    overflow-x: hidden;
+    position: relative;
+    text-decoration: none;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    user-select: none;
+    -ms-user-select: none;
     width: 100%;
 }
 

app/assets/scss/main.scss

@@ -5,89 +5,3 @@
 
 @import './.ignore/layouts';
 @import './.ignore/components';
-
-#radar {
-    position: relative;
-    height: 100vh;
-}
-
-#players {
-    left: 0;
-    height: 100vh;
-    width: 100vh;
-    position: absolute;
-    top: 0;
-    z-index: 100;
-}
-
-.entity {
-    color: #ffffff;
-    font-family: 'Staatliches', sans-serif !important;
-    letter-spacing: 1px;
-    position: absolute;
-    text-shadow: 1px 1px 1px black, 1px -1px 1px black, -1px 1px 1px black,
-        -1px -1px 1px black;
-
-    & .dot {
-        border: 1px solid black;
-        border-radius: 50%;
-        display: none;
-        height: 10px;
-        width: 10px;
-
-        &.enemy {
-            background-color: red;
-        }
-
-        &.local {
-            background-color: green;
-        }
-
-        &.team {
-            background-color: blue;
-        }
-    }
-
-    & .health {
-        display: none;
-        position: absolute;
-    }
-
-    & .name {
-        display: none;
-        position: absolute;
-    }
-
-    & .weapon {
-        display: none;
-        position: absolute;
-    }
-}
-
-.map {
-    height: 100vh;
-    position: relative;
-    width: 100vh;
-
-    &_image {
-        display: none;
-        height: 100vh;
-    }
-
-    &_no {
-        align-items: center;
-        display: flex;
-        height: 100vh;
-        justify-content: center;
-        left: 0;
-        position: absolute;
-        top: 0;
-        width: 100vh;
-        z-index: 200;
-
-        & > div {
-            font-size: 4rem;
-            letter-spacing: 1.5;
-        }
-    }
-}

app/package.json

@@ -14,6 +14,7 @@
         "@node-steam/vdf": "^2.1.0",
         "axios": "^0.20.0",
         "express": "^4.17.1",
+        "image-to-base64": "^2.1.1",
         "socket.io": "^2.3.0"
     },
     "devDependencies": {