ocertat/Kingsborough-LibGuide
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

nav level template works. Dropdown headers not working yet.

Browse Source
This commit is contained in:
Mark Eaton
2022-09-23 15:08:40 -04:00
parent acc14ddfc9
commit f857c19cc5
2 changed files with 233 additions and 266 deletions
Download Patch File Download Diff File Expand all files Collapse all files
configuration/main.js
+30 -1
View File
@@ -1,3 +1,26 @@
const navComponent = {
template:
`<ul class="nav navbar-nav" id="navbar-center">
<li class="dropdown main-nav-dropdown">
<a class="dropdown-toggle ga-main-navbar" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<div class="caret-text">{{ navmenu }}</div>
<div class="fancy-caret"><i class="fas fa-angle-down" aria-hidden="true"></i></div>
</a>
<ul class="dropdown-menu fade dropdown-margin">
<li>
<a v-for="item in navmenu" v-bind:key="item.id" class="searchmenu" v-bind:aria-label="item.description" v-bind:href="item.link" v-bind:target="item.target_blank">
<div class="bigger-fancy-text">
<i v-bind:class="item.icon" aria-hidden="true"></i>
<strong>{{ item.description }}</strong>
</div>
</a>
</li>
</ul>
</li>
</ul>`,
props: ['navmenu']
}
const menusComponent = { const menusComponent = {
template: template:
`<div class="bigger-fancy-text"> `<div class="bigger-fancy-text">
@@ -7,12 +30,15 @@ const menusComponent = {
props: ['item'] props: ['item']
} }
new Vue({ new Vue({
el: '#app', el: '#app',
components: { components: {
'nav-component': navComponent,
'menus-component': menusComponent 'menus-component': menusComponent
}, },
data: { data() {
return {
hamburger: [ hamburger: [
{ {
link: "https://cuny-kb.primo.exlibrisgroup.com/discovery/search?tab=Everything&vid=01CUNY_KB:CUNY_KB&lang=en", link: "https://cuny-kb.primo.exlibrisgroup.com/discovery/search?tab=Everything&vid=01CUNY_KB:CUNY_KB&lang=en",
@@ -57,6 +83,7 @@ new Vue({
id: 6 id: 6
} }
], ],
navListOfMenus: {
findIt: [ findIt: [
{ {
link: "https://library.kbcc.cuny.edu/az.php", link: "https://library.kbcc.cuny.edu/az.php",
@@ -215,4 +242,6 @@ new Vue({
} }
] ]
} }
}
}
}); });
groups/home/LibAnswers-SlideOutChat-7.html
+2 -64
View File
@@ -48,70 +48,8 @@
<div class="row" id="hamburger-alternative"> <div class="row" id="hamburger-alternative">
<div class="col-xs-12"> <div class="col-xs-12">
<nav class="navbar navbar-default main-nav-container"> <nav class="navbar navbar-default main-nav-container">
<div class="container-fluid"> <div class="container-fluid" v-for="navmenu in navListOfMenus">
<ul class="nav navbar-nav" id="navbar-center"> <nav-component v-bind:navmenu="navmenu"></nav-component>
<li class="dropdown main-nav-dropdown">
<a class="dropdown-toggle ga-main-navbar" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<div class="caret-text">Find It</div>
<div class="fancy-caret"><i class="fas fa-angle-down" aria-hidden="true"></i></div>
</a>
<ul class="dropdown-menu fade dropdown-margin">
<li>
<a v-for="item in findIt" v-bind:key="item.id" class="searchmenu" v-bind:aria-label="item.description" v-bind:href="item.link" v-bind:target="item.target_blank">
<menus-component v-bind:item="item"></menus-component>
</a>
</li>
</ul>
</li>
<li class="dropdown main-nav-dropdown">
<a class="dropdown-toggle ga-main-navbar" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<div class="caret-text">Services </div>
<div class="fancy-caret"><i class="fas fa-angle-down" aria-hidden="true"></i></div></a>
<ul class="dropdown-menu fade dropdown-margin">
<li>
<a v-for="item in services" v-bind:key="item.id" class="searchmenu" v-bind:aria-label="item.description" v-bind:href="item.link" v-bind:target="item.target_blank">
<menus-component v-bind:item="item"></menus-component>
</a>
</li>
</ul>
</li>
<li class="dropdown main-nav-dropdown">
<a class="dropdown-toggle ga-main-navbar" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<div class="caret-text">About Us </div>
<div class="fancy-caret"><i class="fas fa-angle-down" aria-hidden="true"></i></div></a>
<ul class="dropdown-menu fade dropdown-margin">
<li>
<a v-for="item in aboutUs" v-bind:key="item.id" class="searchmenu" v-bind:aria-label="item.description" v-bind:href="item.link" v-bind:target="item.target_blank">
<menus-component v-bind:item="item"></menus-component>
</a>
</li>
</ul>
</li>
<li class="dropdown main-nav-dropdown">
<a class="dropdown-toggle ga-main-navbar" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<div class="caret-text">Location & Hours </div>
<div class="fancy-caret"><i class="fas fa-angle-down" aria-hidden="true"></i></div></a>
<ul class="dropdown-menu fade dropdown-margin">
<li>
<a v-for="item in locationAndHours" v-bind:key="item.id" class="searchmenu" v-bind:aria-label="item.description" v-bind:href="item.link" v-bind:target="item.target_blank">
<menus-component v-bind:item="item"></menus-component>
</a>
</li>
</ul>
</li>
<li class="dropdown main-nav-dropdown">
<a class="dropdown-toggle ga-main-navbar" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<div class="caret-text">Help </div>
<div class="fancy-caret"><i class="fas fa-angle-down" aria-hidden="true"></i></div></a>
<ul class="dropdown-menu fade dropdown-margin">
<li>
<a v-for="item in help" v-bind:key="item.id" class="searchmenu" v-bind:aria-label="item.description" v-bind:href="item.link" v-bind:target="item.target_blank">
<menus-component v-bind:item="item"></menus-component>
</a>
</li>
</ul>
</li>
</ul><!-- end of navbar-center -->
</div><!-- end of container-fluid --> </div><!-- end of container-fluid -->
</nav><!-- end of main-nav-container --> </nav><!-- end of main-nav-container -->
</div><!-- end of col-xs-12 --> </div><!-- end of col-xs-12 -->