@iroco/ui 0.13.0 → 0.15.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/index.js +117 -93
- package/lib/index.min.js +55 -55
- package/lib/index.mjs +117 -93
- package/lib/index.mjs.css +291 -124
- package/package.json +4 -3
- package/src/Button.svelte +16 -12
- package/src/NavBar.svelte +36 -15
package/src/NavBar.svelte
CHANGED
|
@@ -11,15 +11,15 @@
|
|
|
11
11
|
|
|
12
12
|
const handleClickLink = (menuItem: NavigationItem) => {
|
|
13
13
|
active = menuItem.name;
|
|
14
|
-
if (typeof menuItem.hrefOrCallback ===
|
|
15
|
-
|
|
16
|
-
|
|
14
|
+
if (typeof menuItem.hrefOrCallback === 'function') {
|
|
15
|
+
menuItem.hrefOrCallback();
|
|
16
|
+
return false; // to avoid calling href
|
|
17
17
|
}
|
|
18
18
|
dispatch('click_link');
|
|
19
19
|
};
|
|
20
20
|
</script>
|
|
21
21
|
|
|
22
|
-
<nav data-testid={type} class=
|
|
22
|
+
<nav data-testid={type} class="nav__{type}">
|
|
23
23
|
<button on:click class="nav__{type}__close">
|
|
24
24
|
<IconClose width="3em" height="3em" />
|
|
25
25
|
</button>
|
|
@@ -27,7 +27,12 @@
|
|
|
27
27
|
<ul class="nav__{type}__item-container">
|
|
28
28
|
{#each navigationItems as item}
|
|
29
29
|
<li class="nav__{type}__item" class:active={active === item.name}>
|
|
30
|
-
<a
|
|
30
|
+
<a
|
|
31
|
+
on:click={() => handleClickLink(item)}
|
|
32
|
+
href={typeof item.hrefOrCallback === 'string' ? item.hrefOrCallback : '#'}
|
|
33
|
+
>
|
|
34
|
+
{item.name}</a
|
|
35
|
+
>
|
|
31
36
|
</li>
|
|
32
37
|
{/each}
|
|
33
38
|
</ul>
|
|
@@ -38,7 +43,8 @@
|
|
|
38
43
|
@import '../scss/containers';
|
|
39
44
|
|
|
40
45
|
.nav {
|
|
41
|
-
&__sidebar,
|
|
46
|
+
&__sidebar,
|
|
47
|
+
&__topbar {
|
|
42
48
|
&__item {
|
|
43
49
|
text-decoration: none;
|
|
44
50
|
font-size: 0.75em;
|
|
@@ -57,9 +63,10 @@
|
|
|
57
63
|
height: 100%;
|
|
58
64
|
width: 300px;
|
|
59
65
|
position: absolute;
|
|
66
|
+
top: 4.45em;
|
|
67
|
+
left: 0;
|
|
60
68
|
overflow-x: hidden;
|
|
61
|
-
|
|
62
|
-
&__item_container {
|
|
69
|
+
&__item-container {
|
|
63
70
|
margin: 0;
|
|
64
71
|
padding: 0;
|
|
65
72
|
width: 100%;
|
|
@@ -69,6 +76,9 @@
|
|
|
69
76
|
padding: 2em;
|
|
70
77
|
border-top: 1px solid colors.$mediumGrey;
|
|
71
78
|
}
|
|
79
|
+
&__item:first-child {
|
|
80
|
+
border-top: none;
|
|
81
|
+
}
|
|
72
82
|
.active {
|
|
73
83
|
border-top: 1px solid colors.$green;
|
|
74
84
|
border-bottom: 1px solid colors.$green;
|
|
@@ -79,7 +89,8 @@
|
|
|
79
89
|
flex-grow: 1;
|
|
80
90
|
display: flex;
|
|
81
91
|
justify-content: flex-end;
|
|
82
|
-
ul,
|
|
92
|
+
ul,
|
|
93
|
+
li {
|
|
83
94
|
display: inline;
|
|
84
95
|
}
|
|
85
96
|
ul {
|
|
@@ -92,7 +103,8 @@
|
|
|
92
103
|
|
|
93
104
|
@include screen-tablet {
|
|
94
105
|
.nav {
|
|
95
|
-
&__sidebar,
|
|
106
|
+
&__sidebar,
|
|
107
|
+
&__topbar {
|
|
96
108
|
position: fixed;
|
|
97
109
|
background-color: colors.$darkBlue;
|
|
98
110
|
top: 0;
|
|
@@ -106,7 +118,8 @@
|
|
|
106
118
|
padding: 0em;
|
|
107
119
|
margin-top: 2rem;
|
|
108
120
|
}
|
|
109
|
-
ul,
|
|
121
|
+
ul,
|
|
122
|
+
li {
|
|
110
123
|
display: block;
|
|
111
124
|
}
|
|
112
125
|
&__close {
|
|
@@ -119,13 +132,21 @@
|
|
|
119
132
|
color: colors.$darkBeige;
|
|
120
133
|
}
|
|
121
134
|
}
|
|
122
|
-
|
|
135
|
+
|
|
136
|
+
&__sidebar {
|
|
137
|
+
top: 0;
|
|
138
|
+
left: 0;
|
|
139
|
+
&__item:first-child {
|
|
140
|
+
border-top: 1px solid colors.$mediumGrey;
|
|
141
|
+
}
|
|
142
|
+
}
|
|
143
|
+
|
|
123
144
|
&__topbar {
|
|
124
145
|
height: 100%;
|
|
125
146
|
&__item {
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
147
|
+
padding: 2em;
|
|
148
|
+
border-top: 1px solid colors.$mediumGrey;
|
|
149
|
+
}
|
|
129
150
|
}
|
|
130
151
|
}
|
|
131
152
|
}
|