diff --git a/client/src/app/core/menu/menu-admin.component.scss b/client/src/app/core/menu/menu-admin.component.scss index 04403950e..5881475f1 100644 --- a/client/src/app/core/menu/menu-admin.component.scss +++ b/client/src/app/core/menu/menu-admin.component.scss @@ -1,13 +1,25 @@ menu { background-color: $black-background; - padding: 20px; + padding: 25px; margin: 0; height: 100%; + .panel-block { + margin-bottom: 15px; + } + + .block-title { + text-transform: uppercase; + font-weight: bold; + color: $menu-color-block; + margin-bottom: 10px; + } + a { display: block; + margin-left: 5px; height: 30px; - color: #9cabb8; + color: $menu-color-link; cursor: pointer; transition: color 0.3s; @@ -17,7 +29,7 @@ menu { } .glyphicon { - margin-right: 20px; + margin-right: 15px; } &:hover, &.active { diff --git a/client/src/app/core/menu/menu.component.html b/client/src/app/core/menu/menu.component.html index 0b093882f..63a1c03c5 100644 --- a/client/src/app/core/menu/menu.component.html +++ b/client/src/app/core/menu/menu.component.html @@ -1,5 +1,7 @@ <menu> <div class="panel-block"> + <div class="block-title">Account</div> + <div id="panel-user-login" class="panel-button"> <a *ngIf="!isLoggedIn" routerLink="/login" routerLinkActive="active"> <span class="hidden-xs glyphicon glyphicon-log-in"></span> @@ -24,6 +26,8 @@ </div> <div class="panel-block"> + <div class="block-title">Videos</div> + <a routerLink="/videos/list" routerLinkActive="active"> <span class="hidden-xs glyphicon glyphicon-list"></span> See videos @@ -35,8 +39,10 @@ </a> </div> - <div class="panel-block"> - <a *ngIf="isUserAdmin()" routerLink="/admin" routerLinkActive="active"> + <div *ngIf="isUserAdmin()" class="panel-block"> + <div class="block-title">Other</div> + + <a routerLink="/admin" routerLinkActive="active"> <span class="hidden-xs glyphicon glyphicon-cog"></span> Administration </a> diff --git a/client/src/sass/_variables.scss b/client/src/sass/_variables.scss index 1b91434ba..d89fbb5e0 100644 --- a/client/src/sass/_variables.scss +++ b/client/src/sass/_variables.scss @@ -3,6 +3,9 @@ $grey-color: #555; $black-background: #1d2125; $grey-background: #f6f2f2; +$menu-color-link: #9cabb8; +$menu-color-block: #686f77; + $header-height: 65px; $header-border-color: #e9eff6;