From 7a336d5d1f644ae70798e1084260cad69c75d342 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matej=20Glasn=C3=A1k?= <glasnak@wezeo.com>
Date: Tue, 29 Nov 2022 21:21:49 +0100
Subject: [PATCH] [Header] Refactoring

---
 .../app/_layout/app/_components/a-header.vue  | 217 +++++++-----------
 app/src/plugins/app/_theme/global.sass        |   5 +-
 2 files changed, 82 insertions(+), 140 deletions(-)

diff --git a/app/src/plugins/app/_layout/app/_components/a-header.vue b/app/src/plugins/app/_layout/app/_components/a-header.vue
index e7dd618..63c6832 100644
--- a/app/src/plugins/app/_layout/app/_components/a-header.vue
+++ b/app/src/plugins/app/_layout/app/_components/a-header.vue
@@ -1,98 +1,59 @@
 <template>
 	<v-app-bar class="header">
-		<v-app-bar-nav-icon autoHide @click="eventBus.emit('toggle-menu')" class="menu-icon"></v-app-bar-nav-icon>
+		<v-app-bar-nav-icon @click="eventBus.emit('toggle-menu')" class="menu-icon"></v-app-bar-nav-icon>
 
-		<div class="d-flex align-center justify-space-between w-100 responsive-position">
-			<h1 class="mr-md-4 route-name mb-5">{{ $route.name }}</h1>
+		<div class="d-flex justify-space-between align-center w-100">
+			<h1>{{ $route.name }}</h1>
 
-			<div class="d-flex justify-center align-center">
-				<div class="d-flex justify-center align-center pos-col">
-						<img
-							class="search-icon mx-3"
-							:src="
-								require('@/plugins/app/_layout/app/_img/search-icon.svg')
-							"
-							alt="search-icon"
-						/>
-						<input
-							class="search-input mx-2"
-							type="text"
-							placeholder="Vyhľadávanie"
-						/>
-						<v-menu open-on-hover>
-							<template v-slot:activator="{ props }">
-								<v-btn v-bind="props" class="create-btn"
-									>+<span class="responsive-btn"
-										>Vytvoriť</span
-									></v-btn
-								>
-							</template>
+			<div class="d-flex justify-end align-center w-100">
+				<img class="search-icon mx-3" :src="require('@/plugins/app/_layout/app/_img/search-icon.svg')" alt="search-icon" />
+				<input class="search-input mx-2" type="text" placeholder="Vyhľadávanie" />
 
-							<v-list class="text-left">
-								<v-list-item class="dropdown-hover">
-									MASTER TASK
-								</v-list-item>
-								<v-list-item class="dropdown-hover">
-									SUB TASK
-								</v-list-item>
-								<v-list-item class="dropdown-hover" @click.stop="dialog=true" >
-									TÍM
-								<A-team-modal :visible="dialog" @close="dialog=false" />
-								</v-list-item>
-								<v-list-item class="dropdown-hover">
-									BLOKER
-								</v-list-item>
-							</v-list>
-						</v-menu>
-						<div
-							class="d-flex justify-center align-center employee-section mx-1"
-						>
-							<p v-if="user" class="employee-select">
-								{{
-									user.user.name.charAt(0) +
-									user.user.surname.charAt(0)
-								}}
-							</p>
-							<div class="text-center">
-								<v-menu open-on-hover>
-									<template v-slot:activator="{ props }">
-										<v-btn
-											class="text-transform"
-											v-if="user"
-											v-bind="props"
-										>
-											{{
-												`${user.user.name} ${user.user.surname}`
-											}}
-											<v-icon
-												class="pl-5"
-												icon="mdi-chevron-down"
-												size="x-small"
-											></v-icon>
-										</v-btn>
-									</template>
+				<v-menu>
+					<template v-slot:activator="{ props }">
+						<v-btn v-bind="props" class="button mr-5">+<span class="responsive-btn">Vytvoriť</span></v-btn>
+					</template>
 
-									<v-list class="text-center">
-										<v-list-item class="dropdown-hover">
-											Working hours
-										</v-list-item>
-										<v-list-item>
-											<v-btn class="logout-btn"
-												>Odhlásiť sa</v-btn
-											>
-										</v-list-item>
-									</v-list>
-								</v-menu>
+					<v-list>
+						<v-list-item class="cursor-pointer hover-background">MASTER TASK</v-list-item>
+						<v-list-item class="cursor-pointer hover-background">SUB TASK</v-list-item>
+						<v-list-item class="cursor-pointer hover-background" @click="createTeamDialog = true">TÍM</v-list-item>
+						<v-list-item class="cursor-pointer hover-background">BLOKER</v-list-item>
+					</v-list>
+				</v-menu>
+
+				<v-menu v-if="user">
+					<template v-slot:activator="{ props }">
+						<v-btn class="menu-dropdown" v-bind="props">
+							<div class="d-flex justify-between align-center">
+								<p class="employee-select-avatar d-flex justify-center align-center">
+									{{ user.user.name.charAt(0) + user.user.surname.charAt(0) }}
+								</p>
+
+								<div>
+									<span class="employee-name ml-4">{{ `${user.user.name} ${user.user.surname}` }}</span>
+									<v-icon class="ml-3" icon="mdi-chevron-down" size="x-small"></v-icon>
+								</div>
 							</div>
-						</div>
-					</div>
+						</v-btn>
+					</template>
+
+					<v-list class="text-center">
+						<v-list-item class="cursor-pointer hover-background">Working hours </v-list-item>
+						<v-list-item>
+							<v-btn class="button">Odhlásiť sa</v-btn>
+						</v-list-item>
+					</v-list>
+				</v-menu>
 			</div>
 		</div>
+
+		<A-team-modal :visible="createTeamDialog" @close="createTeamDialog = false" />
 	</v-app-bar>
 </template>
 
 <script>
-import ATeamModal from '../../../_components/a-team-modal.vue'
+import ATeamModal from '@/plugins/app/_components/a-team-modal.vue'
 
 export default {
 	components: {
@@ -102,13 +63,13 @@ export default {
 	data() {
 		return {
 			user: null,
-			dialog: false
+			createTeamDialog: false
 		}
 	},
 
 	async created() {
 		try {
-			this.user = await this.$axios.get_auth_data("v1/auth/info");
+			this.user = await this.$axios.get_auth_data('v1/auth/info')
 		} catch (error) {
 			console.log(error)
 		}
@@ -117,75 +78,53 @@ export default {
 </script>
 
 <style lang="sass" scoped>
-.route-name
-	font-size: 22px
-
 .header
 	position: relative !important
 	box-shadow: none !important
 	border-bottom: 1px solid rgba(0, 0, 0, 0.2)
 	padding: 25px 15px
 
-@media (min-width: 992px)
+	.button
+		background: #7f39fb
+		border-radius: 4px
+		color: #fff
+
 	.menu-icon
 		display: none
 
-.create-btn
-	background: #7f39fb
-	border-radius: 4px
-	color: #fff
+	.search-input
+		outline: none
 
-.logout-btn
-	background: #7f39fb
-	border-radius: 4px
-	color: #fff
+	.search-icon
+		border: 2px solid #e0e0e0
+		padding: 6px
+		border-radius: 6px
 
-.text-transform
-	text-transform: capitalize
 
-.search-input
-	outline: none
-
-.search-icon
-	border: 2px solid #e0e0e0
-	padding: 6px
-	border-radius: 6px
-
-.employee-section
-	border: 1px solid rgba(33, 33, 33, 0.08)
+.menu-dropdown
+	border: 1px solid rgba(33, 33, 33, 0.08) !important
 	border-radius: 16px
 	height: 70px
 
-.employee-select
-	background: #6200EE
-	color: #fff
-	border-radius: 50%
-	padding: 13px
-	margin-left: 10px
-
-@media screen and (max-width: 772px)
-	.route-name, .search-icon
-		display: none
-
-@media screen and (max-width: 617px)
-	.responsive-position
-		justify-content: center !important
-	.pos-col
-		display: flex
-		flex-direction: column-reverse
-		justify-content: center
-		margin: auto
-
-		.employee-section, .create-btn, .search-input
-			margin-top: 20px
-
-	.header
-		padding: 75px 0
-
-.dropdown-hover
-	cursor: pointer !important
+	.employee-select-avatar
+		background: #6200EE
+		color: #fff
+		border-radius: 50%
+		padding: 13px
+		height: 42px
+		width: 42px
 
 	&:hover
-		background: #F2E7FE
-		font-weight: bolder
-</style>
\ No newline at end of file
+		background-color: rgba(0, 0, 0, var(--v-hover-opacity))
+		cursor: pointer
+
+@media (max-width: 991px)
+	.menu-icon
+		display: block !important
+
+	h1
+		display: none
+
+	.employee-name
+		display: none
+</style>
diff --git a/app/src/plugins/app/_theme/global.sass b/app/src/plugins/app/_theme/global.sass
index 4dd4d99..b56899d 100644
--- a/app/src/plugins/app/_theme/global.sass
+++ b/app/src/plugins/app/_theme/global.sass
@@ -21,4 +21,7 @@ th
 	padding: 35px !important
 
 .cursor-pointer:hover
-	cursor: pointer
\ No newline at end of file
+	cursor: pointer
+
+.hover-background:hover
+	background-color: rgba(0, 0, 0, var(--v-hover-opacity))