@apptegy/nuxt-navigation 0.1.36 → 0.1.38
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/dist/module.json +1 -1
- package/dist/runtime/components/Nav/Sidebar.vue +95 -70
- package/package.json +17 -16
package/dist/module.json
CHANGED
|
@@ -15,61 +15,63 @@
|
|
|
15
15
|
>
|
|
16
16
|
{{ $t('navigation.skipToContent') }}
|
|
17
17
|
</a>
|
|
18
|
-
<div class="navbar--
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
<
|
|
22
|
-
|
|
23
|
-
<
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
<div
|
|
31
|
-
|
|
18
|
+
<div :class="['navbar--wrapper', fixed && 'fixed']" >
|
|
19
|
+
<div class="navbar--header">
|
|
20
|
+
<div class="header-actions">
|
|
21
|
+
<NuxtLink v-if="expanded" class="no-link-style" :to="homepageUrl">
|
|
22
|
+
<slot name="logo">
|
|
23
|
+
<div class="navbar--logo">
|
|
24
|
+
<img v-if="brandLogo" :src="brandLogo" :alt="$t('navigation.brandLogoAlt')">
|
|
25
|
+
<component
|
|
26
|
+
:is="useApptegyLogo ? ApptegyLogo : ThrillshareLogo"
|
|
27
|
+
v-else
|
|
28
|
+
:alt="$t('navigation.brandLogoAlt')"
|
|
29
|
+
/>
|
|
30
|
+
<div v-if="!brand?.hide_school_name">
|
|
31
|
+
<div class="school-name"> {{ brand?.school_name }} </div>
|
|
32
|
+
<div v-if="brand?.school_tag_line" class="school-tag">{{ brand.school_tag_line }}</div>
|
|
32
33
|
</div>
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
34
|
+
</div>
|
|
35
|
+
</slot>
|
|
36
|
+
</NuxtLink>
|
|
37
|
+
<NavSidebarToggle />
|
|
38
|
+
</div>
|
|
39
|
+
<slot name="switcher" />
|
|
40
|
+
</div>
|
|
41
|
+
<div class="navbar--content">
|
|
42
|
+
<ul class="navbar-applications">
|
|
43
|
+
<li v-for="application of applications" :key="application.id">
|
|
44
|
+
<NavSidebarSection
|
|
45
|
+
:application="application"
|
|
46
|
+
:active="currentApplication === application.text"
|
|
47
|
+
>
|
|
48
|
+
<slot v-if="currentApplication === application.text" />
|
|
49
|
+
</NavSidebarSection>
|
|
50
|
+
</li>
|
|
51
|
+
<li>
|
|
52
|
+
<NavHelpArticles
|
|
53
|
+
v-if="showHelpArticles"
|
|
54
|
+
:help-article-options="helpArticleOptions"
|
|
55
|
+
/>
|
|
56
|
+
</li>
|
|
57
|
+
</ul>
|
|
58
|
+
</div>
|
|
59
|
+
<div class="navbar--footer">
|
|
60
|
+
<NavImpersonateInfoPanel
|
|
61
|
+
v-if="impersonatedUser.show"
|
|
62
|
+
:impersonated-user="impersonatedUser"
|
|
54
63
|
/>
|
|
55
|
-
</li>
|
|
56
|
-
</ul>
|
|
57
|
-
</div>
|
|
58
|
-
<div class="navbar--footer">
|
|
59
|
-
<NavImpersonateInfoPanel
|
|
60
|
-
v-if="impersonatedUser.show"
|
|
61
|
-
:impersonated-user="impersonatedUser"
|
|
62
|
-
/>
|
|
63
64
|
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
65
|
+
<slot name="logo">
|
|
66
|
+
<template v-if="brand">
|
|
67
|
+
<NuxtLink v-if="expanded ? logo.src : logo.iconSrc" :to="homepageUrl">
|
|
68
|
+
<div class="navbar--footer-logo">
|
|
69
|
+
<img :src="expanded ? logo.src : logo.iconSrc" :alt="logo.alt || $t('navigation.logoAlt')">
|
|
70
|
+
</div>
|
|
71
|
+
</NuxtLink>
|
|
72
|
+
</template>
|
|
73
|
+
</slot>
|
|
74
|
+
</div>
|
|
73
75
|
</div>
|
|
74
76
|
</nav>
|
|
75
77
|
</template>
|
|
@@ -97,6 +99,7 @@ interface ISidebarProps {
|
|
|
97
99
|
logo?: ILogo;
|
|
98
100
|
skipToContent: string;
|
|
99
101
|
useApptegyLogo?: boolean;
|
|
102
|
+
fixed?: boolean;
|
|
100
103
|
}
|
|
101
104
|
|
|
102
105
|
const props = withDefaults(defineProps<ISidebarProps>(), {
|
|
@@ -120,6 +123,7 @@ const props = withDefaults(defineProps<ISidebarProps>(), {
|
|
|
120
123
|
skipToContent: '#main-content-section',
|
|
121
124
|
clientId: undefined,
|
|
122
125
|
useApptegyLogo: false,
|
|
126
|
+
fixed: false,
|
|
123
127
|
});
|
|
124
128
|
|
|
125
129
|
const emit = defineEmits<{
|
|
@@ -157,44 +161,46 @@ function onHoverLeave() {
|
|
|
157
161
|
<style scoped>
|
|
158
162
|
.navbar {
|
|
159
163
|
grid-area: navsidebar;
|
|
160
|
-
display: grid;
|
|
161
|
-
grid-template-rows: 0fr auto 0fr;
|
|
162
164
|
font: var(--font-regular);
|
|
163
|
-
background-color: var(--nav-background-color, var(--purple-70));
|
|
164
165
|
color: var(--nav-text-color, var(--primary-white));
|
|
165
|
-
transition: width 0.3s ease
|
|
166
|
+
transition: width 0.3s ease;
|
|
166
167
|
height: 100%;
|
|
167
168
|
overflow-y: auto;
|
|
168
169
|
width: 64px;
|
|
170
|
+
position: relative;
|
|
169
171
|
}
|
|
170
172
|
.navbar a:focus-visible {
|
|
171
173
|
outline: var(--orange) auto 2px;
|
|
172
174
|
outline-offset: 0px;
|
|
173
175
|
box-shadow: inset 0 0 0px 4px var(--primary-white);
|
|
174
176
|
}
|
|
175
|
-
.navbar
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
177
|
+
.navbar--wrapper {
|
|
178
|
+
display: grid;
|
|
179
|
+
grid-template-rows: 0fr auto 0fr;
|
|
180
|
+
background-color: var(--nav-background-color, var(--purple-70));
|
|
181
|
+
height: 100%;
|
|
182
|
+
overflow-y: auto;
|
|
179
183
|
}
|
|
180
|
-
.navbar.
|
|
181
|
-
|
|
184
|
+
.navbar--wrapper.fixed {
|
|
185
|
+
position: fixed;
|
|
186
|
+
top: 0;
|
|
187
|
+
left: 0;
|
|
188
|
+
bottom: 0;
|
|
189
|
+
height: unset;
|
|
190
|
+
overflow-y: unset;
|
|
191
|
+
z-index: 10;
|
|
182
192
|
}
|
|
183
193
|
.navbar--header {
|
|
184
194
|
border-bottom: 1px solid var(--nav-border-colors, var(--purple-65));
|
|
185
|
-
padding: 0px 16px;
|
|
186
195
|
}
|
|
187
196
|
.navbar--header .header-actions {
|
|
188
|
-
padding: 12px
|
|
197
|
+
padding: 12px 16px;
|
|
189
198
|
display: inline-flex;
|
|
190
199
|
align-items: center;
|
|
191
|
-
width:
|
|
192
|
-
height: 64px;
|
|
200
|
+
width: 64px;
|
|
201
|
+
min-height: 64px;
|
|
193
202
|
justify-content: space-between;
|
|
194
|
-
|
|
195
|
-
.navbar .no-link-style {
|
|
196
|
-
text-decoration: none;
|
|
197
|
-
color: inherit;
|
|
203
|
+
box-sizing: border-box;
|
|
198
204
|
}
|
|
199
205
|
.navbar--logo {
|
|
200
206
|
display: flex;
|
|
@@ -205,11 +211,15 @@ function onHoverLeave() {
|
|
|
205
211
|
font-size: 16px;
|
|
206
212
|
font-style: normal;
|
|
207
213
|
font-weight: 700;
|
|
214
|
+
overflow-wrap: break-word;
|
|
215
|
+
word-break: break-word;
|
|
208
216
|
}
|
|
209
217
|
.navbar--logo .school-tag {
|
|
210
218
|
font-size: 14px;
|
|
211
219
|
font-style: normal;
|
|
212
220
|
font-weight: 400;
|
|
221
|
+
overflow-wrap: break-word;
|
|
222
|
+
word-break: break-word;
|
|
213
223
|
}
|
|
214
224
|
.navbar--logo img {
|
|
215
225
|
display: inline;
|
|
@@ -239,6 +249,16 @@ function onHoverLeave() {
|
|
|
239
249
|
height: 32px;
|
|
240
250
|
width: clamp(0px, 100%, 180px);
|
|
241
251
|
}
|
|
252
|
+
.navbar.expanded {
|
|
253
|
+
transition: width 0.3s ease;
|
|
254
|
+
width: 264px;
|
|
255
|
+
}
|
|
256
|
+
.navbar.expanded .navbar--content ul {
|
|
257
|
+
width: 264px;
|
|
258
|
+
}
|
|
259
|
+
.navbar.expanded .navbar--header .header-actions {
|
|
260
|
+
width: 264px;
|
|
261
|
+
}
|
|
242
262
|
.navbar .skip-to-content {
|
|
243
263
|
overflow: hidden;
|
|
244
264
|
padding: 16px 24px 14px;
|
|
@@ -265,4 +285,9 @@ function onHoverLeave() {
|
|
|
265
285
|
outline-offset: 0px;
|
|
266
286
|
box-shadow: inset 0 0 0px 4px var(--primary-white);
|
|
267
287
|
}
|
|
288
|
+
.navbar .no-link-style {
|
|
289
|
+
text-decoration: none;
|
|
290
|
+
color: inherit;
|
|
291
|
+
max-width: 200px;
|
|
292
|
+
}
|
|
268
293
|
</style>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@apptegy/nuxt-navigation",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.38",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"exports": {
|
|
6
6
|
".": {
|
|
@@ -26,25 +26,26 @@
|
|
|
26
26
|
"test:types": "vue-tsc --noEmit && cd playground && vue-tsc --noEmit"
|
|
27
27
|
},
|
|
28
28
|
"dependencies": {
|
|
29
|
-
"@apptegy/nuxt-intl": "
|
|
30
|
-
"@nuxt/kit": "^3.
|
|
31
|
-
"@vueuse/components": "12.
|
|
29
|
+
"@apptegy/nuxt-intl": "2.1.2",
|
|
30
|
+
"@nuxt/kit": "^3.16.1",
|
|
31
|
+
"@vueuse/components": "12.8.2",
|
|
32
32
|
"lodash": "^4.17.21"
|
|
33
33
|
},
|
|
34
34
|
"devDependencies": {
|
|
35
|
-
"@nuxt/devtools": "^2.
|
|
36
|
-
"@nuxt/eslint-config": "^1.0
|
|
35
|
+
"@nuxt/devtools": "^2.3.1",
|
|
36
|
+
"@nuxt/eslint-config": "^1.2.0",
|
|
37
37
|
"@nuxt/module-builder": "^0.8.4",
|
|
38
|
-
"@nuxt/schema": "^3.
|
|
39
|
-
"@nuxt/test-utils": "^3.
|
|
40
|
-
"@types/node": "^20.17.
|
|
38
|
+
"@nuxt/schema": "^3.16.1",
|
|
39
|
+
"@nuxt/test-utils": "^3.17.2",
|
|
40
|
+
"@types/node": "^20.17.24",
|
|
41
41
|
"changelogen": "^0.5.7",
|
|
42
|
-
"eslint": "^9.
|
|
43
|
-
"nuxt": "^3.
|
|
44
|
-
"sass": "^1.
|
|
45
|
-
"typescript": "^5.
|
|
46
|
-
"vitest": "^
|
|
42
|
+
"eslint": "^9.22.0",
|
|
43
|
+
"nuxt": "^3.16.1",
|
|
44
|
+
"sass": "^1.86.0",
|
|
45
|
+
"typescript": "^5.8.2",
|
|
46
|
+
"vitest": "^3.0.9",
|
|
47
47
|
"vue": "^3.5.13",
|
|
48
|
-
"vue-tsc": "^2.2.
|
|
49
|
-
}
|
|
48
|
+
"vue-tsc": "^2.2.8"
|
|
49
|
+
},
|
|
50
|
+
"gitHead": "d51c44c409a56ebbb598a6dc6bd26636d8a146fc"
|
|
50
51
|
}
|