FORMATO DE TAREAS

Asignado: Luis Ibarguen

Tarea: Componente header-footer.
Objetivo de la tarea: Crear el componente nav mostrarlo en la vista.
Tambien modificar el footer creado que se Se mostrarán en la parte superior
e inferior respectivamente en las vistas necesarias.( version web)

Diseño:
Código:

<!-- afkarNav.html -->

<div ng-if="ctrl.showNav" >

<div class="containerNav" layout="row" layout-align="space-between center" >
<a class="navbar" href="/home" flex-offset="5">
<img src="" srcset="svg/peekerz_logo.svg" alt="logo">
</a>
<div></div>
<div class="image-user" layout="row" layout-align="center center" flex='30' >
<div class="personal-image">
<label class="label">
<input type="file" />
<figure class="personal-figure">
<img src="svg/user-blue.svg" class="personal-avatar" alt="avatar">
</figure>
</label>
</div>
<!-- <span>{{cardProfile.name}}</span> -->
<span>Edgard jonhs</span>
<div class="imgFlag" >
<img src="img/reino-unido.png" alt="">
</div>

</div>
</div>
</div>

<!-- afkarFooter.html -->

<md-toolbar ng-if="ctrl.showFooter" class="md-toolbar-tools" layout='row' layout-align='space-
between center'>
<md-button>
PLEKERZ COMPANY © 2020
</md-button>
<div>
<md-button>
ABOUT US
</md-button>
<md-button>
TERMS & CONDITIONS
</md-button>
<md-button >
PRIVACY POLICT
</md-button>
<md-button>
COOCIES POLICT
</md-button>
</div>
</md-toolbar>

<!-- afkarNav.js -->

import angular from 'angular';
import angularMeteor from 'angular-meteor';
import template from './afkarNav.html';
import './afkarNav.less';
// import { name as AdminNav } from
'/imports/ui/components/common/afkarAdminNav/afkarAdminNav';

class AfkarNav {
constructor($reactive, $scope, $state, $stateParams) {
$reactive(this).attach($scope);
this.$state = $state;
this.$stateParams = $stateParams;
this.showNav = true;

console.log(this.$state)
this.helpers({
currentURL(){
if (this.getReactively('$state', true).current.name ) {
if($state.current.name == "home" || $state.current.name == "feed" ){
this.showNav = false;
}
else{
this.showNav = true;
}

return this.$state.current.name

}
}

})
}
}

const name = 'afkarNav';

export default angular.module(name, [

angularMeteor,
])
.component(name, {
template: template,
controller: ['$reactive', '$scope', '$state', '$stateParams', AfkarNav],
controllerAs: "ctrl"
});
<!-- afkarFooter.js -->
import angular from 'angular';
import angularMeteor from 'angular-meteor';
import template from './afkarFooter.html';
import './afkarFooter.less';

class AfkarFooter {
constructor($reactive, $state, $mdDialog, $scope, authService) {
$reactive(this).attach($scope);
this.$state = $state;
this.authService = authService;
this.$mdDialog = $mdDialog;
this.showFooter = true;

console.log(this.$state)

this.helpers({
currentURL(){
if (this.getReactively('$state', true).current.name ) {
if($state.current.name == "welcome" ){
this.showFooter = false;
}
else{
this.showFooter = true;
}

return this.$state.current.name

}
}

})
}

closeModal() {
this.$mdDialog.cancel()
}
}

const name = 'afkarFooter';

export default angular.module(name, [

angularMeteor
])
.component(name, {
template: template,
controller: ['$reactive', '$state', '$mdDialog', '$scope', 'authService', AfkarFooter],
controllerAs: "ctrl"
});

<!-- afkarNavless -->

afkar-nav {
height: 70px;
min-height: 0px;
position: absolute;
bottom: 0px;
top: 0;
top: left;
left: 0px;
right: 0px;
background-color:white;

.containerNav{
.navbar{
img{
width: 75px;
height: 65px;
}
}
.image-user{

.personal-image input[type="file"] {
display: none;
}
.personal-figure {
position: relative;
width: 40px;
height: 40px;
border-radius: 100%;
border: 2px solid #2e9bb9;
display: flex;
justify-content: center;
align-items: center;
margin-inline-end: 12px;
.icon-user{
svg{
height: 10px !important;
width: 10px !important;
}
}
}
.personal-avatar {
cursor: pointer;
width: 15px;
height: 20px;
box-sizing: border-box;
transition: all ease-in-out .3s;
}
}
}
}

<!-- afkarFooter.less -->

afkar-footer {
md-toolbar{
background: #1B9CBB !important;
// height: 50px;
min-height: 0px;
// position: fixed;
position: relative;
bottom: 0px;
left: 0px;
right: 0px;
color: white !important;
}

Resultado:

Observaciones:
*en la vista dashboard, en la vista home falta corrregir el footer y el nav →
pendiente para corrección.

*falta terminar los datos para el backend → pendiente.