Skip to content

Commit 73cbdfe

Browse files
janoshrubosjanoshrubos
authored
feat: responsive native navigation (#32)
1 parent 520e51c commit 73cbdfe

File tree

2 files changed

+160
-43
lines changed

2 files changed

+160
-43
lines changed

‎.vitepress/theme/nativescript-theme/index.js

Lines changed: 150 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,13 @@ import {
2828
nextTick,
2929
renderSlot,
3030
} from 'vue'
31-
import { useRoute, useSiteDataByRoute, useSiteData, inBrowser } from 'vitepress'
31+
import {
32+
useRoute,
33+
useSiteDataByRoute,
34+
useSiteData,
35+
useRouter,
36+
inBrowser,
37+
} from 'vitepress'
3238

3339
/*! @docsearch/js 1.0.0-alpha.28 (UNRELEASED 0a58769) | MIT License | © Algolia, Inc. and contributors | https://github.com/francoischalifour/autocomplete.js */
3440
function e(e, t, n) {
@@ -6212,11 +6218,11 @@ function docsearch(e) {
62126218
)
62136219
}
62146220

6215-
var _hoisted_1$b = {
6221+
var _hoisted_1$c = {
62166222
class: 'algolia-search-box',
62176223
id: 'docsearch',
62186224
}
6219-
var script$b = defineComponent({
6225+
var script$c = defineComponent({
62206226
expose: [],
62216227
props: {
62226228
options: {
@@ -6287,18 +6293,18 @@ var script$b = defineComponent({
62876293
}
62886294

62896295
return function (_ctx, _cache) {
6290-
return openBlock(), createBlock('div', _hoisted_1$b)
6296+
return openBlock(), createBlock('div', _hoisted_1$c)
62916297
}
62926298
},
62936299
})
62946300

6295-
var script$a = defineComponent({
6301+
var script$b = defineComponent({
62966302
props: {
62976303
variant: String,
62986304
},
62996305
})
63006306

6301-
var _hoisted_1$a = {
6307+
var _hoisted_1$b = {
63026308
key: 0,
63036309
viewBox: '0 0 532 100',
63046310
xmlns: 'http://www.w3.org/2000/svg',
@@ -6308,7 +6314,7 @@ var _hoisted_1$a = {
63086314
'stroke-miterlimit': '2',
63096315
}
63106316

6311-
var _hoisted_2$9 = /*#__PURE__*/ createVNode(
6317+
var _hoisted_2$a = /*#__PURE__*/ createVNode(
63126318
'g',
63136319
{
63146320
transform: 'translate(-362.21733 -1030)',
@@ -6476,15 +6482,15 @@ var _hoisted_4$7 = /*#__PURE__*/ createVNode(
64766482
-1
64776483
)
64786484

6479-
function render$a(_ctx, _cache, $props, $setup, $data, $options) {
6485+
function render$b(_ctx, _cache, $props, $setup, $data, $options) {
64806486
return _ctx.variant === 'blue'
6481-
? (openBlock(), createBlock('svg', _hoisted_1$a, [_hoisted_2$9]))
6487+
? (openBlock(), createBlock('svg', _hoisted_1$b, [_hoisted_2$a]))
64826488
: (openBlock(), createBlock('svg', _hoisted_3$7, [_hoisted_4$7]))
64836489
}
64846490

6485-
script$a.render = render$a
6491+
script$b.render = render$b
64866492

6487-
var script$9 = defineComponent({
6493+
var script$a = defineComponent({
64886494
props: {
64896495
nav: Array,
64906496
mainURL: {
@@ -6513,12 +6519,12 @@ var script$9 = defineComponent({
65136519
}
65146520
},
65156521
components: {
6516-
AlgoliaSearchBox: script$b,
6517-
NativeScriptLogo: script$a,
6522+
AlgoliaSearchBox: script$c,
6523+
NativeScriptLogo: script$b,
65186524
},
65196525
})
65206526

6521-
var _hoisted_1$9 = /*#__PURE__*/ createVNode(
6527+
var _hoisted_1$a = /*#__PURE__*/ createVNode(
65226528
'a',
65236529
{
65246530
href: '/professional-services-summit-2021',
@@ -6545,8 +6551,8 @@ var _hoisted_1$9 = /*#__PURE__*/ createVNode(
65456551
-1
65466552
)
65476553

6548-
var _hoisted_2$8 = {
6549-
class: 'top-0 z-10 lg:sticky nav-bar',
6554+
var _hoisted_2$9 = {
6555+
class: 'top-0 z-10 lg:sticky',
65506556
}
65516557
var _hoisted_3$6 = {
65526558
class: 'pt-6 pb-6 bg-ns-blue',
@@ -6985,7 +6991,7 @@ var _hoisted_39 = /*#__PURE__*/ createVNode(
69856991
-1
69866992
)
69876993

6988-
function render$9(_ctx, _cache, $props, $setup, $data, $options) {
6994+
function render$a(_ctx, _cache, $props, $setup, $data, $options) {
69896995
var _component_NativeScriptLogo = resolveComponent('NativeScriptLogo')
69906996

69916997
var _component_AlgoliaSearchBox = resolveComponent('AlgoliaSearchBox')
@@ -6998,8 +7004,8 @@ function render$9(_ctx, _cache, $props, $setup, $data, $options) {
69987004
Fragment,
69997005
null,
70007006
[
7001-
_hoisted_1$9,
7002-
createVNode('header', _hoisted_2$8, [
7007+
_hoisted_1$a,
7008+
createVNode('header', _hoisted_2$9, [
70037009
createVNode('div', _hoisted_3$6, [
70047010
createVNode('nav', _hoisted_4$6, [
70057011
createVNode('div', _hoisted_5$3, [
@@ -7280,15 +7286,15 @@ function render$9(_ctx, _cache, $props, $setup, $data, $options) {
72807286
)
72817287
}
72827288

7283-
script$9.render = render$9
7289+
script$a.render = render$a
72847290

7285-
var _hoisted_1$8 = {
7291+
var _hoisted_1$9 = {
72867292
xmlns: 'http://www.w3.org/2000/svg',
72877293
viewBox: '0 0 1000 320',
72887294
fill: 'currentColor',
72897295
}
72907296

7291-
var _hoisted_2$7 = /*#__PURE__*/ createVNode(
7297+
var _hoisted_2$8 = /*#__PURE__*/ createVNode(
72927298
'g',
72937299
null,
72947300
[
@@ -7364,24 +7370,24 @@ var _hoisted_2$7 = /*#__PURE__*/ createVNode(
73647370
-1
73657371
)
73667372

7367-
function render$8(_ctx, _cache) {
7368-
return openBlock(), createBlock('svg', _hoisted_1$8, [_hoisted_2$7])
7373+
function render$9(_ctx, _cache) {
7374+
return openBlock(), createBlock('svg', _hoisted_1$9, [_hoisted_2$8])
73697375
}
73707376

7371-
var script$8 = {}
7372-
script$8.render = render$8
7377+
var script$9 = {}
7378+
script$9.render = render$9
73737379

7374-
var script$7 = defineComponent({
7380+
var script$8 = defineComponent({
73757381
setup: function setup() {},
73767382
components: {
7377-
OpenJSLogo: script$8,
7383+
OpenJSLogo: script$9,
73787384
},
73797385
})
73807386

7381-
var _hoisted_1$7 = {
7387+
var _hoisted_1$8 = {
73827388
class: '',
73837389
}
7384-
var _hoisted_2$6 = {
7390+
var _hoisted_2$7 = {
73857391
class:
73867392
'px-4 pt-10 pb-4 mx-auto max-w-7xl sm:px-6 md:flex md:items-center md:justify-between lg:px-6',
73877393
}
@@ -7561,13 +7567,13 @@ var _hoisted_9$1 = /*#__PURE__*/ createStaticVNode(
75617567
1
75627568
)
75637569

7564-
function render$7(_ctx, _cache, $props, $setup, $data, $options) {
7570+
function render$8(_ctx, _cache, $props, $setup, $data, $options) {
75657571
var _component_OpenJSLogo = resolveComponent('OpenJSLogo')
75667572

75677573
return (
75687574
openBlock(),
7569-
createBlock('footer', _hoisted_1$7, [
7570-
createVNode('div', _hoisted_2$6, [
7575+
createBlock('footer', _hoisted_1$8, [
7576+
createVNode('div', _hoisted_2$7, [
75717577
_hoisted_3$5,
75727578
createVNode('div', _hoisted_4$5, [
75737579
createVNode('a', _hoisted_5$2, [
@@ -7592,7 +7598,7 @@ function render$7(_ctx, _cache, $props, $setup, $data, $options) {
75927598
)
75937599
}
75947600

7595-
script$7.render = render$7
7601+
script$8.render = render$8
75967602

75977603
function _defineProperty(obj, key, value) {
75987604
if (key in obj) {
@@ -8021,7 +8027,7 @@ function createChildren(children) {
80218027
// }))
80228028
// }
80238029

8024-
var script$6 = defineComponent({
8030+
var script$7 = defineComponent({
80258031
setup: function setup() {
80268032
var items = useSideBar()
80278033
return {
@@ -8033,16 +8039,16 @@ var script$6 = defineComponent({
80338039
},
80348040
})
80358041

8036-
var _hoisted_1$6 = {
8042+
var _hoisted_1$7 = {
80378043
key: 0,
80388044
class: '',
80398045
}
8040-
function render$6(_ctx, _cache, $props, $setup, $data, $options) {
8046+
function render$7(_ctx, _cache, $props, $setup, $data, $options) {
80418047
var _component_SideBarLink = resolveComponent('SideBarLink')
80428048

80438049
return _ctx.items.length > 0
80448050
? (openBlock(),
8045-
createBlock('ul', _hoisted_1$6, [
8051+
createBlock('ul', _hoisted_1$7, [
80468052
(openBlock(true),
80478053
createBlock(
80488054
Fragment,
@@ -8068,6 +8074,105 @@ function render$6(_ctx, _cache, $props, $setup, $data, $options) {
80688074
: createCommentVNode('', true)
80698075
}
80708076

8077+
script$7.render = render$7
8078+
8079+
var script$6 = defineComponent({
8080+
setup: function setup() {
8081+
var items = useSideBar()
8082+
var route = useRoute()
8083+
var router = useRouter()
8084+
var isSelected = computed(function () {
8085+
return function (link) {
8086+
return route.path.includes(link)
8087+
}
8088+
})
8089+
return {
8090+
items: items,
8091+
route: route,
8092+
isSelected: isSelected,
8093+
onChange: function onChange(event) {
8094+
router.go(event.target.value)
8095+
},
8096+
}
8097+
},
8098+
})
8099+
8100+
var _hoisted_1$6 = {
8101+
class: 'bg-blue-50 lg:hidden',
8102+
}
8103+
var _hoisted_2$6 = {
8104+
class: 'mx-auto p-4 px-6',
8105+
}
8106+
function render$6(_ctx, _cache, $props, $setup, $data, $options) {
8107+
return (
8108+
openBlock(),
8109+
createBlock('div', _hoisted_1$6, [
8110+
createVNode('div', _hoisted_2$6, [
8111+
createVNode(
8112+
'select',
8113+
{
8114+
onChange:
8115+
_cache[1] ||
8116+
(_cache[1] = function () {
8117+
return _ctx.onChange && _ctx.onChange.apply(_ctx, arguments)
8118+
}),
8119+
class: 'w-full p-2',
8120+
title: 'Navigation',
8121+
},
8122+
[
8123+
(openBlock(true),
8124+
createBlock(
8125+
Fragment,
8126+
null,
8127+
renderList(_ctx.items, function (item) {
8128+
return (
8129+
openBlock(),
8130+
createBlock(
8131+
'optgroup',
8132+
{
8133+
label: item.text,
8134+
key: item.text,
8135+
},
8136+
[
8137+
(openBlock(true),
8138+
createBlock(
8139+
Fragment,
8140+
null,
8141+
renderList(item.children, function (child) {
8142+
return (
8143+
openBlock(),
8144+
createBlock(
8145+
'option',
8146+
{
8147+
key: child,
8148+
value: child.link,
8149+
text: child.text,
8150+
selected: _ctx.isSelected(child.link),
8151+
},
8152+
null,
8153+
8,
8154+
['value', 'text', 'selected']
8155+
)
8156+
)
8157+
}),
8158+
128
8159+
)),
8160+
],
8161+
8,
8162+
['label']
8163+
)
8164+
)
8165+
}),
8166+
128
8167+
)),
8168+
],
8169+
32
8170+
),
8171+
]),
8172+
])
8173+
)
8174+
}
8175+
80718176
script$6.render = render$6
80728177

80738178
var _hoisted_1$5 = {
@@ -8400,8 +8505,9 @@ script$4.__scopeId = 'data-v-2dcc8330'
84008505
var script$3 = defineComponent({
84018506
setup: function setup() {},
84028507
components: {
8403-
Header: script$9,
8404-
SideBar: script$6,
8508+
Header: script$a,
8509+
SideBar: script$7,
8510+
MobileNavigation: script$6,
84058511
SubHeader: script$5,
84068512
OnThisPage: script$4,
84078513
},
@@ -8476,6 +8582,8 @@ var _hoisted_15 = /*#__PURE__*/ createVNode(
84768582
function render$3(_ctx, _cache, $props, $setup, $data, $options) {
84778583
var _component_Header = resolveComponent('Header')
84788584

8585+
var _component_MobileNavigation = resolveComponent('MobileNavigation')
8586+
84798587
var _component_SideBar = resolveComponent('SideBar')
84808588

84818589
var _component_Content = resolveComponent('Content')
@@ -8490,13 +8598,15 @@ function render$3(_ctx, _cache, $props, $setup, $data, $options) {
84908598
createVNode(
84918599
_component_Header,
84928600
{
8601+
class: 'nav-bar',
84938602
nav: _ctx.$themeConfig.nav,
84948603
mainURL: _ctx.$themeConfig.mainURL,
84958604
},
84968605
null,
84978606
8,
84988607
['nav', 'mainURL']
84998608
),
8609+
createVNode(_component_MobileNavigation),
85008610
createVNode('div', _hoisted_2$3, [
85018611
createVNode('div', _hoisted_3$3, [
85028612
createVNode('div', _hoisted_4$3, [

0 commit comments

Comments
 (0)