Skip to content

Commit 9f24b3d

Browse files
100stacks100stacks
authored
Merge pull request #767 from lalithkarikelli/surf1761
feat(topnav): implement top navigation component
2 parents 9c82fc9 + 5d8e094 commit 9f24b3d

File tree

9 files changed

+547
-2
lines changed

9 files changed

+547
-2
lines changed

‎docs/_data/nav.json5‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,8 @@
4343
{ label: 'Loader', path: 'loader' },
4444
{ label: 'Menu', path: 'menu' },
4545
{ label: 'Modal', path: 'modal' },
46-
{ label: 'Navigation', path: 'navigation' },
46+
{ label: 'Navigation - Top Nav', path: 'topnav' },
47+
{ label: 'Navigation - Left Nav', path: 'navigation' },
4748
{ label: 'Pagination', path: 'pagination' },
4849
{ label: 'Panel', path: 'panel' },
4950
{ label: 'Password Input', path: 'password' },

‎docs/components/topnav/index.html‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
---
2+
title: Top Nav
3+
minver: 1.1.0
4+
also:
5+
components/topnav/test.html: Full Page Demo - Top Navigation
6+
elements/hx-navigation-control: <hx-navigation-control>
7+
---
8+
{% extends 'component.njk' %}
9+
10+
{% block page_header %}
11+
<p>
12+
The {{page.title}} is the top navigation menu bar across all breakpoints within the application frame of a HelixUI interface.
13+
Use the {{page.title}} to provide access to globally available features, such as account settings, billing, tickets,
14+
user management and so on.
15+
</p>
16+
{% endblock %}
17+
18+
{% block content %}
19+
20+
<section>
21+
<header>
22+
<h2 id="icon-badge">Nav Menu</h2>
23+
</header>
24+
25+
<div id="vue-topNavDemo">
26+
<div id="hxTopNav">
27+
<a class="img-left brand-logo" href="#"> <img src="images/helix-logo.svg" alt="Logo" /></a>
28+
<div class="productMenu">
29+
<hx-disclosure id="topnav-productMenu" aria-controls="topnavProductDropdown" role="button"
30+
aria-expanded="true" class="disabled">
31+
<span>Select a Product</span>
32+
<hx-icon class="hxPrimary" type="angle-down"></hx-icon>
33+
</hx-disclosure>
34+
<hx-menu id="topnavProductDropdown">
35+
<div class="sectionHeader">
36+
<hx-menuitem role="menuitem">Product Alpha</hx-menuitem>
37+
<hx-menuitem role="menuitem">Product Beta Services</hx-menuitem>
38+
<hx-menuitem role="menuitem">Product Charlie Service Offering</hx-menuitem>
39+
</div>
40+
</hx-menu>
41+
</div>
42+
<div id="right-menu">
43+
<a>
44+
<a href="#" @click="selectedTag(tab)" :current-tab="currentTab">
45+
<hx-icon type="bell"></hx-icon>
46+
<p>Notifications</p>
47+
</a>
48+
49+
<a href="#" class="selected">
50+
<hx-icon type="ticketing"></hx-icon>
51+
<p>Tickets</p>
52+
</a>
53+
54+
<a href="#">
55+
<hx-icon type="support"></hx-icon>
56+
<p>Support</p>
57+
</a>
58+
59+
<a href="#" class="disabled" id="billing">
60+
<hx-icon type="billing"></hx-icon>
61+
<p>Billing</p>
62+
<hx-tooltip for="billing" position="bottom-center">
63+
You do not have access to this area. Contact an account admin in your organization to request access to
64+
this item.
65+
</hx-tooltip>
66+
</a>
67+
68+
<a href="#">
69+
<hx-icon type="account"></hx-icon>
70+
<p>Account</p>
71+
</a>
72+
</a>
73+
<div class="straightLine"></div>
74+
<div>
75+
<hx-disclosure id="topnav-menu" aria-controls="topnavMenuId" role="button" aria-expanded="true"
76+
class="disabled">
77+
<span>Jane User</span>
78+
<hx-icon class="hxPrimary" type="angle-down"></hx-icon>
79+
</hx-disclosure>
80+
<hx-menu id="topnavMenuId" position="bottom-end">
81+
<div class="sectionHeader">
82+
<hx-menuitem role="menuitem" class="menuKey">Account Number :</hx-menuitem>
83+
<hx-menuitem role="menuitem" class="menuValue">12345678</hx-menuitem>
84+
</div>
85+
<hr class="divider">
86+
<div class="sectionBody">
87+
<hx-menuitem role="menuitem" class="menuValue">My Profile & Settings</hx-menuitem>
88+
</div>
89+
<hr class="divider">
90+
<div class="sectionFooter">
91+
<button class="hxBtn">Log Out </button>
92+
</div>
93+
</hx-menu>
94+
</div>
95+
</div>
96+
</div>
97+
98+
<footer>
99+
<pre><code v-text="snippet"></code></pre>
100+
</footer>
101+
</div>
102+
</section>
103+
{% endblock %}

‎docs/components/topnav/test.html‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
---
2+
title: Testing - Top Navigation
3+
---
4+
{% extends 'no-frame.njk' %}
5+
6+
{% block content %}
7+
<div id="vue-topNavDemo">
8+
<div id="hxTopNav">
9+
<a class="img-left brand-logo" href="#"> <img src="images/helix-logo.svg" alt="Logo" /></a>
10+
<div class="productMenu">
11+
<hx-disclosure id="topnav-productMenu" aria-controls="topnavProductDropdown" role="button" aria-expanded="true"
12+
class="disabled">
13+
<span>Select a Product</span>
14+
<hx-icon class="hxPrimary" type="angle-down"></hx-icon>
15+
</hx-disclosure>
16+
<hx-menu id="topnavProductDropdown">
17+
<div class="sectionHeader">
18+
<hx-menuitem role="menuitem">Product Alpha</hx-menuitem>
19+
<hx-menuitem role="menuitem">Product Beta Services</hx-menuitem>
20+
<hx-menuitem role="menuitem">Product Charlie Service Offering</hx-menuitem>
21+
</div>
22+
</hx-menu>
23+
</div>
24+
<div id="right-menu">
25+
<div>
26+
<a href="#" @click="selectedTag(tab)" :current-tab="currentTab">
27+
<hx-icon type="bell"></hx-icon>
28+
<p>Notifications</p>
29+
</a>
30+
31+
<a href="#" class="selected">
32+
<hx-icon type="ticketing"></hx-icon>
33+
<p>Tickets</p>
34+
</a>
35+
36+
<a href="#">
37+
<hx-icon type="support"></hx-icon>
38+
<p>Support</p>
39+
</a>
40+
41+
<a href="#" class="disabled" id="billing">
42+
<hx-icon type="billing"></hx-icon>
43+
<p>Billing</p>
44+
<hx-tooltip for="billing" position="bottom-center">
45+
You do not have access to this area. Contact an account admin in your organization to request access to
46+
this item.
47+
</hx-tooltip>
48+
</a>
49+
50+
<a href="#">
51+
<hx-icon type="account"></hx-icon>
52+
<p>Account</p>
53+
</a>
54+
</div>
55+
<div class="straightLine"></div>
56+
<div>
57+
<hx-disclosure id="topnav-menu" aria-controls="topnavMenuId" role="button" aria-expanded="true"
58+
class="disabled">
59+
<span>Jane User</span>
60+
<hx-icon class="hxPrimary" type="angle-down"></hx-icon>
61+
</hx-disclosure>
62+
<hx-menu id="topnavMenuId" position="bottom-end">
63+
<div class="sectionHeader">
64+
<hx-menuitem role="menuitem" class="menuKey">Account Number :</hx-menuitem>
65+
<hx-menuitem role="menuitem" class="menuValue">12345678</hx-menuitem>
66+
</div>
67+
<hr class="divider">
68+
<div class="sectionBody">
69+
<hx-menuitem role="menuitem" class="menuValue">My Profile & Settings</hx-menuitem>
70+
</div>
71+
<hr class="divider">
72+
<div class="sectionFooter">
73+
<button class="hxBtn">Log Out </button>
74+
</div>
75+
</hx-menu>
76+
</div>
77+
</div>
78+
</div>
79+
</div>
80+
{% endblock %}

‎docs/components/topnav/topnav-demo.js‎

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
import Util from '../../_util';
2+
3+
if (document.getElementById('vue-topNavDemo')) {
4+
new Vue({
5+
el: '#vue-topNavDemo',
6+
data: {
7+
isDisabled: true,
8+
notifications: 'Notifications',
9+
tickets: 'Tickets',
10+
support: 'Support',
11+
billing: 'Billing',
12+
account: 'Account',
13+
user: 'User',
14+
currentTab: 0,
15+
},
16+
methods: {
17+
selectedTag (selectedTag) {
18+
alert('selected icon');
19+
this.a.forEach(tab => {
20+
alert('selected icon');
21+
tab.isActive = (tab === selectedTag);
22+
});
23+
},
24+
},
25+
computed: {
26+
attrDisabled: function () {
27+
return (this.isDisabled ? 'disabled' : '');
28+
},
29+
snippet: function () {
30+
return Util.snippet(`
31+
<div id="hxTopNav">
32+
<a class="img-left brand-logo" href="#"> <img src="images/helix-logo.svg" alt="Logo" /></a>
33+
<div class="productMenu">
34+
<hx-disclosure id="topnav-productMenu" aria-controls="topnavProductDropdown"
35+
role="button"
36+
aria-expanded="true"
37+
class="disabled">
38+
<span>Select a Product</span>
39+
<hx-icon class="hxPrimary" type="angle-down"></hx-icon>
40+
</hx-disclosure>
41+
<hx-menu id="topnavProductDropdown">
42+
<div class="sectionHeader">
43+
<hx-menuitem role="menuitem">Product alpha</hx-menuitem>
44+
<hx-menuitem role="menuitem">Product Beta Services</hx-menuitem>
45+
<hx-menuitem role="menuitem">Product Charlie Service Offering</hx-menuitem>
46+
</div>
47+
</hx-menu>
48+
</div>
49+
<div id="right-menu">
50+
<div>
51+
<a href="#" @click="selectedTag(tab)" :current-tab="currentTab">
52+
<hx-icon type="bell"></hx-icon>
53+
<p>Notifications</p>
54+
</a>
55+
56+
<a href="#" class="selected">
57+
<hx-icon type="ticketing"></hx-icon>
58+
<p>Tickets</p>
59+
</a>
60+
61+
<a href="#">
62+
<hx-icon type="support"></hx-icon>
63+
<p>Support</p>
64+
</a>
65+
66+
<a href="#" class="disabled" id="billing">
67+
<hx-icon type="billing"></hx-icon>
68+
<p>Billing</p>
69+
<hx-tooltip for="billing" position="bottom-center">
70+
You do not have access to this area. Contact an account admin in your organization
71+
to request access to this item.
72+
</hx-tooltip>
73+
</a>
74+
75+
<a href="#">
76+
<hx-icon type="account"></hx-icon>
77+
<p>Account</p>
78+
</a>
79+
</div>
80+
<div class="straightLine"></div>
81+
<div>
82+
<hx-disclosure id="topnav-menu" aria-controls="topnavMenuId"
83+
role="button"
84+
aria-expanded="true"
85+
class="disabled">
86+
<span>Jane User</span>
87+
<hx-icon class="hxPrimary" type="angle-down"></hx-icon>
88+
</hx-disclosure>
89+
<hx-menu id="topnavMenuId" position="bottom-end">
90+
<div class="sectionHeader">
91+
<hx-menuitem role="menuitem" class="menuKey">Account Number :</hx-menuitem>
92+
<hx-menuitem role="menuitem" class="menuValue">12345678</hx-menuitem>
93+
</div>
94+
<hr class="divider">
95+
<div class="sectionBody">
96+
<hx-menuitem role="menuitem" class="menuValue">My Profile & Settings</hx-menuitem>
97+
</div>
98+
<hr class="divider">
99+
<div class="sectionFooter">
100+
<button class="hxBtn">Log Out </button>
101+
</div>
102+
</hx-menu>
103+
</div>
104+
</div>
105+
</div>
106+
`);
107+
},
108+
},
109+
});
110+
}

‎docs/docs.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ import './components/textarea/textarea-demo';
4040
import './components/toast/toast-demo';
4141
import './components/toggle/toggle-demo';
4242
import './components/tooltip/tooltip-demo';
43+
import './components/topnav/topnav-demo';
4344

4445
(function () {
4546
let hashAnchors = document.querySelectorAll('[href^="#"]');

‎src/scss/components/_index.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,11 +30,11 @@
3030
@import "search/index";
3131
@import "selector-strip/index";
3232
@import "switch/index";
33-
@import "toast/index";
3433
@import "table/index";
3534
@import "tabset/index";
3635
@import "textarea/index";
3736
@import "text-input/index";
3837
@import "toggle/index";
3938
@import "tooltip/index";
39+
@import "topnav/index";
4040
@import "typography/index";

‎src/scss/components/topnav/_config.scss‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
/// ========== VARIABLES ========== ///
2+
@import "vars";
3+
4+
/// ======== MIXINS ========== ///
5+
6+
@import "components/form/config";
7+
@import "./mixins/topNavControl";

0 commit comments

Comments
 (0)