Skip to content

Commit 10d0dda

Browse files
smastromsmastrom
committed
Demo - Add header links
1 parent 4a808b4 commit 10d0dda

File tree

3 files changed

+41
-45
lines changed

3 files changed

+41
-45
lines changed

‎playground/assets/global.css

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
:root {
22
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
33
line-height: 1.5;
4-
background-image: var(--Gradient);
4+
background: var(--AccentBrightColor);
55
-webkit-font-smoothing: antialiased;
66
-moz-osx-font-smoothing: grayscale;
77
text-rendering: optimizeLegibility;
@@ -11,7 +11,9 @@
1111
--AccentColor: #00976b;
1212
--TextColor: #494949;
1313
--WhiteColor: #fff;
14-
--Gradient: linear-gradient(to top, #00ff8d 0%, #00c68c 100%);
14+
--AccentBrightColor: #2fe292;
15+
--AccentLightColor: #d5ece2;
16+
--AccentDarkColor: #076046;
1517
}
1618

1719
:root {

‎playground/components/Header.vue

Lines changed: 31 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@ import { useFixedHeader } from 'vue-use-fixed-header'
55
const headerRef = ref<HTMLElement | null>(null)
66
77
const { styles } = useFixedHeader(headerRef)
8+
9+
const linkProps = { target: '_blank', class: 'Nav_List_Link' }
810
</script>
911

1012
<template>
@@ -14,48 +16,42 @@ const { styles } = useFixedHeader(headerRef)
1416
<h2 class="Global_Logo">Vufh</h2>
1517
<ul class="Nav_List">
1618
<li class="Nav_List_Dropdown_Trigger Nav_List_Hidden">
17-
<a target="_blank" href="https://github.com/smastrom/vue-use-fixed-header">
19+
<a v-bind="linkProps" href="https://github.com/smastrom/vue-use-fixed-header">
1820
Dropdown
1921
</a>
2022

2123
<ul class="Nav_List_Dropdown">
22-
<li>
23-
<a target="_blank" href="#">Dropdown Item 1</a>
24-
</li>
25-
<li>
26-
<a target="_blank" href="#">Dropdown Item 2</a>
27-
</li>
28-
<li>
29-
<a target="_blank" href="#">Dropdown Item 3</a>
30-
</li>
24+
<li><a v-bind="linkProps" href="#">Dropdown Item 1</a></li>
25+
<li><a v-bind="linkProps" href="#">Dropdown Item 2</a></li>
26+
<li><a v-bind="linkProps" href="#">Dropdown Item 3</a></li>
3127
</ul>
3228
</li>
3329

3430
<li>
35-
<a target="_blank" href="https://github.com/smastrom/vue-use-fixed-header">
31+
<a v-bind="linkProps" href="https://github.com/smastrom/vue-use-fixed-header">
3632
GitHub
3733
</a>
3834
</li>
3935
<li class="Nav_List_Hidden">
40-
<a target="_blank" href="https://www.npmjs.com/package/vue-use-fixed-header"
41-
>NPM</a
42-
>
36+
<a v-bind="linkProps" href="https://www.npmjs.com/package/vue-use-fixed-header">
37+
NPM
38+
</a>
4339
</li>
4440
<li class="Nav_List_Hidden">
4541
<a
46-
target="_blank"
42+
v-bind="linkProps"
4743
href="https://stackblitz.com/@smastrom/collections/vue-use-fixed-header"
4844
>
4945
Examples
5046
</a>
5147
</li>
5248
<li>
5349
<a
54-
target="_blank"
5550
class="Nav_List_Button"
56-
href="https://github.com/smastrom/vue-use-fixed-header/blob/main/demo/Header.vue"
51+
target="_blank"
52+
href="https://github.com/smastrom/vue-use-fixed-header/blob/main/playground/components/Header.vue"
5753
>
58-
View Code
54+
See Code
5955
</a>
6056
</li>
6157
</ul>
@@ -80,9 +76,8 @@ const { styles } = useFixedHeader(headerRef)
8076
border-radius: 1rem;
8177
width: 1280px;
8278
max-width: 100%;
83-
height: 80px;
8479
margin: 1rem;
85-
padding: 1rem;
80+
padding: 0.875rem;
8681
display: flex;
8782
align-items: center;
8883
justify-content: space-between;
@@ -103,7 +98,7 @@ const { styles } = useFixedHeader(headerRef)
10398
align-items: center;
10499
}
105100
106-
.Nav_List a {
101+
.Nav_List_Link {
107102
color: var(--TextColor);
108103
text-decoration: none;
109104
transition: color 200ms ease-in-out;
@@ -113,17 +108,12 @@ const { styles } = useFixedHeader(headerRef)
113108
position: relative;
114109
}
115110
116-
.Nav_List_Dropdown_Trigger:hover .Nav_List_Dropdown {
117-
display: flex;
118-
}
119-
120111
.Nav_List_Dropdown {
121112
position: absolute;
122-
top: 45px;
123-
left: 0;
113+
top: 40px;
114+
left: -1rem;
124115
width: 200px;
125116
background-color: var(--WhiteColor);
126-
box-shadow: var(--Shadow);
127117
border-radius: 0.5rem;
128118
padding: 1rem;
129119
display: none;
@@ -134,24 +124,29 @@ const { styles } = useFixedHeader(headerRef)
134124
135125
.Nav_List_Button {
136126
background-color: var(--AccentColor);
137-
color: var(--WhiteColor) !important;
138-
padding: 0.75rem 1rem;
127+
color: var(--WhiteColor);
128+
padding: 0.5rem 1rem;
139129
border-radius: 0.5rem;
140-
transition: opacity 200ms ease-in-out !important;
130+
transition: all 200ms ease-in-out;
131+
text-decoration: none;
141132
}
142133
143134
@media (hover: hover) {
135+
.Nav_List_Dropdown_Trigger:hover .Nav_List_Dropdown {
136+
display: flex;
137+
}
138+
144139
.Nav_List_Dropdown_Trigger:hover > a {
145140
color: var(--AccentColor);
146141
}
147142
148-
.Nav_List a:hover {
143+
.Nav_List_Link:hover,
144+
.Nav_List_Dropdown a:hover {
149145
color: var(--AccentColor);
150-
text-decoration: none;
151146
}
152147
153148
.Nav_List_Button:hover {
154-
opacity: 0.5;
149+
opacity: 0.75;
155150
}
156151
}
157152
@@ -162,8 +157,8 @@ const { styles } = useFixedHeader(headerRef)
162157
.Nav_List {
163158
gap: 2rem;
164159
}
165-
.Nav_List_Hidden {
166-
display: none !important;
160+
.Nav_List .Nav_List_Hidden {
161+
display: none;
167162
}
168163
}
169164
</style>

‎playground/components/WithContainer.vue

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -22,9 +22,9 @@ const { styles } = useFixedHeader(headerRef, {
2222
<a
2323
target="_blank"
2424
class="Header_Button"
25-
href="https://github.com/smastrom/vue-use-fixed-header/blob/main/demo/WithContainer.vue"
25+
href="https://github.com/smastrom/vue-use-fixed-header/blob/main/playground/components/WithContainer.vue"
2626
>
27-
View Code
27+
See Code
2828
</a>
2929
</div>
3030
</header>
@@ -55,7 +55,7 @@ const { styles } = useFixedHeader(headerRef, {
5555
}
5656
5757
.Header_Wrapper {
58-
padding: 1rem;
58+
padding: 0.875rem;
5959
position: sticky;
6060
top: 0;
6161
}
@@ -65,7 +65,7 @@ const { styles } = useFixedHeader(headerRef, {
6565
background-color: var(--AccentColor);
6666
display: flex;
6767
align-items: center;
68-
padding: 1rem;
68+
padding: 0.875rem;
6969
border-radius: 1rem;
7070
}
7171
@@ -74,7 +74,7 @@ const { styles } = useFixedHeader(headerRef, {
7474
}
7575
7676
.Header_Button {
77-
color: var(--AccentColor);
77+
color: var(--AccentDarkColor);
7878
background-color: var(--WhiteColor);
7979
border-radius: 0.5rem;
8080
line-height: 1;
@@ -87,8 +87,7 @@ const { styles } = useFixedHeader(headerRef, {
8787
8888
@media (hover: hover) {
8989
.Header_Button:hover {
90-
color: var(--WhiteColor);
91-
background-color: var(--AccentColor);
90+
background-color: var(--AccentLightColor);
9291
}
9392
}
9493

0 commit comments

Comments
 (0)