From d07d2263f2cddaaed689093f419ba8ea37684fa1 Mon Sep 17 00:00:00 2001
From: Aulia Adila <13519100@std.stei.itb.ac.id>
Date: Thu, 21 Apr 2022 07:59:35 +0700
Subject: [PATCH] fix dropdown
---
package-lock.json | 13 ++++-
package.json | 3 +-
src/components/dropdown.vue | 107 ++++++++++++++++++++++--------------
src/components/header.vue | 92 ++++++++++---------------------
4 files changed, 108 insertions(+), 107 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index 0607ceb..7889ae1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,7 +14,8 @@
"core-js": "^3.6.5",
"jquery": "^3.6.0",
"vue": "^3.0.0",
- "vue-router": "^4.0.12"
+ "vue-router": "^4.0.12",
+ "vue3-click-away": "^1.2.4"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
@@ -14041,6 +14042,11 @@
"integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
"dev": true
},
+ "node_modules/vue3-click-away": {
+ "version": "1.2.4",
+ "resolved": "https://registry.npmjs.org/vue3-click-away/-/vue3-click-away-1.2.4.tgz",
+ "integrity": "sha512-O9Z2KlvIhJT8OxaFy04eiZE9rc1Mk/bp+70dLok68ko3Kr8AW5dU+j8avSk4GDQu94FllSr4m5ul4BpzlKOw1A=="
+ },
"node_modules/watchpack": {
"version": "1.7.5",
"resolved": "https://registry.npmmirror.com/watchpack/-/watchpack-1.7.5.tgz",
@@ -26631,6 +26637,11 @@
"integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
"dev": true
},
+ "vue3-click-away": {
+ "version": "1.2.4",
+ "resolved": "https://registry.npmjs.org/vue3-click-away/-/vue3-click-away-1.2.4.tgz",
+ "integrity": "sha512-O9Z2KlvIhJT8OxaFy04eiZE9rc1Mk/bp+70dLok68ko3Kr8AW5dU+j8avSk4GDQu94FllSr4m5ul4BpzlKOw1A=="
+ },
"watchpack": {
"version": "1.7.5",
"resolved": "https://registry.npmmirror.com/watchpack/-/watchpack-1.7.5.tgz",
diff --git a/package.json b/package.json
index e0e5151..2e9cefc 100644
--- a/package.json
+++ b/package.json
@@ -14,7 +14,8 @@
"core-js": "^3.6.5",
"jquery": "^3.6.0",
"vue": "^3.0.0",
- "vue-router": "^4.0.12"
+ "vue-router": "^4.0.12",
+ "vue3-click-away": "^1.2.4"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
diff --git a/src/components/dropdown.vue b/src/components/dropdown.vue
index 786005d..6095073 100644
--- a/src/components/dropdown.vue
+++ b/src/components/dropdown.vue
@@ -1,50 +1,75 @@
-<script>
- export default {
- name: 'Dropdown',
- props: ['title', 'items'],
- data(){
- return {
- isOpen: false
- }
- }
- }
-
-</script>
-
<template>
- <div class="menu-item" @click="isOpen = !isOpen">
- <a href="#">{{ title }}</a>
- <transition name="fade" appear>
- <div class="sub-" v-if="isOpen">
- <div v-for="(item, i) in items" :key="i" class="menu-item">
- test sub menu
- <!-- <option value="Marketing">Marketing</option> -->
- </div>
- </div>
- </transition>
+ <div class="relative">
+ <div id="start-button">
+ <button
+ href="#"
+ class="ms-1"
+ style="border: none; background-color:transparent"
+ @click="toggleVisibility"
+ v-click-away="hideDropdown"
+ >
+ <slot name="start-button-item"> Start-button-content</slot>
+ </button>
+ </div>
+ <Transition name="fade">
+ <ul v-if="isVisible" class="item-parent">
+ <li class="item" style="margin-right:7.5em">
+ <slot name="item-1"></slot>
+ </li>
+ <li class="item">
+ <slot name="item-2"></slot>
+ </li>
+ </ul>
+ </Transition>
</div>
</template>
-<style>
-.menu-item .sub-menu {
- position: absolute;
- background-color: #222;
- top: calc(100% + 18px);
- left: 50%;
- transform: translateX(-50%);
- width: max-content;
- border-radius: 0px 0px 16px 16px;
-}
+<script>
+import { mixin as VueClickAway } from "vue3-click-away";
-.fade-enter-active,
-.fade-leave-active {
- transition: all .5s ease-out;
-}
-.fade-enter,
-.fade-leave-to {
- opacity: 0;
+export default{
+ mixins: [VueClickAway],
+ data(){
+ return{
+ isVisible: false
+ }
+ },
+ methods: {
+ toggleVisibility(){
+ this.isVisible = !this.isVisible
+ },
+ hideDropdown(){
+ this.isVisible = false
+ }
+ }
}
-</style>
+</script>
+<style scoped>
+ .fade-enter-active,
+ .fade-leave-active {
+ transition: all 0.1s ease-in-out;
+ }
+
+ .fade-enter-from,
+ .fade-leave-to {
+ opacity: 0;
+ transform: translateX(12px);
+ }
+ .item-parent {
+ position: absolute;
+ display: flex;
+ flex-direction: row-reverse;
+ flex-wrap: nowrap;
+ justify-content: space-between;
+ align-items: baseline;
+ top: 2.08rem;
+ }
+ .item {
+ position: absolute;
+ list-style:none;
+ width: 150px;
+ }
+</style>
\ No newline at end of file
diff --git a/src/components/header.vue b/src/components/header.vue
index 462760c..ec9e829 100644
--- a/src/components/header.vue
+++ b/src/components/header.vue
@@ -29,29 +29,29 @@
<div
class="d-flex flex-row-reverse justify-content-start align-items-center illustration"
>
- <!-- <div class="btn-group">
- <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
- Test
+ <h2 class="text-red" style="text-align: right">Hello, {{name}}</h2>
+
+ <Dropdown>
+ <template v-slot:start-button-item>
<i
- class="icon ion-ios-person-outline text-red"
- style="font-size: 65px"
- ></i>
- </button>
- <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
- <button class="dropdown-item" type="button">Action</button>
- <button class="dropdown-item" type="button">Another action</button>
- <button class="dropdown-item" type="button">Something else here</button>
- </div>
- </div> -->
- <Dropdown title="title"/>
- <button @click="showModal()" class="profile-btn">
- <i
- class="icon ion-ios-person-outline text-red"
- style="font-size: 65px"
+ class="icon ion-ios-person-outline text-red"
+ style="font-size: 65px"
></i>
- </button>
- <!-- <Name :name="this.name"/> -->
- <h2 class="text-red" style="text-align: right">Hello, {{name}}</h2>
+ </template>
+ <template v-slot:item-1>
+ <button class="btn-blue" @click="toProfile">
+ <svg fill="white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path class="heroicon-ui" d="M12 12a5 5 0 1 1 0-10 5 5 0 0 1 0 10zm0-2a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm9 11a1 1 0 0 1-2 0v-2a3 3 0 0 0-3-3H8a3 3 0 0 0-3 3v2a1 1 0 0 1-2 0v-2a5 5 0 0 1 5-5h8a5 5 0 0 1 5 5v2z"></path></svg>
+ <span class="ms-1" style="color: white; weight: lighter">Profil</span>
+ </button>
+ </template>
+ <template v-slot:item-2>
+ <button class="btn-red" @click="toLogout">
+ <svg fill="white" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"></path><path d="M10.09 15.59L11.5 17l5-5-5-5-1.41 1.41L12.67 11H3v2h9.67l-2.58 2.59zM19 3H5c-1.11 0-2 .9-2 2v4h2V5h14v14H5v-4H3v4c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"></path></svg>
+ <span class="ms-1" style="color: white; weight: lighter">Keluar</span>
+ </button>
+ </template>
+ </Dropdown>
+
</div>
</div>
</div>
@@ -59,30 +59,15 @@
<hr style="border: 1px solid red" />
</div>
- <Modal class="profile-modal"
- v-show="isModalVisible"
- @close="closeModal"
- >
- <template v-slot:header>Menu Pilihan</template>
- <template v-slot:body>
- <!-- warna biru, link ke halaman profil -->
- <button class="btn-blue mb-2 ms-2" @click="toProfile">Lihat Profil</button>
- <!-- warna merah -->
- <button class="btn-red ms-4" @click="toLogout">Keluar</button>
- </template>
-
- </Modal>
</template>
<script>
-import Modal from "../components/modal";
import Dropdown from "../components/dropdown";
import { HTTP } from '../http-common'
export default {
name: "Header",
components: {
- Modal,
Dropdown,
},
data() {
@@ -101,12 +86,6 @@ export default {
onclick() {
this.nav_active = !this.nav_active;
},
- showModal(){
- this.isModalVisible = true;
- },
- closeModal(){
- this.isModalVisible = false;
- },
toProfile(){
if (this.is_admin){
this.$router.push({ name: "profil-admin", params: { id: this.id }});
@@ -118,11 +97,7 @@ export default {
toLogout(e){
e.preventDefault();
console.log("logout")
- this.$router.push('login')
- // var a = localStorage.getItem("token");
- // console.log(a)
- // var b = localStorage.removeItem("token");
- // console.log(b)
+ this.$router.push({ path: '/login' })
localStorage.removeItem("token");
console.log('token removed')
},
@@ -165,24 +140,13 @@ export default {
.logo{
width: 100px;
}
-.profile-btn{
- text-decoration: none;
- border: none;
- background-color: transparent;
-}
-/* butuh buat akses class di dalem class modal */
-.profile-modal{
- width: 20em;
- height: 35em;
- transform: translate(100%, -80%);
-}
.btn-red {
- background: #f4476b;
- border-radius: 15px;
- color: white;
- border: none;
- padding: 4% 15% 4% 15%;
+background: #f4476b;
+border-radius: 15px;
+color: white;
+border: none;
+padding: 2% 13% 2% 10%;
}
.btn-blue {
@@ -190,7 +154,7 @@ export default {
border-radius: 15px;
color: white;
border: none;
- padding: 4% 15% 4% 15%;
+ padding: 2% 13% 2% 10%;
}
</style>
--
GitLab