Skip to content

Commit 6e65fb4

Browse files
100stacks100stacks
committed
feat(secnav): design review for secondary navigation component
1 parent d5d3f48 commit 6e65fb4

File tree

4 files changed

+66
-86
lines changed

4 files changed

+66
-86
lines changed

‎docs/components/secnav/index.html‎

Lines changed: 11 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -104,40 +104,37 @@ <h3>
104104

105105
<!-- Secondary Navigation -->
106106
<nav id="hxSecNav">
107-
<a href="#" class="hxNavLink">Nav Item One</a>
107+
<a href="#" class="hxNavLink">SecNav One</a>
108108
<hx-disclosure aria-controls="secnav-option-menu">
109-
<span>Nav Item Two</span>
109+
<span>SecNav Two</span>
110110
<hx-icon class="hxPrimary" type="angle-down"></hx-icon>
111111
</hx-disclosure>
112112
<hx-menu id="secnav-option-menu">
113113
<section>
114-
<header>
115-
L1 Section
116-
</header>
117-
<hx-menuitem>Link 1-1</hx-menuitem>
118-
<hx-menuitem>Link 1-2</hx-menuitem>
119-
<hx-menuitem>Link 1-3</hx-menuitem>
114+
<hx-menuitem>Link item 1</hx-menuitem>
115+
<hx-menuitem>Link item 2</hx-menuitem>
116+
<hx-menuitem>Link item 3</hx-menuitem>
120117
</section>
121118
</hx-menu>
122-
<hx-disclosure ria-controls="secnav-option-menu-two">
123-
<span>Nav Item Three</span>
119+
<hx-disclosure aria-controls="secnav-option-menu-two">
120+
<span>SecNav Three</span>
124121
<hx-icon class="hxPrimary" type="angle-down"></hx-icon>
125122
</hx-disclosure>
126123
<hx-menu id="secnav-option-menu-two">
127124
<section>
128125
<header>
129126
L1 Section
130127
</header>
131-
<hx-menuitem>Link 1-1</hx-menuitem>
132-
<hx-menuitem>Link 1-2</hx-menuitem>
128+
<hx-menuitem>Link item 1-1</hx-menuitem>
129+
<hx-menuitem>Link item 1-2</hx-menuitem>
133130
</section>
134131
<hr class="hxDivider">
135132
<section>
136133
<header>
137134
L2 Section
138135
</header>
139-
<hx-menuitem>Link 2-1</hx-menuitem>
140-
<hx-menuitem>Link 2-2</hx-menuitem>
136+
<hx-menuitem>Link item 2-1</hx-menuitem>
137+
<hx-menuitem>Link item 2-2</hx-menuitem>
141138
</section>
142139
</hx-menu>
143140
</nav>

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

Lines changed: 10 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -98,40 +98,37 @@ if (document.getElementById('vue-secNavDemo')) {
9898
9999
<!-- Secondary Navigation -->
100100
<nav id="hxSecNav">
101-
<a href="#" class="hxNavLink">Nav Item One</a>
101+
<a href="#" class="hxNavLink">SecNav One</a>
102102
<hx-disclosure aria-controls="secnav-option-menu">
103-
<span>Nav Item Two</span>
103+
<span>SecNav Two</span>
104104
<hx-icon class="hxPrimary" type="angle-down"></hx-icon>
105105
</hx-disclosure>
106106
<hx-menu id="secnav-option-menu">
107107
<section>
108-
<header>
109-
L1 Section
110-
</header>
111-
<hx-menuitem>Link 1-1</hx-menuitem>
112-
<hx-menuitem>Link 1-2</hx-menuitem>
113-
<hx-menuitem>Link 1-3</hx-menuitem>
108+
<hx-menuitem>Link item 1-1</hx-menuitem>
109+
<hx-menuitem>Link item 1-2</hx-menuitem>
110+
<hx-menuitem>Link item 1-3</hx-menuitem>
114111
</section>
115112
</hx-menu>
116113
<hx-disclosure aria-controls="secnav-option-menu-two">
117-
<span>Nav Item Three</span>
114+
<span>SecNav Three</span>
118115
<hx-icon class="hxPrimary" type="angle-down"></hx-icon>
119116
</hx-disclosure>
120117
<hx-menu id="secnav-option-menu-two">
121118
<section>
122119
<header>
123120
L1 Section
124121
</header>
125-
<hx-menuitem>Link 1-1</hx-menuitem>
126-
<hx-menuitem>Link 1-2</hx-menuitem>
122+
<hx-menuitem>Link item 1-1</hx-menuitem>
123+
<hx-menuitem>Link item 1-2</hx-menuitem>
127124
</section>
128125
<hr class="hxDivider">
129126
<section>
130127
<header>
131128
L2 Section
132129
</header>
133-
<hx-menuitem>Link 2-1</hx-menuitem>
134-
<hx-menuitem>Link 2-2</hx-menuitem>
130+
<hx-menuitem>Link item 2-1</hx-menuitem>
131+
<hx-menuitem>Link item 2-2</hx-menuitem>
135132
</section>
136133
</hx-menu>
137134
</nav>

‎docs/components/secnav/test.html‎

Lines changed: 11 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<div id="vue-secNavDemo">
88
<nav id="hxTopNav">
99
<a class="hxTopNavLogo" href="#">
10-
<img src="images/helix-logo.svg" alt="Brand Logo" />
10+
<img src="images/helix-logo.svg" alt="Helix Brand Logo" />
1111
</a>
1212
<div class="hxTopNavMenu hxTopNavOptionMenu">
1313
<hx-disclosure aria-controls="topnav-menu-options">
@@ -79,40 +79,37 @@
7979

8080
<!-- Secondary Navigation -->
8181
<nav id="hxSecNav">
82-
<a href="#" class="hxNavLink">Nav Item One</a>
82+
<a href="#" class="hxNavLink">SecNav One</a>
8383
<hx-disclosure aria-controls="secnav-option-menu">
84-
<span>Nav Item Two</span>
84+
<span>SecNav Two</span>
8585
<hx-icon class="hxPrimary" type="angle-down"></hx-icon>
8686
</hx-disclosure>
8787
<hx-menu id="secnav-option-menu">
8888
<section>
89-
<header>
90-
L1 Section
91-
</header>
92-
<hx-menuitem>Link 1-1</hx-menuitem>
93-
<hx-menuitem>Link 1-2</hx-menuitem>
94-
<hx-menuitem>Link 1-3</hx-menuitem>
89+
<hx-menuitem>Link item 1</hx-menuitem>
90+
<hx-menuitem>Link item 2</hx-menuitem>
91+
<hx-menuitem>Link item 3</hx-menuitem>
9592
</section>
9693
</hx-menu>
9794
<hx-disclosure aria-controls="secnav-option-menu-two">
98-
<span>Nav Item Three</span>
95+
<span>SecNav Three</span>
9996
<hx-icon class="hxPrimary" type="angle-down"></hx-icon>
10097
</hx-disclosure>
10198
<hx-menu id="secnav-option-menu-two">
10299
<section>
103100
<header>
104101
L1 Section
105102
</header>
106-
<hx-menuitem>Link 1-1</hx-menuitem>
107-
<hx-menuitem>Link 1-2</hx-menuitem>
103+
<hx-menuitem>Link item 1-1</hx-menuitem>
104+
<hx-menuitem>Link item 1-2</hx-menuitem>
108105
</section>
109106
<hr class="hxDivider">
110107
<section>
111108
<header>
112109
L2 Section
113110
</header>
114-
<hx-menuitem>Link 2-1</hx-menuitem>
115-
<hx-menuitem>Link 2-2</hx-menuitem>
111+
<hx-menuitem>Link item 2-1</hx-menuitem>
112+
<hx-menuitem>Link item 2-2</hx-menuitem>
116113
</section>
117114
</hx-menu>
118115
</nav>

‎src/scss/components/secnav/index.scss‎

Lines changed: 34 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -2,32 +2,42 @@
22
@import "vars";
33
@import "./config";
44

5+
/// * =================================== * ///
6+
/// * ====== Secondary Navigation ====== * ///
7+
/// * =================================== * ///
8+
59
#hxSecNav {
610
background-color: $gray-975;
711
height: 3.5rem;
812
overflow: hidden;
9-
width: 100%;
13+
width: 100vw;
1014

1115
.hxNavLink {
1216
color: $gray-400;
1317
display: inline-block;
14-
font-size: 0.875rem;
18+
font-size: 1rem;
1519
height: 3.5rem;
1620
padding: 1rem 1.25rem;
1721
text-align: center;
1822
text-transform: uppercase;
1923
width: auto;
2024

2125
&:hover {
22-
background-color: $gray-900;
26+
background-color: $gray-800;
2327
color: $gray-0 !important;
2428
}
29+
30+
&:active {
31+
background-color: $gray-900;
32+
color: $gray-0;
33+
}
2534
}
2635

2736
> hx-disclosure {
2837
background-color: transparent;
2938
color: $gray-400;
30-
font-size: 0.875rem;
39+
display: inline-block;
40+
font-size: 1rem;
3141
height: 3.5rem;
3242
line-height: 1;
3343
padding: 1rem 1.25rem;
@@ -36,7 +46,7 @@
3646

3747
> hx-icon {
3848
color: $gray-400;
39-
font-size: 0.875rem;
49+
font-size: 1rem;
4050
margin-left: 0.625rem;
4151
margin-top: 0.25rem;
4252
width: 0.75rem;
@@ -47,26 +57,37 @@
4757
}
4858

4959
&:hover {
50-
background-color: $gray-900;
60+
background-color: $gray-800;
5161
color: $gray-0 !important;
5262
}
63+
64+
&:active {
65+
background-color: $gray-900;
66+
color: $gray-0;
67+
}
5368
}
5469

5570
> hx-menu {
5671
background-color: $gray-1000;
57-
border: 0.063rem solid $gray-1000;
72+
border: 1px solid $gray-1000;
5873
color: $gray-0;
5974
min-width: 10.5rem;
6075
padding: 0;
6176
top: 14.5rem;
6277

6378
hx-menuitem {
6479
color: $gray-400;
80+
padding: 0.5rem 1.25rem;
6581

6682
&:hover {
67-
background-color: $gray-900;
83+
background-color: $gray-800;
6884
color: $gray-0 !important;
6985
}
86+
87+
&:active {
88+
background-color: $gray-900;
89+
color: $gray-0;
90+
}
7091
}
7192

7293
hx-menuitem[disabled] {
@@ -75,51 +96,19 @@
7596
color: $gray-600;
7697
}
7798

78-
.hxMenuKey {
79-
color: $gray-600;
80-
font-size: 0.75rem;
81-
line-height: 1;
82-
text-transform: none;
83-
}
84-
85-
.hxMenuValue {
86-
color: $gray-400;
87-
line-height: 1;
88-
padding-bottom: 0.5rem;
89-
padding-top: 0.5rem;
90-
text-transform: none;
91-
}
92-
9399
.hxDivider {
94100
border-color: $gray-800;
95-
height: 0.063rem;
101+
height: 1px;
102+
margin: 0.5rem auto 0;
96103
}
97104

98105
> section > header {
99-
padding-bottom: 0.5rem;
106+
padding-left: 1.25rem;
107+
padding-top: 0.5rem;
100108
}
101109

102110
> section {
103-
padding: 1rem 1.25rem;
104-
}
105-
106-
> section > footer {
107-
.hxBtn {
108-
margin-left: auto;
109-
margin-right: auto;
110-
width: 100%;
111-
112-
&:hover {
113-
border-color: $cyan-100;
114-
background-color: $gray-1000;
115-
color: $cyan-100;
116-
}
117-
118-
&:active {
119-
border-color: $cyan-700;
120-
color: $cyan-700;
121-
}
122-
}
111+
padding: 0;
123112
}
124113
}
125114
}

0 commit comments

Comments
 (0)