Skip to content
This repository was archived by the owner on May 13, 2024. It is now read-only.

Commit cd22d5f

Browse files
ulivzulivz
committed
2 parents 5286d01 + 8adc450 commit cd22d5f

File tree

3 files changed

+148
-42
lines changed

3 files changed

+148
-42
lines changed

‎components/Header.vue

Lines changed: 47 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,39 @@
11
<template>
2-
<header id="header">
3-
<div class="header-wrapper">
4-
<div class="title">
5-
<NavLink
6-
:link="$site.base"
7-
class="home-link"
8-
>{{ $site.title }}
9-
</NavLink>
2+
<section id="header-wrapper">
3+
<header id="header">
4+
<div class="header-wrapper">
5+
<div class="title">
6+
<NavLink
7+
:link="$site.base"
8+
class="home-link"
9+
>{{ $site.title }}
10+
</NavLink>
11+
</div>
12+
<div class="header-right-wrap">
13+
<ul class="nav" v-if="$themeConfig.nav">
14+
<li class="nav-item" v-for="item in $themeConfig.nav">
15+
<NavLink :link="item.link">{{ item.text }}</NavLink>
16+
</li>
17+
</ul>
18+
<SearchBox/>
19+
</div>
1020
</div>
11-
<div class="header-right-wrap">
12-
<ul class="nav" v-if="$themeConfig.nav">
13-
<li class="nav-item" v-for="item in $themeConfig.nav">
14-
<NavLink :link="item.link">{{ item.text }}</NavLink>
15-
</li>
16-
</ul>
17-
<SearchBox/>
18-
</div>
19-
</div>
20-
</header>
21+
</header>
22+
<MobileHeader />
23+
</section>
2124
</template>
2225

2326
<script>
27+
import MobileHeader from './MobileHeader.vue'
2428
import SearchBox from '@SearchBox'
25-
29+
2630
export default {
27-
components: { SearchBox },
31+
components: { MobileHeader, SearchBox },
2832
}
2933
</script>
3034

3135
<style lang="stylus">
3236
@import '~@app/style/config'
33-
3437
#header
3538
z-index 12
3639
position fixed
@@ -43,22 +46,22 @@
4346
margin auto
4447
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.03), 0 6px 6px rgba(0, 0, 0, 0.05)
4548
transition: all 1s cubic-bezier(.25, .8, .25, 1)
46-
49+
4750
ol, ul
4851
list-style none
4952
margin 0
5053
padding 0
51-
54+
5255
&:hover
5356
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08), 0 6px 6px rgba(0, 0, 0, 0.1);
54-
57+
5558
// border-bottom 5px solid lighten(#3eaf7c, 50%)
56-
59+
5760
.header-wrapper
5861
display flex
5962
line-height 40px
6063
height 40px
61-
64+
6265
.title
6366
/*flex 0 0 200px*/
6467
// color #3eaf7c
@@ -75,59 +78,63 @@
7578
font-weight bold
7679
font-family PT Serif, Serif
7780
text-decoration none
78-
81+
7982
.header-right-wrap
8083
flex 1
8184
display flex
8285
justify-content flex-end
83-
86+
8487
.nav
8588
flex 0 0 auto
8689
display flex
8790
margin 0
8891
align-items end
89-
90-
92+
93+
9194
.nav-item
9295
flex 1
9396
margin-left 20px
94-
97+
9598
a
9699
font-family PT Serif, Serif
97100
font-size 20px
98101
// color lighten(#3eaf7c, 30%)
99102
text-decoration none
100103
transition color .3s
101-
104+
102105
.search-box
103106
font-family PT Serif, Serif
104107
margin-left 20px
105-
108+
106109
input
107110
border-radius 5px
108111
transition all .5s
109112
border: 1px solid #cecece
110-
113+
111114
&:hover
112-
border: 1px solid $accentColor
115+
border 1px solid $accentColor
113116
box-shadow 0 0 5px $accentColor
114-
117+
115118
.suggestions
116119
border 1px solid #000
117120
top: 40px
118121
right 0
119-
122+
120123
a
121124
color #000
122125
text-decoration none
123-
126+
124127
&.focused
125128
color $accentColor
126-
129+
127130
@media (max-width: $MQMobile)
131+
132+
#header
133+
display none
134+
128135
.header-wrapper
129136
flex-direction column
130-
137+
131138
.header-right-wrap
132139
display none
133140
</style>

‎components/MobileHeader.vue

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
<template>
2+
<div id="mobile-header">
3+
<div class="mobile-header-bar">
4+
<div class="mobile-header-title">
5+
<NavLink
6+
:link="$site.base"
7+
class="mobile-home-link"
8+
>{{ $site.title }}
9+
</NavLink>
10+
<XIcon v-if="isOpen" @click="isOpen = !isOpen" />
11+
<MenuIcon v-else @click="isOpen = !isOpen" />
12+
</div>
13+
<div class="mobile-menu-wrapper" v-bind:class="{ open: isOpen }">
14+
<hr class="menu-divider"/>
15+
<ul class="mobile-nav" v-if="$themeConfig.nav">
16+
<li class="mobile-nav-item" v-for="item in $themeConfig.nav">
17+
<NavLink :link="item.link">{{ item.text }}</NavLink>
18+
</li>
19+
</ul>
20+
</div>
21+
</div>
22+
</div>
23+
</template>
24+
25+
<script>
26+
import {
27+
MenuIcon,
28+
XIcon
29+
} from 'vue-feather-icons'
30+
31+
export default {
32+
33+
components: {
34+
MenuIcon,
35+
XIcon
36+
},
37+
38+
data() {
39+
return {
40+
isOpen: false
41+
}
42+
}
43+
}
44+
</script>
45+
46+
<style lang="stylus">
47+
48+
.mobile-header-bar
49+
z-index 12
50+
position fixed
51+
top 0
52+
width 100vw
53+
box-sizing border-box
54+
background-color #fff
55+
margin auto
56+
box-shadow 0 5px 20px rgba(0,0,0,0.03), 0 6px 6px rgba(0,0,0,0.05)
57+
transition all 1s cubic-bezier(0.25, 0.8, 0.25, 1)
58+
59+
#mobile-header
60+
61+
.mobile-header-title
62+
display flex
63+
align-items center
64+
justify-content space-between
65+
padding 1.2em
66+
67+
.mobile-home-link
68+
text-decoration none
69+
text-transform uppercase
70+
font-family PT Serif, Serif
71+
color #222
72+
font-weight bold
73+
74+
75+
.mobile-nav-item
76+
list-style none
77+
78+
a
79+
text-decoration none
80+
81+
.menu-divider
82+
margin 0
83+
84+
.mobile-menu-wrapper
85+
max-height 0
86+
overflow hidden
87+
transition 0.3s ease
88+
background-color #fff
89+
90+
.mobile-menu-wrapper.open
91+
max-height 450px
92+
transition 0.3s ease
93+
94+
@media (min-width: $MQMobile)
95+
#mobile-header
96+
display none
97+
</style>

‎layouts/GlobalLayout.vue

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,15 @@
1111
<script>
1212
import GlobalLayout from '@app/components/GlobalLayout.vue'
1313
import Header from '@theme/components/Header.vue'
14+
import MobileHeader from '@theme/components/MobileHeader.vue'
1415
import Footer from '@theme/components/Footer.vue'
15-
16+
1617
export default {
1718
components: {
1819
DefaultGlobalLayout: GlobalLayout,
1920
Header,
20-
Footer,
21+
MobileHeader,
22+
Footer
2123
},
2224
}
2325
</script>

0 commit comments

Comments
 (0)