Decrease height of navigation bar and display avatar on right-hand side
MODIFY
resources/assets/sass/components/navigation.scss
resources/assets/sass/components/navigation.scss
@import '../variables/colors';
.navigation {
+ display: flex;
+ align-items: center;
+ height: 70px;
background: $colors-navigation;
.wrapper {
}
.navigation__menu {
- margin: 0 -16px;
- list-style: none;
+ margin-left: -10px;
+ margin-right: -10px;
display: flex;
+ align-items: center;
+ list-style: none;
> li {
- padding: 28px 16px;
+ padding-left: 10px;
+ padding-right: 10px;
> a {
+ display: flex;
+ align-items: center;
color: $colors-text;
&:hover, &.active {
color: #FFF;
}
-
- i {
- margin-right: 4px;
}
}
}
}
+
+.avatar {
+ width: 25px;
+ height: 25px;
+ border-radius: 3px;
+ object-fit: cover;
}

MODIFY
resources/assets/sass/components/spacing.scss
resources/assets/sass/components/spacing.scss
.mt-3 {
margin-top: 36px;
}
+
+.mr-05 {
+ margin-right: 5px;
+}

MODIFY
resources/views/layout.blade.php
resources/views/layout.blade.php
<div class="wrapper">
<ul class="navigation__menu">
<li>
- <a href="/dashboard" {!! (Request::path() == 'dashboard') ? 'class="active"' : '' !!}><i class="fas fa-home"></i> @lang('general.dashboard')</a>
+ <a href="/dashboard" {!! (Request::path() == 'dashboard') ? 'class="active"' : '' !!}><i class="fas fa-home fa-sm mr-05"></i> @lang('general.dashboard')</a>
</li>
</ul>
<ul class="navigation__menu">
<li class="dropdown">
<a href="#" class="dropdown__toggle">
- <i class="fas fa-plus"></i> <i class="fas fa-caret-down"></i>
+ <i class="far fa-plus mr-05"></i> <i class="fas fa-caret-down fa-sm"></i>
</a>
<ul class="dropdown__list">
<li>
</li>
<li class="dropdown">
<a href="#" class="dropdown__toggle">
- {{ $userName }} <i class="fas fa-caret-down"></i>
+ <img src="/storage/avatars/{{ Auth::user()->avatar }}" class="avatar mr-05" /> <i class="fas fa-caret-down fa-sm"></i>
</a>
<ul class="dropdown__list">
<li>

Decrease height of navigation bar and display avatar on right-hand side