feat: improve sidebar (#548)

azerothcore · Mar 29, 2020 · e413cd4 · e413cd4
1 parent 83c95e0
commit e413cd4
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 18 deletions.
diff --git a/src/app/main/main-window/main-window.component.scss b/src/app/main/main-window/main-window.component.scss
@@ -1,3 +1,5 @@
+@import './src/assets/scss/_partials/sidebar-width';
+
 .page-wrapper {
   height: 100vh;
 
@@ -6,7 +8,7 @@
     width: 100%;
     transition: padding-left .3s ease;
 
-    padding-left: 260px;
+    padding-left: $sidebar-width;
   }
 
   .sidebar {

diff --git a/src/app/main/main-window/sidebar/sidebar.component.html b/src/app/main/main-window/sidebar/sidebar.component.html
@@ -54,21 +54,17 @@
             <a id="collapse-all" (click)="collapseAll()">Collapse All</a>
           </li>
 
-          <li class="header-menu">
-            <span>Editors</span>
-          </li>
-
           <li class="sidebar-dropdown" [ngClass]="{ 'active': menuStates.creature === 'down' }">
             <a id="creature-editor-toggle" (click)="toggleState('creature')">
-              <i class="fa fa-pen"></i>
+              <i class="fa fa-dragon"></i>
               <span>Creature</span>
             </a>
 
             <div class="sidebar-submenu" [@slide]="menuStates.creature">
               <ul>
                 <li>
                   <a href="#" routerLinkActive="active" [routerLink]="'creature/select'">
-                    Select Creature Template
+                    Select Creature
                   </a>
                 </li>
                 <ng-container *ngIf="creatureHandlerService.selected">
@@ -147,15 +143,15 @@
 
           <li class="sidebar-dropdown" [ngClass]="{ 'active': menuStates.quest === 'down' }">
             <a (click)="toggleState('quest')">
-              <i class="fa fa-pen"></i>
+              <i class="fa fa-scroll"></i>
               <span>Quest</span>
             </a>
 
             <div class="sidebar-submenu" [@slide]="menuStates.quest">
               <ul>
                 <li>
                   <a href="#" routerLinkActive="active" [routerLink]="'quest/select'">
-                    Select Quest Template
+                    Select Quest
                   </a>
                 </li>
                 <ng-container *ngIf="questHandlerService.selected">
@@ -209,14 +205,14 @@
 
           <li class="sidebar-dropdown" [ngClass]="{ 'active': menuStates.gameobject === 'down' }">
             <a (click)="toggleState('gameobject')">
-              <i class="fa fa-pen"></i>
+              <i class="fa fa-dungeon"></i>
               <span>GameObject</span>
             </a>
             <div class="sidebar-submenu" [@slide]="menuStates.gameobject">
               <ul>
                 <li>
                   <a href="#" routerLinkActive="active" [routerLink]="'gameobject/select'">
-                    Select Gameobject Template
+                    Select Gameobject
                   </a>
                 </li>
                 <ng-container *ngIf="gameobjectHandlerService.selected">
@@ -259,14 +255,14 @@
 
           <li class="sidebar-dropdown" [ngClass]="{ 'active': menuStates.item === 'down' }">
             <a (click)="toggleState('item')">
-              <i class="fa fa-pen"></i>
+              <i class="fa fa-gavel"></i>
               <span>Item</span>
             </a>
             <div class="sidebar-submenu" [@slide]="menuStates.item">
               <ul>
                 <li>
                   <a href="#" routerLinkActive="active" [routerLink]="'item/select'">
-                    Select Item Template
+                    Select Item
                   </a>
                 </li>
                 <ng-container *ngIf="itemHandlerService.selected">
@@ -309,7 +305,7 @@
 
           <li class="sidebar-dropdown" [ngClass]="{ 'active': menuStates.gossip === 'down' }">
             <a (click)="toggleState('gossip')">
-              <i class="fa fa-pen"></i>
+              <i class="fa fa-comments"></i>
               <span>Gossip</span>
             </a>
             <div class="sidebar-submenu" [@slide]="menuStates.gossip">
@@ -339,7 +335,7 @@
 
           <li class="sidebar-dropdown" [ngClass]="{ 'active': menuStates.conditions === 'down' }">
             <a (click)="toggleState('conditions')">
-              <i class="fa fa-pen"></i>
+              <i class="fas fa-sort-amount-up"></i>
               <span>Conditions</span>
             </a>
 
@@ -363,7 +359,7 @@
 
           <li class="sidebar-dropdown" [ngClass]="{ 'active': menuStates.smartAi === 'down' }">
             <a (click)="toggleState('smartAi')">
-              <i class="fa fa-pen"></i>
+              <i class="fa fa-lightbulb"></i>
               <span>SmartAI</span>
             </a>
 

diff --git a/src/app/main/main-window/sidebar/sidebar.component.scss b/src/app/main/main-window/sidebar/sidebar.component.scss
@@ -1,3 +1,5 @@
+@import './src/assets/scss/_partials/sidebar-width';
+
 $bg-sidebar-wrapper: #1d1d1d;
 $border-color: #2b2b2b;
 $color: #bdbdbd;
@@ -19,7 +21,7 @@ $img-border-color: rgba(255, 255, 255, 0.1);
   100% { transform: rotate(0deg); }
 }
 .sidebar {
-  width: 260px;
+  width: $sidebar-width;
   height: 100%;
   max-height: 100%;
   position: fixed;
@@ -40,6 +42,7 @@ $img-border-color: rgba(255, 255, 255, 0.1);
     position: relative;
 
     .sidebar-header {
+      font-size: 0.8rem;
       text-align: center;
       padding: 10px 20px;
       display: flex;
@@ -85,6 +88,7 @@ $img-border-color: rgba(255, 255, 255, 0.1);
         }
 
         .db-host {
+          font-size: .8rem;
           .port {
             color: lightgray;
           }
@@ -126,6 +130,7 @@ $img-border-color: rgba(255, 255, 255, 0.1);
     }
 
     .sidebar-menu {
+      padding-top: 4px;
       padding-bottom: 10px;
 
       .header-menu span {
@@ -150,7 +155,7 @@ $img-border-color: rgba(255, 255, 255, 0.1);
 
           i {
             margin-right: 10px;
-            font-size: 12px;
+            font-size: 0.9rem;
             width: 30px;
             height: 30px;
             line-height: 30px;

diff --git a/src/assets/scss/_partials/sidebar-width.scss b/src/assets/scss/_partials/sidebar-width.scss
@@ -0,0 +1 @@
+$sidebar-width: 240px;