Merge branch '21-add-icons-to-sidebar' into 'master'

Resolve "add icons to sidebar"

Closes #21

See merge request troebs/pycs!18

webui/src/assets/icons/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 GitHub Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

webui/src/assets/icons/paper-airplane.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
+    <path fill-rule="evenodd"
+          d="M1.592 2.712L2.38 7.25h4.87a.75.75 0 110 1.5H2.38l-.788 4.538L13.929 8 1.592 2.712zM.989 8L.064 2.68a1.341 1.341 0 011.85-1.462l13.402 5.744a1.13 1.13 0 010 2.076L1.913 14.782a1.341 1.341 0 01-1.85-1.463L.99 8z"></path>
+</svg>

webui/src/assets/icons/sign-in.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
+    <path fill-rule="evenodd"
+          d="M2 2.75C2 1.784 2.784 1 3.75 1h2.5a.75.75 0 010 1.5h-2.5a.25.25 0 00-.25.25v10.5c0 .138.112.25.25.25h2.5a.75.75 0 010 1.5h-2.5A1.75 1.75 0 012 13.25V2.75zm6.56 4.5l1.97-1.97a.75.75 0 10-1.06-1.06L6.22 7.47a.75.75 0 000 1.06l3.25 3.25a.75.75 0 101.06-1.06L8.56 8.75h5.69a.75.75 0 000-1.5H8.56z"></path>
+</svg>

webui/src/components/window/side-navigation-bar.vue

@@ -11,19 +11,23 @@
       <div class="item"
            :class="{active: window.content === 'settings', inactive: !projectPath}"
            @click="ifProjectIsOpened(show, 'settings')">
-        Project Settings
+        <img src="@/assets/icons/gear.svg">
+        <span>Project Settings</span>
       </div>
 
       <div class="item"
            :class="{inactive: !projectPath}"
            @click="close">
-        Close
+        <img src="@/assets/icons/sign-in.svg">
+        <span>Close</span>
       </div>
 
       <div v-if="window.wide"
            class="item"
+           :class="{rotate: !collapsed}"
            @click="collapse">
-        Collapse
+        <img src="@/assets/icons/paper-airplane.svg">
+        <span>Collapse</span>
       </div>
     </div>
 
@@ -101,16 +105,17 @@ export default {
 }
 
 .item {
-  padding: 1rem 4rem 1rem 1rem;
   cursor: pointer;
   white-space: nowrap;
+  display: flex;
+  align-items: center;
 }
 
 .item:hover:not(.inactive) {
   background-color: #292929;
 }
 
-.item.active {
+.item.active:not(.inactive) {
   background-color: #1f1f1f;
 }
 
@@ -122,8 +127,26 @@ export default {
   border-bottom: 1px solid rgba(255, 255, 255, 0.25);
 }
 
+.item img {
+  width: 1.2rem;
+  margin-left: 1rem;
+  filter: invert(1);
+}
+
+.item.rotate img {
+  transform: rotate(180deg);
+}
+
+.item span {
+  margin: 1rem 4rem 1rem 0.75rem
+}
+
 .side-navigation.wide.collapsed .item {
-  width: 10px;
+  padding: 1rem 1rem 1rem 0;
+}
+
+.side-navigation.wide.collapsed .item span {
+  display: none;
 }
 
 .overlay {