Skip to content

Commit 8c527cf

Browse files
mimosafamimosafa
committed
clean
split hamburger toggle component from global header component
1 parent 2e5050c commit 8c527cf

File tree

4 files changed

+142
-111
lines changed

4 files changed

+142
-111
lines changed

‎src/components/global/header/header.js

+33-37
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,58 @@
11
import media from '../../../js/media';
2+
import WTokyodoA from '../w-tokyodo-anchor.vue';
3+
import HamburgerToggle from '../../ui/nav/hamburger-toggle.vue';
24

3-
const cls = 'active';
45
const speed = 350;
56

6-
let toggle, brands, menus, others;
7-
8-
const initCollapse = () => {
9-
if (!toggle || !brands || !menus || !others) {
10-
const header = document.getElementById('header');
11-
toggle = header.querySelector('.header_gnav_btn a');
12-
brands = header.querySelector('.header_gnav_brand');
13-
menus = header.querySelector('.header_gnav_menu');
14-
others = header.querySelector('.header_gnav_other');
15-
}
16-
17-
media.init();
18-
19-
toggle.classList.remove(cls);
20-
brands.style.display = 'none';
21-
menus.style.display = 'none';
22-
23-
if (media.isPhone()) {
24-
others.style.display = 'none';
25-
}
26-
else if (media.isDesktop()) {
27-
others.style.display = '';
28-
}
29-
};
30-
31-
import WTokyodoA from '../w-tokyodo-anchor.vue';
32-
337
export default {
348
components: {
35-
WTokyodoA
9+
WTokyodoA,
10+
HamburgerToggle
11+
},
12+
data() {
13+
return {
14+
brands: null,
15+
menus: null,
16+
others: null
17+
}
3618
},
3719
mounted() {
38-
this.initialize();
20+
this.brands = this.$el.querySelector('.header_gnav_brand');
21+
this.menus = this.$el.querySelector('.header_gnav_menu');
22+
this.others = this.$el.querySelector('.header_gnav_other');
23+
24+
this.init();
3925

4026
let resizeTimer = 0;
4127
window.addEventListener('resize', () => {
4228
if (resizeTimer) {
4329
clearTimeout(resizeTimer);
4430
}
45-
resizeTimer = setTimeout(this.initialize, 200);
31+
resizeTimer = setTimeout(this.init, 200);
4632
});
4733
},
4834
methods: {
49-
initialize() {
50-
initCollapse();
35+
init() {
36+
media.init();
37+
this.$refs.toggle.init();
38+
this.brands.style.display = 'none';
39+
this.menus.style.display = 'none';
40+
41+
if (media.isPhone()) {
42+
this.others.style.display = 'none';
43+
}
44+
else if (media.isDesktop()) {
45+
this.others.style.display = '';
46+
}
5147
this.$emit('init-header');
5248
},
5349
toggleCollapse() {
54-
toggle.classList.toggle(cls);
55-
$(brands).slideToggle(speed);
56-
$(menus).slideToggle(speed);
50+
this.$refs.toggle.toggle();
51+
$(this.brands).slideToggle(speed);
52+
$(this.menus).slideToggle(speed);
5753

5854
if (media.isPhone()) {
59-
$(others).slideToggle(speed);
55+
$(this.others).slideToggle(speed);
6056
}
6157

6258
this.$emit('toggle-header-collapse', speed);

‎src/components/global/header/header.scss

+3-71
Original file line numberDiff line numberDiff line change
@@ -462,10 +462,9 @@
462462
@include phone {
463463
width: 50px;
464464
height: 48px;
465-
}
466-
@include desktop {
467-
width: 35px;
468-
height: 25px;
465+
display: inline-flex;
466+
justify-content: center;
467+
align-items: center;
469468
}
470469

471470
.header_gnav_btn_ttl {
@@ -485,73 +484,6 @@
485484
letter-spacing: .04em;
486485
}
487486
}
488-
489-
.header_gnav_btn_bar {
490-
background-color: $black;
491-
display: inline-block;
492-
position: absolute;
493-
transition: .15s ease-in-out;
494-
495-
@include phone {
496-
width: 20px;
497-
height: 2px;
498-
right: 15px;
499-
}
500-
@include desktop {
501-
width: 35px;
502-
height: 3px;
503-
right: 0;
504-
}
505-
}
506-
507-
#header_gnav_btn_bar01 {
508-
@include phone {
509-
top: 16px;
510-
}
511-
@include desktop {
512-
top: 0;
513-
}
514-
}
515-
#header_gnav_btn_bar02 {
516-
@include phone {
517-
top: 23px;
518-
}
519-
@include desktop {
520-
top: 11px;
521-
}
522-
}
523-
#header_gnav_btn_bar03 {
524-
@include phone {
525-
top: 30px;
526-
}
527-
@include desktop {
528-
top: 22px;
529-
}
530-
}
531-
532-
&.active {
533-
#header_gnav_btn_bar01 {
534-
transform: rotate(45deg);
535-
@include phone {
536-
top: 23px;
537-
}
538-
@include desktop {
539-
top: 13px;
540-
}
541-
}
542-
#header_gnav_btn_bar02 {
543-
width: 0;
544-
}
545-
#header_gnav_btn_bar03 {
546-
transform: rotate(-45deg);
547-
@include phone {
548-
top: 23px;
549-
}
550-
@include desktop {
551-
top: 13px;
552-
}
553-
}
554-
}
555487
}
556488
}
557489
}

‎src/components/global/header/header.vue

+1-3
Original file line numberDiff line numberDiff line change
@@ -23,9 +23,7 @@
2323
<div class="header_gnav_btn">
2424
<a @click="toggleCollapse">
2525
<span class="header_gnav_btn_ttl">Menu</span>
26-
<span id="header_gnav_btn_bar01" class="header_gnav_btn_bar"></span>
27-
<span id="header_gnav_btn_bar02" class="header_gnav_btn_bar"></span>
28-
<span id="header_gnav_btn_bar03" class="header_gnav_btn_bar"></span>
26+
<hamburger-toggle ref="toggle" />
2927
</a>
3028
</div>
3129
</div>

‎src/components/ui/nav/hamburger-toggle.vue

+105
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
<template>
2+
<div class="hamburger_toggle">
3+
<span></span>
4+
<span></span>
5+
<span></span>
6+
</div>
7+
</template>
8+
9+
<script>
10+
export default {
11+
methods: {
12+
init() {
13+
this.$el.classList.remove('active');
14+
},
15+
toggle() {
16+
this.$el.classList.toggle('active');
17+
this.$emit('toggle');
18+
}
19+
}
20+
}
21+
</script>
22+
23+
<style lang="scss" scoped>
24+
.hamburger_toggle {
25+
display: inline-block;
26+
position: relative;
27+
cursor: pointer;
28+
29+
@include phone {
30+
width: 20px;
31+
height: 16px;
32+
}
33+
@include desktop {
34+
width: 35px;
35+
height: 25px;
36+
}
37+
38+
span {
39+
background-color: $black;
40+
display: inline-block;
41+
position: absolute;
42+
transition: .15s ease-in-out;
43+
right: 0;
44+
45+
@include phone {
46+
width: 20px;
47+
height: 2px;
48+
}
49+
@include desktop {
50+
width: 35px;
51+
height: 3px;
52+
}
53+
54+
&:nth-child(1) {
55+
top: 0;
56+
}
57+
58+
&:nth-child(2) {
59+
@include phone {
60+
top: 7px;
61+
}
62+
@include desktop {
63+
top: 11px;
64+
}
65+
}
66+
67+
&:nth-child(3) {
68+
@include phone {
69+
top: 14px;
70+
}
71+
@include desktop {
72+
top: 22px;
73+
}
74+
}
75+
}
76+
77+
&.active {
78+
span {
79+
&:nth-child(1) {
80+
transform: rotate(45deg);
81+
@include phone {
82+
top: 8px;
83+
}
84+
@include desktop {
85+
top: 13px;
86+
}
87+
}
88+
89+
&:nth-child(2) {
90+
width: 0;
91+
}
92+
93+
&:nth-child(3) {
94+
transform: rotate(-45deg);
95+
@include phone {
96+
top: 8px;
97+
}
98+
@include desktop {
99+
top: 13px;
100+
}
101+
}
102+
}
103+
}
104+
}
105+
</style>

0 commit comments

Comments
 (0)