Skip to content

Commit

Permalink
updated Global Nav component and Dynamic Router Example [appends #47]
Browse files Browse the repository at this point in the history
  • Loading branch information
@bignamehere
bignamehere committed Aug 18, 2022
1 parent 8a4c5af commit c279b4b
Show file tree
Hide file tree
Showing 4 changed files with 41 additions and 60 deletions.
10 changes: 5 additions & 5 deletions public/api/uxp-nav.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
},
{
"uid": "menu-demo-id",
"label": "Menu Demo",
"label": "Page Name Demo",
"path": "/demos",
"hasChild": "true",
"multiColumn": "false",
Expand All @@ -32,14 +32,14 @@
"children": [
{
"uid": "menu-demo-one-id",
"label": "Submenu System",
"path": "/",
"label": "Introduction",
"path": "/demos/name/introduction",
"hasChild": "false"
},
{
"uid": "menu-demo-two-id",
"label": "Menu Subsystem",
"path": "/",
"label": "Conclusion",
"path": "/demos/name/conclusion",
"hasChild": "false"
}
]
Expand Down
5 changes: 5 additions & 0 deletions src/Demos/_routes/demos.routes.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,5 +33,10 @@ export const demosRoutes = [
{
path: '/demos/today',
component: () => import('@/Demos/_views/today/Today.vue')
},
{
path: '/demos/name/:id',
component: () => import('@/Demos/_views/Name.vue'),
props: true
}
]
6 changes: 4 additions & 2 deletions src/Demos/_views/Name.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
</template>

<script>
import { ref, onMounted } from 'vue';
import { ref, watch } from 'vue';
import { useRoute } from 'vue-router';
import baseHeader from '@/_partials/BaseHeader.vue';
Expand All @@ -40,7 +40,9 @@ export default {
const route = useRoute();
const pageName = route.params.id;
const pageName = ref(route.params.id);
watch( () => route.params.id, _newId => pageName.value = _newId );
return {
pageName
Expand Down
80 changes: 27 additions & 53 deletions src/_components/global-nav/global-nav.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,17 +6,17 @@
<li v-for="item in navData.main" :key="item.uid" :data-control-id="item.uid" :class="'fsa-nav-global__list-item '+ item.columnClass">
<!-- Multicolumn with Headers-->
<div v-if="item.hasChild=='true' && item.multiColumn=='true' && item.hasHeaders=='true'">
<button :id="item.uid+'-BTN'" @click="toggleMenu" class="fsa-nav-global__link fsa-nav-global__link--has-sub-menu" type="button" aria-expanded="false" :aria-controls="item.uid">
<button :id="item.uid+'-BTN'" @click="toggleMenu(item.uid+'-BTN')" class="fsa-nav-global__link fsa-nav-global__link--has-sub-menu" type="button" aria-expanded="false" :aria-controls="item.uid">
<span class="fsa-nav-global__text" :id="item.uid+'-SUB'">{{item.label}}</span>
</button>
<div class="fsa-nav-global__sub-menu" :id="item.uid" aria-hidden="true">
<div class="fsa-nav-global__sub-menu-bd" :aria-labelledby="item.uid+'-SUB'">
<div v-for="child in item.children" :key="child.id" class="fsa-nav-global__sub-menu-group">
<div v-for="child in item.children" :key="child.uid" class="fsa-nav-global__sub-menu-group">
<h3 class="fsa-nav-global__sub-menu-title" :id="child.uid">{{ child.header }}</h3>
<ul class="fsa-nav-global__sub-menu-list" :aria-labelledby="child.uid">
<li v-for="gp in child.group" :key="gp.uid" class="fsa-nav-global__sub-menu-item">

<a href="#" @click.prevent="goto(gp.path)" class="fsa-nav-global__sub-menu-link">{{ gp.label }}</a>
<a :href="basePath + gp.path" @click.prevent="navigateTo(item.uid+'-BTN', gp.path)" class="fsa-nav-global__sub-menu-link">{{ gp.label }}</a>

</li>
</ul>
Expand All @@ -26,15 +26,15 @@
</div>
<!-- Multicolumn No Headers -->
<div v-else-if="item.hasChild=='true' && item.multiColumn=='true' && item.hasHeaders=='false'">
<button :id="item.uid+'-BTN'" @click="toggleMenu" class="fsa-nav-global__link fsa-nav-global__link--has-sub-menu" type="button" aria-expanded="false" :aria-controls="item.uid">
<button :id="item.uid+'-BTN'" @click="toggleMenu(item.uid+'-BTN')" class="fsa-nav-global__link fsa-nav-global__link--has-sub-menu" type="button" aria-expanded="false" :aria-controls="item.uid">
<span class="fsa-nav-global__text" :id="item.uid+'-SUB'">{{item.label}}</span>
</button>
<div class="fsa-nav-global__sub-menu" :id="item.uid" aria-hidden="true">
<div class="fsa-nav-global__sub-menu-bd">
<ul class="fsa-nav-global__sub-menu-list" :aria-labelledby="item.uid+'-SUB'">
<li v-for="child in item.children" :key="child.uid" class="fsa-nav-global__sub-menu-item">

<a href="#" @click.prevent="goto(child.path)" class="fsa-nav-global__sub-menu-link">{{ child.label }}</a>
<a :href="basePath + child.path" @click.prevent="navigateTo(item.uid+'-BTN', child.path)" class="fsa-nav-global__sub-menu-link">{{ child.label }}</a>

</li>
</ul>
Expand All @@ -45,7 +45,7 @@

<div v-else-if="item.hasChild=='true' && item.multiColumn=='false' && item.hasHeaders=='true'">

<button :id="item.uid+'-BTN'" @click="toggleMenu" class="fsa-nav-global__link fsa-nav-global__link--has-sub-menu" type="button" aria-expanded="false" :aria-controls="item.uid">
<button :id="item.uid+'-BTN'" @click="toggleMenu(item.uid+'-BTN')" class="fsa-nav-global__link fsa-nav-global__link--has-sub-menu" type="button" aria-expanded="false" :aria-controls="item.uid">
<span class="fsa-nav-global__text" :id="item.uid+'-SUB'">{{item.label}}</span>
</button>

Expand All @@ -55,7 +55,7 @@
<h3 class="fsa-nav-global__sub-menu-title" :id="child.uid">{{ child.header }}</h3>
<ul class="fsa-nav-global__sub-menu-list" :aria-labelledby="child.uid">
<li v-for="gp in child.group" :key="gp.uid" class="fsa-nav-global__sub-menu-item">
<a href="#" @click.prevent="goto(gp.path)" class="fsa-nav-global__sub-menu-link">{{ gp.label }}</a>
<a :href="basePath + gp.path" @click.prevent="navigateTo(item.uid+'-BTN', gp.path)" class="fsa-nav-global__sub-menu-link">{{ gp.label }}</a>
</li>
</ul>
</div>
Expand All @@ -64,83 +64,48 @@

<!-- Single Column No Headers -->
<div v-else-if="item.hasChild=='true' && item.multiColumn=='false' && item.hasHeaders=='false'">
<button :id="item.uid+'-BTN'" @click="toggleMenu" class="fsa-nav-global__link fsa-nav-global__link--has-sub-menu" type="button" aria-expanded="false" :aria-controls="item.uid">
<button :id="item.uid+'-BTN'" @click="toggleMenu(item.uid+'-BTN')" class="fsa-nav-global__link fsa-nav-global__link--has-sub-menu" type="button" aria-expanded="false" :aria-controls="item.uid">
<span class="fsa-nav-global__text" :id="item.uid+'-SUB'">{{item.label}}</span>
</button>
<div class="fsa-nav-global__sub-menu" :id="item.uid" aria-hidden="true">
<div class="fsa-nav-global__sub-menu-bd">
<ul class="fsa-nav-global__sub-menu-list" :aria-labelledby="item.uid+'-SUB'">
<li v-for="child in item.children" :key="child.id" class="fsa-nav-global__sub-menu-item">

<a href="#" @click.prevent="goto(child.path)" class="fsa-nav-global__sub-menu-link">{{ child.label }}</a>
<a :href="basePath + child.path" @click.prevent="navigateTo(item.uid+'-BTN', child.path)" class="fsa-nav-global__sub-menu-link">{{ child.label }}</a>

</li>
</ul>
</div>
</div>
</div>
<div v-else="item.hasChild=='false'">

<div v-else>
<a href="#" @click.prevent="goto(item.path)" class="fsa-nav-global__link">
<a :href="basePath + item.path" @click.prevent="goto(item.path)" class="fsa-nav-global__link">
<span class="fsa-nav-global__text">{{item.label}}</span>
</a>
</div>

</div>
</li>
</ul>

<div v-if="navData.side" class="fsa-nav-global__aside">
<div class="fsa-level">

<div v-for="sideItem in navData.side" :data-control-id="sideItem.uid" :key="sideItem.uid">
<button v-if="sideItem.hasChild=='true'" :id="sideItem.uid+'-BTN'" @click="toggleMenu" class="fsa-nav-global__link fsa-nav-global__link--has-sub-menu" type="button" aria-expanded="false" :aria-controls="sideItem.uid">
<span class="fsa-nav-global__text" :id="sideItem.uid+'-SUB'">{{sideItem.label}}</span>
</button>
<div v-if="sideItem.hasChild=='true'" class="fsa-nav-global__sub-menu" :id="sideItem.uid" aria-hidden="true">
<div class="fsa-nav-global__sub-menu-bd">
<ul class="fsa-nav-global__sub-menu-list" :aria-labelledby="sideItem.uid+'-SUB'">
<li v-for="child in sideItem.children" :key="child.id" class="fsa-nav-global__sub-menu-item">

<a href="#" @click.prevent="goto(child.path)" class="fsa-nav-global__sub-menu-link">{{ child.label }}</a>

</li>
</ul>
</div>
</div>

<a v-if="sideItem.hasChild=='false'" href="#" @click.prevent="goto(sideItem.path)">
<span class="fsa-level fsa-level--inline fsa-level--gutter-xs">
<svg v-if="sideItem.icon"
:class="sideItem.icon.class" aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path :d="sideItem.icon.path"></path>
</svg>
<span>{{sideItem.label}}</span>
</span>
</a>

</div>
</div>
</div>


<div v-if="false" class="fsa-nav-global__aside">
<div class="fsa-level">
<span v-for="sideItem in navData.side" :key="sideItem.uid">

<a href="#" @click.prevent="goto(sideItem.path)">
<a :href="basePath + sideItem.path" @click.prevent="goto(sideItem.path)">

<span class="fsa-level fsa-level--inline fsa-level--gutter-xs">
<svg v-if="sideItem.icon"
:class="sideItem.icon.class" aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path :d="sideItem.icon.path"></path>
</svg>
<span>{{sideItem.label}}</span>
</span>

</a>

</span>
</div>
</div>

<div v-if="USE_SEARCH == 'true'" class="fsa-nav-global__search">
<div class="fsa-search fsa-search--small" role="search">
<div class="fsa-search__bd">
Expand Down Expand Up @@ -206,6 +171,9 @@ export default {
documentClickHandler
} = useMenuSystem();
const { goto } = useNavigation();
let baseUrl = import.meta.env.BASE_URL.substring(0, import.meta.env.BASE_URL.length - 1)
const basePath = ref( baseUrl );
const navData = ref({});
const navigationData = computed( () => props.NAV_DATA );
Expand All @@ -222,9 +190,9 @@ export default {
navData.value = replaceUID( val );
})
function toggleMenu(e) {
let theItem = e.currentTarget;
let theMenu = e.currentTarget.nextSibling;
function toggleMenu(_id) {
let theItem = document.getElementById(_id);
let theMenu = theItem.nextSibling;
let expanded = theItem.getAttribute('aria-expanded');
loopItems('closeAllMenus');
Expand All @@ -246,6 +214,10 @@ export default {
emit("emitSearch", {type: 'scoped', scope: cat, phrase: p})
}
const navigateTo = (_id, _path) => {
toggleMenu(_id)
goto(_path);
}
onMounted(() => {
Expand All @@ -262,7 +234,9 @@ export default {
return {
navData,
navigateTo,
goto,
basePath,
openMenu,
closeMenu,
loopItems,
Expand Down

0 comments on commit c279b4b

Please sign in to comment.