Skip to content

Commit e5c188e

Browse files
johndatserakisjohndatserakis
committed
Update demo build
1 parent c81037b commit e5c188e

19 files changed

+1184
-6242
lines changed

‎CHANGELOG.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# CHANGELOG.md
22

3-
## 5.0.1 (2022-03-20)
3+
## 5.0.2 (2022-03-20)
44

55
- Upgrade to Vue 3 support at `v5.0.0` and beyond. Vue 2 support is available at `v4.1.0`.
66

‎README.md

Lines changed: 106 additions & 104 deletions
Original file line numberDiff line numberDiff line change
@@ -75,109 +75,111 @@ The component will work well with frontend component frameworks. I'm using Boots
7575
</template>
7676

7777
<script>
78-
export default {
79-
...
80-
data() {
81-
return {
82-
navbarOptions: {
83-
elementId: "main-navbar",
84-
isUsingVueRouter: true,
85-
mobileBreakpoint: 992,
86-
brandImagePath: "./",
87-
brandImage: require("../src/assets/images/lockup-color.png"),
88-
brandImageAltText: "brand-image",
89-
collapseButtonOpenColor: "#661c23",
90-
collapseButtonCloseColor: "#661c23",
91-
showBrandImageInMobilePopup: true,
92-
ariaLabelMainNav: "Main Navigation",
93-
tooltipAnimationType: "shift-away",
94-
tooltipPlacement: "bottom",
95-
menuOptionsLeft: [
96-
{
97-
type: "link",
98-
text: "Why Dunder Mifflin",
99-
arrowColor: "#659CC8",
100-
subMenuOptions: [
101-
{
102-
isLinkAction: true,
103-
type: "link",
104-
text: "About",
105-
subText: "Stupid corporate wet blankets. Like booze ever killed anyone.",
106-
path: { name: "about" },
107-
iconLeft: '<i class="fa fa-star fa-fw"></i>'
108-
},
109-
{
110-
type: "hr",
111-
},
112-
{
113-
type: "link",
114-
text: "Locations",
115-
subText: "You\'re a presentation tool!",
116-
path: { name: "locations" }
117-
arrowColor: "#659CC8",
118-
},
119-
{
120-
type: "hr",
121-
},
122-
{
123-
type: "link",
124-
text: "Blog",
125-
subText: "I enjoy having breakfast in bed. I like waking up to the smell of bacon. Sue me.",
126-
path: { name: "blog" }
127-
},
128-
]
129-
},
130-
{
131-
type: "link",
132-
text: "Contact",
133-
subMenuOptions: [
134-
{
135-
type: "link",
136-
text: "Customer Service",
137-
path: { name: "customer-service" },
138-
},
139-
{
140-
type: "link",
141-
text: "Accounting",
142-
path: { name: "accounting" },
143-
},
144-
{
145-
type: "hr",
146-
},
147-
{
148-
type: "link",
149-
text: "Reception",
150-
path: { name: "reception"},
151-
iconLeft: '<svg id="i-telephone" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"> <path d="M3 12 C3 5 10 5 16 5 22 5 29 5 29 12 29 20 22 11 22 11 L10 11 C10 11 3 20 3 12 Z M11 14 C11 14 6 19 6 28 L26 28 C26 19 21 14 21 14 L11 14 Z" /> <circle cx="16" cy="21" r="4" /> </svg>',
152-
},
153-
]
154-
},
155-
{
156-
type: "link",
157-
text: "Pricing",
158-
path: { name: "pricing"},
159-
iconRight: '<i class="fa fa-long-arrow-right fa-fw"></i>',
160-
},
161-
],
162-
menuOptionsRight: [
163-
{
164-
type: "button",
165-
text: "Signup",
166-
path: { name: "signup" },
167-
class: "button-red"
168-
},
169-
{
170-
type: "button",
171-
text: "Login",
172-
path: { name: "login" },
173-
iconRight: '<svg id="i-arrow-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"> <path d="M22 6 L30 16 22 26 M30 16 L2 16" /> </svg>'
174-
}
175-
]
176-
}
78+
import brandImage from '../src/assets/images/lockup-color.png'
79+
80+
export default {
81+
...
82+
data() {
83+
return {
84+
navbarOptions: {
85+
elementId: "main-navbar",
86+
isUsingVueRouter: true,
87+
mobileBreakpoint: 992,
88+
brandImagePath: "./",
89+
brandImage,
90+
brandImageAltText: "brand-image",
91+
collapseButtonOpenColor: "#661c23",
92+
collapseButtonCloseColor: "#661c23",
93+
showBrandImageInMobilePopup: true,
94+
ariaLabelMainNav: "Main Navigation",
95+
tooltipAnimationType: "shift-away",
96+
tooltipPlacement: "bottom",
97+
menuOptionsLeft: [
98+
{
99+
type: "link",
100+
text: "Why Dunder Mifflin",
101+
arrowColor: "#659CC8",
102+
subMenuOptions: [
103+
{
104+
isLinkAction: true,
105+
type: "link",
106+
text: "About",
107+
subText: "Stupid corporate wet blankets. Like booze ever killed anyone.",
108+
path: { name: "about" },
109+
iconLeft: '<i class="fa fa-star fa-fw"></i>'
110+
},
111+
{
112+
type: "hr",
113+
},
114+
{
115+
type: "link",
116+
text: "Locations",
117+
subText: "You\'re a presentation tool!",
118+
path: { name: "locations" }
119+
arrowColor: "#659CC8",
120+
},
121+
{
122+
type: "hr",
123+
},
124+
{
125+
type: "link",
126+
text: "Blog",
127+
subText: "I enjoy having breakfast in bed. I like waking up to the smell of bacon. Sue me.",
128+
path: { name: "blog" }
129+
},
130+
]
131+
},
132+
{
133+
type: "link",
134+
text: "Contact",
135+
subMenuOptions: [
136+
{
137+
type: "link",
138+
text: "Customer Service",
139+
path: { name: "customer-service" },
140+
},
141+
{
142+
type: "link",
143+
text: "Accounting",
144+
path: { name: "accounting" },
145+
},
146+
{
147+
type: "hr",
148+
},
149+
{
150+
type: "link",
151+
text: "Reception",
152+
path: { name: "reception"},
153+
iconLeft: '<svg id="i-telephone" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"> <path d="M3 12 C3 5 10 5 16 5 22 5 29 5 29 12 29 20 22 11 22 11 L10 11 C10 11 3 20 3 12 Z M11 14 C11 14 6 19 6 28 L26 28 C26 19 21 14 21 14 L11 14 Z" /> <circle cx="16" cy="21" r="4" /> </svg>',
154+
},
155+
]
156+
},
157+
{
158+
type: "link",
159+
text: "Pricing",
160+
path: { name: "pricing"},
161+
iconRight: '<i class="fa fa-long-arrow-right fa-fw"></i>',
162+
},
163+
],
164+
menuOptionsRight: [
165+
{
166+
type: "button",
167+
text: "Signup",
168+
path: { name: "signup" },
169+
class: "button-red"
170+
},
171+
{
172+
type: "button",
173+
text: "Login",
174+
path: { name: "login" },
175+
iconRight: '<svg id="i-arrow-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"> <path d="M22 6 L30 16 22 26 M30 16 L2 16" /> </svg>'
176+
}
177+
]
177178
}
178179
}
179-
...
180-
}
180+
}
181+
...
182+
}
181183
</script>
182184

183185
<style lang="scss">
@@ -239,10 +241,10 @@ Sometimes you may want your links to perform an action instead of following a li
239241
| isUsingVueRouter | Boolean | no | false | | If you want to use vue-router, set this to true and all links will automatically be `<router-link></router-link>` |
240242
| mobileBreakpoint | Number | no | 992 | | Width at which the navbar turns into the mobile version |
241243
| brandImagePath | String or Object | no | '/' | | Link path of menu-option. If you have `isUsingVueRouter === true`, then this needs to be an `Object` with a `name` property or just a `String` of your path. Otherwise, just provide a `String`. link |
242-
| brandImage | Image | no | | | `require()` your image here to use your brand image |
244+
| brandImage | Image | no | | | `import` your image here to use your brand image |
243245
| brandImageAltText | String | no | 'brand-image' | | The `alt` tag text for your brand image |
244-
| collapseButtonImageOpen | Image | no | A hamburger icon | | `require()` your image here |
245-
| collapseButtonImageClose | Image | no | A times icon | | `require()` your image here |
246+
| collapseButtonImageOpen | Image | no | A hamburger icon | | `import` your image here |
247+
| collapseButtonImageClose | Image | no | A times icon | | `import` your image here |
246248
| collapseButtonOpenColor | String | no | `#373737` | | CSS hex - `#FFF`. Only applicable if you don't supply a `collapseButtonImageOpen`. |
247249
| collapseButtonCloseColor | String | no | `#373737` | | CSS hex - `#FFF`. Only applicable if you don't supply a `collapseButtonImageClose`. |
248250
| showBrandImageInMobilePopup | Boolean | no | false | | If you want to show your brand logo in the mobile popup |

‎dist/vue-navigation-bar.css

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -342,27 +342,6 @@
342342
width: 30px;
343343
}
344344

345-
.tippy-box[data-animation=scale][data-placement^=top] {
346-
transform-origin: bottom;
347-
}
348-
349-
.tippy-box[data-animation=scale][data-placement^=bottom] {
350-
transform-origin: top;
351-
}
352-
353-
.tippy-box[data-animation=scale][data-placement^=left] {
354-
transform-origin: right;
355-
}
356-
357-
.tippy-box[data-animation=scale][data-placement^=right] {
358-
transform-origin: left;
359-
}
360-
361-
.tippy-box[data-animation=scale][data-state=hidden] {
362-
transform: scale(0.5);
363-
opacity: 0;
364-
}
365-
366345
.tippy-box[data-animation=perspective][data-placement^=top] {
367346
transform-origin: bottom;
368347
}
@@ -415,6 +394,27 @@
415394
opacity: 0;
416395
}
417396

397+
.tippy-box[data-animation=scale][data-placement^=top] {
398+
transform-origin: bottom;
399+
}
400+
401+
.tippy-box[data-animation=scale][data-placement^=bottom] {
402+
transform-origin: top;
403+
}
404+
405+
.tippy-box[data-animation=scale][data-placement^=left] {
406+
transform-origin: right;
407+
}
408+
409+
.tippy-box[data-animation=scale][data-placement^=right] {
410+
transform-origin: left;
411+
}
412+
413+
.tippy-box[data-animation=scale][data-state=hidden] {
414+
transform: scale(0.5);
415+
opacity: 0;
416+
}
417+
418418
.tippy-box[data-animation=shift-away][data-state=hidden] {
419419
opacity: 0;
420420
}

‎docs/1.17412f9539ec0c43e566.css

Lines changed: 0 additions & 5 deletions
This file was deleted.

0 commit comments

Comments
 (0)