@apptegy/nuxt-navigation 0.1.45 → 0.1.46-alpha.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/dist/module.json +1 -1
- package/dist/runtime/components/Nav/HelpArticles.vue +42 -36
- package/dist/runtime/components/Nav/Icons/ApptegyLogo.vue +14 -9
- package/dist/runtime/components/Nav/ImpersonateInfoPanel.vue +7 -7
- package/dist/runtime/components/Nav/Sidebar.vue +14 -11
- package/dist/runtime/components/Nav/SidebarItem.vue +2 -2
- package/dist/runtime/components/Nav/SidebarSection.vue +4 -4
- package/package.json +3 -3
package/dist/module.json
CHANGED
|
@@ -1,41 +1,37 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div class="help-btn-wrapper">
|
|
3
|
-
<
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
:
|
|
3
|
+
<button
|
|
4
|
+
v-if="schoolWebsite"
|
|
5
|
+
:id="'school-website'"
|
|
6
|
+
class="help-articles-btn"
|
|
7
|
+
:aria-label="$t('navigation.website')"
|
|
8
|
+
@click="goToWebsite"
|
|
8
9
|
>
|
|
9
|
-
<
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
class="help-btn-action"
|
|
14
|
-
>
|
|
15
|
-
{{ option.text }}
|
|
16
|
-
</button>
|
|
17
|
-
</div>
|
|
10
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
|
|
11
|
+
<path d="M4 8H6.64922C6.87629 8 7.0966 7.92272 7.27391 7.78087L11.3753 4.49976C11.7405 4.20758 12.2595 4.20758 12.6247 4.49976L16.7261 7.78087C16.9034 7.92272 17.1237 8 17.3508 8H20M4 18H20M5 10V16M19 10V16M9 11V15M12 11V15M15 11V15M12.5 8.5V8.5C12.2239 8.77614 11.7761 8.77614 11.5 8.5V8.5C11.2239 8.22386 11.2239 7.77614 11.5 7.5V7.5C11.7761 7.22386 12.2239 7.22386 12.5 7.5V7.5C12.7761 7.77614 12.7761 8.22386 12.5 8.5Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
|
|
12
|
+
</svg>
|
|
13
|
+
</button>
|
|
18
14
|
<button
|
|
15
|
+
v-if="showHelpArticles"
|
|
19
16
|
:id="!isDropdown && 'help-btn'"
|
|
20
17
|
:class="['help-articles-btn', !isDropdown && 'help-btn']"
|
|
21
18
|
:aria-label="isDropdown ? $t('navigation.helpCenter') : $t('navigation.helpArticles')"
|
|
22
19
|
@click="expandDropdown"
|
|
23
20
|
>
|
|
24
|
-
<svg width="
|
|
25
|
-
<path d="
|
|
26
|
-
|
|
27
|
-
|
|
21
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
|
|
22
|
+
<path d="M10 10C10 8.89543 10.8954 8 12 8C13.1046 8 14 8.89543 14 10C14 10.7571 13.5793 11.4159 12.959 11.7555C12.4745 12.0207 12 12.4477 12 13V14M12 16V17M12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
|
|
23
|
+
</svg>
|
|
24
|
+
</button>
|
|
25
|
+
<button
|
|
26
|
+
:id="!isDropdown && 'help-btn'"
|
|
27
|
+
:class="['help-articles-btn', !isDropdown && 'help-btn']"
|
|
28
|
+
:aria-label="$t('navigation.accountSettings')"
|
|
29
|
+
@click="goToSettings"
|
|
30
|
+
>
|
|
31
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
|
|
32
|
+
<path d="M17 18.3153L18.3487 16.958C18.5827 16.7213 18.6067 16.3487 18.4047 16.0833L17.4807 14.8713C17.6547 14.5393 17.798 14.1933 17.9087 13.8367L19.42 13.6387C19.752 13.5953 20 13.3127 20 12.978V11.022C20 10.6873 19.752 10.404 19.42 10.3613L17.9 10.162C17.784 9.796 17.6347 9.44133 17.4533 9.10267L18.3773 7.874C18.578 7.608 18.5513 7.23533 18.3153 7.00067L16.958 5.652C16.72 5.41667 16.3473 5.39333 16.084 5.59333L14.8473 6.536C14.5187 6.36533 14.178 6.22467 13.8267 6.116L13.6393 4.586C13.5987 4.25133 13.3153 4 12.978 4H11.022C10.6867 4 10.404 4.24867 10.3613 4.58067L10.1613 6.11733C9.79533 6.23067 9.442 6.37733 9.10333 6.55667L7.87733 5.624C7.612 5.422 7.23667 5.448 7.00067 5.68533L5.65267 7.042C5.416 7.28133 5.39333 7.658 5.6 7.92333L6.53267 9.11533C6.35133 9.45333 6.204 9.80533 6.08933 10.1693L4.58267 10.3607C4.24933 10.4033 4 10.686 4 11.022V12.978C4 13.3147 4.25067 13.5973 4.584 13.6393L6.07867 13.8253C6.192 14.1933 6.34067 14.55 6.52267 14.8933L5.61667 16.134C5.42267 16.4 5.45133 16.768 5.68533 17.0007L7.04333 18.348C7.27933 18.582 7.65 18.6073 7.91467 18.4073L9.13533 17.486C9.466 17.6593 9.81133 17.8007 10.166 17.9107L10.3607 19.4187C10.4033 19.7513 10.6867 20 11.022 20H12.978C13.312 20 13.5947 19.7527 13.6387 19.4213L13.84 17.9053C14.2027 17.7933 14.5533 17.6473 14.89 17.4687L16.1313 18.382C16.3987 18.5773 16.7667 18.5493 17 18.3153Z" stroke="currentColor"/>
|
|
33
|
+
<circle cx="12" cy="12" r="3" stroke="currentColor"/>
|
|
28
34
|
</svg>
|
|
29
|
-
<span v-if="expandedSidebar">
|
|
30
|
-
{{ isDropdown ? $t('navigation.helpCenter') : $t('navigation.helpArticles') }}
|
|
31
|
-
</span>
|
|
32
|
-
<img
|
|
33
|
-
v-if="isDropdown && !hasArticles"
|
|
34
|
-
class="caret-icon"
|
|
35
|
-
:class="{ collapse: !expanded }"
|
|
36
|
-
src="../../assets/img/navbar-up.svg"
|
|
37
|
-
alt=""
|
|
38
|
-
>
|
|
39
35
|
</button>
|
|
40
36
|
</div>
|
|
41
37
|
</template>
|
|
@@ -46,10 +42,16 @@ import { ref, computed, onMounted } from 'vue'
|
|
|
46
42
|
|
|
47
43
|
interface IHelpArticlesProps {
|
|
48
44
|
helpArticleOptions: Array<unknown>;
|
|
45
|
+
settingsRoute: string;
|
|
46
|
+
schoolWebsite: string;
|
|
47
|
+
showHelpArticles: boolean;
|
|
49
48
|
};
|
|
50
49
|
|
|
51
50
|
const props = withDefaults(defineProps<IHelpArticlesProps>(), {
|
|
52
51
|
helpArticleOptions: () => [],
|
|
52
|
+
settingsRoute: '',
|
|
53
|
+
schoolWebsite: '',
|
|
54
|
+
showHelpArticles: false,
|
|
53
55
|
})
|
|
54
56
|
|
|
55
57
|
const { state: expandedSidebar } = useSidebar();
|
|
@@ -71,24 +73,31 @@ function expandDropdown() {
|
|
|
71
73
|
expanded.value = !expanded.value;
|
|
72
74
|
};
|
|
73
75
|
|
|
76
|
+
function goToSettings() {
|
|
77
|
+
window.location.replace(`${props.settingsRoute}`);
|
|
78
|
+
};
|
|
79
|
+
|
|
80
|
+
function goToWebsite() {
|
|
81
|
+
window.open(`${props.schoolWebsite}`);
|
|
82
|
+
};
|
|
83
|
+
|
|
74
84
|
</script>
|
|
75
85
|
|
|
76
86
|
<style scoped>
|
|
77
87
|
.help-btn-wrapper {
|
|
78
|
-
box-shadow: inset 0px -1px 0px 0px var(--nav-border-colors, var(--purple-65));
|
|
79
88
|
display: flex;
|
|
80
|
-
flex-direction:
|
|
89
|
+
flex-direction: row;
|
|
81
90
|
align-items: center;
|
|
91
|
+
justify-content: flex-start;
|
|
82
92
|
width: 100%;
|
|
83
93
|
text-transform: uppercase;
|
|
84
94
|
}
|
|
85
95
|
.help-btn-wrapper .help-articles-btn {
|
|
86
96
|
cursor: pointer;
|
|
87
97
|
display: flex;
|
|
88
|
-
width: 100%;
|
|
89
98
|
align-items: center;
|
|
90
99
|
background: none;
|
|
91
|
-
padding:
|
|
100
|
+
padding: 10px 0px 10px 8px;
|
|
92
101
|
border: none;
|
|
93
102
|
text-transform: inherit;
|
|
94
103
|
}
|
|
@@ -104,7 +113,6 @@ function expandDropdown() {
|
|
|
104
113
|
}
|
|
105
114
|
.help-btn-wrapper .help-btn-actions {
|
|
106
115
|
visibility: hidden;
|
|
107
|
-
width: 100%;
|
|
108
116
|
max-height: 0px;
|
|
109
117
|
overflow-y: hidden;
|
|
110
118
|
transition: all 0.5s ease-in-out;
|
|
@@ -121,7 +129,6 @@ function expandDropdown() {
|
|
|
121
129
|
color: var(--nav-text-color, var(--primary-white));
|
|
122
130
|
cursor: pointer;
|
|
123
131
|
font-size: 14px;
|
|
124
|
-
width: 100%;
|
|
125
132
|
text-align: left;
|
|
126
133
|
position: relative;
|
|
127
134
|
padding: 6px 51px 6px 45px;
|
|
@@ -145,9 +152,8 @@ function expandDropdown() {
|
|
|
145
152
|
transform: rotate(0.5turn);
|
|
146
153
|
}
|
|
147
154
|
.help-btn-wrapper svg {
|
|
148
|
-
background: var(--nav-icon-background, rgb(80, 71, 100));
|
|
149
155
|
border-radius: 4px;
|
|
150
|
-
color: var(--nav-icon-color,
|
|
156
|
+
color: var(--nav-icon-color, #662E80);
|
|
151
157
|
}
|
|
152
158
|
.help-btn-wrapper span {
|
|
153
159
|
color: var(--nav-text-color, var(--primary-white));
|
|
@@ -1,13 +1,18 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<svg width="
|
|
3
|
-
<
|
|
4
|
-
<path d="
|
|
5
|
-
|
|
6
|
-
<
|
|
7
|
-
<path d="
|
|
8
|
-
<path d="
|
|
9
|
-
<path d="
|
|
10
|
-
<path d="
|
|
2
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="134" height="25" viewBox="0 0 134 25" fill="none">
|
|
3
|
+
<mask id="mask0_2059_16622" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="134" height="25">
|
|
4
|
+
<path d="M134 0H0V24.8166H134V0Z" fill="white"/>
|
|
5
|
+
</mask>
|
|
6
|
+
<g mask="url(#mask0_2059_16622)">
|
|
7
|
+
<path d="M51.0852 5.60941C51.7678 5.21888 52.63 5.00586 53.6359 5.00586C54.6418 5.00586 55.4681 5.18337 56.2584 5.57391C57.0488 5.96444 57.6954 6.46148 58.2702 7.13604C58.845 7.81059 59.2761 8.59166 59.5635 9.55024C59.8509 10.5088 59.9946 11.5384 59.9946 12.639C59.9946 13.7396 59.8509 14.8757 59.5276 15.7988C59.2402 16.7573 58.7732 17.5384 58.2343 18.213C57.6595 18.8875 57.0128 19.3846 56.2225 19.7396C55.4321 20.0946 54.5699 20.2721 53.6718 20.2721C52.7737 20.2721 51.8756 20.1301 51.0852 19.7396C51.0852 19.7396 50.3308 19.4201 49.4327 18.568H49.3608V24.781H45.6246V5.36089H49.2171V6.92302H49.289C49.289 6.92302 50.0075 6.17746 51.0493 5.57391L51.0852 5.60941ZM53.0611 17.2189C54.0311 17.2189 54.8214 16.8283 55.3962 16.0473C55.971 15.2662 56.2584 14.1656 56.2584 12.7455C56.2584 11.3254 56.0069 10.1893 55.4681 9.26621C54.9651 8.37864 54.1029 7.9171 52.9174 7.9171C51.7319 7.9171 51.8037 8.05912 51.3726 8.30764C50.9415 8.55616 50.5823 8.91119 50.3308 9.33722C50.0434 9.76326 49.8638 10.2603 49.7201 10.8638C49.6123 11.4674 49.5404 12.0709 49.5404 12.7455C49.5404 14.0946 49.8278 15.1952 50.4386 16.0118C51.0493 16.8283 51.9115 17.2189 53.0611 17.2189Z" fill="#503462"/>
|
|
8
|
+
<path d="M67.1796 5.60941C67.8622 5.21888 68.7244 5.00586 69.7303 5.00586C70.7362 5.00586 71.5624 5.18337 72.3528 5.57391C73.1431 5.96444 73.7898 6.46148 74.3646 7.13604C74.9394 7.81059 75.3705 8.59166 75.6579 9.55024C75.9453 10.5088 76.089 11.5384 76.089 12.639C76.089 13.7396 75.9453 14.8757 75.6219 15.7988C75.3345 16.7573 74.8675 17.5384 74.3286 18.213C73.7538 18.8875 73.1072 19.3846 72.3168 19.7396C71.5265 20.0946 70.6643 20.2721 69.7662 20.2721C68.8681 20.2721 67.9699 20.1301 67.1796 19.7396C67.1796 19.7396 66.4252 19.4201 65.527 18.568H65.4552V24.781H61.719V5.36089H65.3115V6.92302H65.3833C65.3833 6.92302 66.1018 6.17746 67.1437 5.57391L67.1796 5.60941ZM69.1914 17.2189C70.1614 17.2189 70.9517 16.8283 71.5265 16.0473C72.1013 15.2662 72.3887 14.1656 72.3887 12.7455C72.3887 11.3254 72.1372 10.1893 71.5983 9.26621C71.0954 8.37864 70.2332 7.9171 69.0477 7.9171C67.8622 7.9171 67.934 8.05912 67.5029 8.30764C67.0718 8.55616 66.7126 8.91119 66.4611 9.33722C66.1737 9.76326 65.9941 10.2603 65.8504 10.8638C65.7426 11.4674 65.6707 12.0709 65.6707 12.7455C65.6707 14.0946 65.9581 15.1952 66.5689 16.0118C67.1796 16.8283 68.0418 17.2189 69.1914 17.2189Z" fill="#503462"/>
|
|
9
|
+
<path d="M121.57 21.5857H122.504C123.294 21.5857 123.833 21.4082 124.157 21.0531C124.48 20.6981 124.66 20.2011 124.66 19.5975C124.66 18.994 124.66 19.207 124.588 18.9585C124.552 18.71 124.48 18.4614 124.408 18.1419C124.336 17.8579 124.193 17.5029 124.049 17.0768C123.905 16.6863 123.726 16.1892 123.51 15.6567L119.558 5.36084H123.654L125.809 11.8934C125.917 12.2484 126.025 12.5679 126.132 12.9585C126.24 13.3135 126.348 13.6685 126.42 13.9881C126.528 14.3431 126.635 14.6981 126.743 15.0531H126.815C126.887 14.6981 126.959 14.3431 127.067 13.9881C127.138 13.6685 127.246 13.3135 127.354 12.9585C127.462 12.6034 127.569 12.2484 127.677 11.8934L129.725 5.36084H133.641L128.539 20.2011C128.252 21.0176 127.965 21.6922 127.677 22.2602C127.39 22.8283 127.174 23.2543 126.779 23.6094C126.384 23.9644 125.917 24.2129 125.414 24.3549C124.875 24.4969 124.264 24.5679 123.51 24.5679H120.349L121.534 21.5502L121.57 21.5857Z" fill="#503462"/>
|
|
10
|
+
<path d="M98.2906 15.5501C98.075 16.0826 97.7517 16.5087 97.2847 16.8282C96.8177 17.1477 96.2069 17.3252 95.4525 17.3252C94.3388 17.3252 93.4766 17.0057 92.8659 16.3667C92.2552 15.7276 91.86 14.84 91.7163 13.7039H102.314C102.314 12.3903 102.17 11.2187 101.847 10.1536C101.524 9.08856 101.057 8.16548 100.446 7.38442C99.8354 6.60335 99.0809 5.9998 98.1828 5.60927C97.2847 5.18323 96.2429 4.97021 95.0573 4.97021C93.8718 4.97021 93.0096 5.18323 92.1474 5.57376C91.2493 5.9643 90.4949 6.49684 89.8482 7.1714C89.2016 7.84595 88.6986 8.66252 88.3753 9.5856C88.0161 10.5087 87.8364 11.5028 87.8364 12.6034C87.8364 13.7039 88.016 14.698 88.3394 15.6211C88.6627 16.5797 89.1656 17.3607 89.8123 18.0708C90.4589 18.7454 91.2493 19.3134 92.1833 19.7039C93.1174 20.0945 94.1951 20.3075 95.4166 20.3075C96.638 20.3075 97.1769 20.1655 97.9673 19.917C98.7217 19.6684 99.4043 19.3134 99.9431 18.8874C100.518 18.4613 100.949 17.9643 101.308 17.3607C101.56 16.9702 101.739 16.5442 101.883 16.1181L98.2187 15.5501H98.2906ZM92.83 8.80454C93.3689 8.23649 94.1592 7.98797 95.1651 7.98797C96.171 7.98797 96.7817 8.27199 97.3565 8.84004C97.9313 9.40809 98.2187 10.1536 98.2906 11.0767H91.7882C91.9678 10.1181 92.327 9.37258 92.83 8.80454Z" fill="#503462"/>
|
|
11
|
+
<path d="M110.182 5.0058C109.248 5.0058 108.385 5.18332 107.631 5.50284C106.877 5.82237 106.194 6.31941 105.619 6.92296C105.044 7.52651 104.613 8.30758 104.29 9.15965C103.967 10.0472 103.823 11.0058 103.823 12.0709C103.823 13.136 104.003 14.1301 104.362 14.9821C104.721 15.8342 105.224 16.5798 105.799 17.1478C106.41 17.7514 107.092 18.1774 107.847 18.4969C108.601 18.8165 109.427 18.9585 110.218 18.9585C110.218 18.9585 112.445 19.136 114.026 17.5739H114.098V18.852C114.098 20.8756 113.02 21.8697 110.828 21.8697C108.637 21.8697 109.248 21.7277 108.781 21.4082C108.35 21.1241 108.062 20.7691 107.918 20.3431L104.541 21.7632C104.937 22.4733 105.511 23.0768 106.23 23.5738C107.415 24.3904 109.176 24.781 111.188 24.781C113.199 24.781 113.092 24.6389 113.99 24.3904C114.888 24.1419 115.678 23.7159 116.289 23.1478C116.828 22.6508 117.151 22.0472 117.439 21.3372C117.726 20.6271 117.906 19.7395 117.906 18.7454V5.36083H114.169V6.67444H114.098C112.84 4.82829 110.038 4.9703 110.038 4.9703L110.182 5.0058ZM114.205 13.5265C114.062 13.9881 113.882 14.4141 113.595 14.7691C113.307 15.1241 112.948 15.4082 112.517 15.6212C112.086 15.8342 111.547 15.9407 110.936 15.9407C109.93 15.9407 109.14 15.5857 108.529 14.9111C107.918 14.2366 107.631 13.278 107.631 12.0354C107.631 10.7928 107.918 9.83421 108.529 9.15965C109.14 8.44959 109.93 8.09456 110.9 8.09456C111.87 8.09456 112.014 8.20107 112.445 8.41408C112.876 8.6271 113.235 8.91113 113.523 9.26616C113.81 9.62119 114.026 10.0472 114.169 10.5088C114.313 11.0058 114.385 11.5028 114.385 12.0354C114.385 12.5679 114.313 13.1005 114.169 13.562L114.205 13.5265Z" fill="#503462"/>
|
|
12
|
+
<path d="M79.2863 -0.000142112V5.2543H77.2026V8.52057H79.2863V16.0472C79.2863 16.0472 79.1426 19.0294 82.304 19.8105C84.7469 20.3786 87.4053 19.349 87.4053 19.349L86.0402 15.9052C86.0402 15.9052 83.0584 17.3608 83.0584 14.7336V8.48507H86.112L87.4053 5.21879H83.0943V-0.0356445H79.2863V-0.000142112Z" fill="#503462"/>
|
|
13
|
+
<path d="M43.1458 17.7512V10.4021C43.1458 8.69796 42.6788 7.38435 41.7088 6.46127C40.7389 5.5382 39.1582 5.07666 37.0027 5.07666C34.8472 5.07666 35.0268 5.21867 34.2364 5.46719C33.4461 5.71571 32.7994 6.07074 32.2965 6.49678C31.7935 6.92281 31.3984 7.41985 31.111 8.0234C31.0391 8.20092 30.9673 8.37843 30.8954 8.55595L33.949 9.83406H34.0927C34.1646 9.124 34.4161 8.62696 34.8472 8.30743C35.3142 7.9879 35.9968 7.81039 36.8949 7.81039C37.793 7.81039 38.3319 7.9524 38.7271 8.27193C39.1222 8.59145 39.3378 9.01749 39.3378 9.51453C39.3378 10.0116 39.0504 10.4376 38.4756 10.6151C37.9008 10.7926 37.0027 10.9702 35.7812 11.1477C34.9549 11.2542 34.2005 11.4317 33.482 11.6092C32.7635 11.8222 32.1528 12.0707 31.6139 12.4258C31.0751 12.7808 30.6799 13.2423 30.3566 13.7749C30.0692 14.3074 29.8895 14.982 29.8895 15.7631C29.8895 17.2187 30.3566 18.3193 31.3265 19.0648C32.2606 19.8104 33.5179 20.2009 34.9909 20.2009C34.9909 20.2009 35.9968 20.2009 36.8949 20.0589C38.0086 19.8459 39.0145 19.2778 39.6611 18.6388L39.8048 19.8814H43.541V19.7394C43.1818 19.4909 43.0381 18.8163 43.0381 17.7512H43.1458ZM39.5174 14.769C39.5174 15.124 39.4456 15.479 39.3019 15.7986C39.1582 16.1181 38.9426 16.4021 38.6193 16.6861C38.3319 16.9346 37.9726 17.1477 37.5415 17.2897C37.1104 17.4672 36.6075 17.5382 36.0686 17.5382C35.5297 17.5382 34.8472 17.3962 34.4161 17.1122C33.985 16.8281 33.8053 16.3666 33.8053 15.692C33.8053 15.0175 34.0568 14.5204 34.5598 14.2364C35.0627 13.9524 35.8171 13.6684 36.859 13.4554C37.3619 13.3489 37.8289 13.2423 38.3319 13.1003C38.8348 12.9938 39.23 12.8163 39.5893 12.6033V14.769H39.5174Z" fill="#503462"/>
|
|
14
|
+
<path d="M12.6456 0C5.64021 0 0 5.60947 0 12.497C0 19.3846 4.88579 23.432 10.5979 24.6746C10.7416 24.6746 10.8134 24.5325 10.7056 24.4615C7.07721 21.1953 4.49062 16.0118 4.38284 12.9231C4.38284 12.0355 4.59839 11.3254 4.99357 10.6154C5.74799 9.26627 6.61019 7.98816 7.32869 6.63905C8.11904 5.14793 8.69383 4.93491 10.2745 4.89941C11.8193 4.86391 13.4 4.89941 14.9448 4.89941C16.6692 4.89941 17.208 5.25444 18.0343 6.74556C18.8965 8.30769 19.6869 9.26627 20.5491 10.8284C21.1239 11.8935 21.0879 13.1716 20.4772 14.2012C19.7228 15.5148 18.0702 18.2485 17.9265 18.5325C17.208 19.9172 16.3818 20.2012 14.8729 20.2367C14.5496 20.2367 13.867 20.2367 13.5078 20.2367C12.6456 20.2367 11.8912 20.6272 11.3523 21.3728C10.4542 22.6864 11.7834 24.9231 13.4719 24.8166C20.082 24.426 25.2193 19.1716 25.2193 12.5325C25.2193 5.89349 19.5432 0.0355024 12.5737 0.0355024L12.6456 0Z" fill="#F5897F"/>
|
|
15
|
+
</g>
|
|
11
16
|
</svg>
|
|
12
17
|
</template>
|
|
13
18
|
<script setup lang="ts">
|
|
@@ -70,18 +70,18 @@ onMounted(() => {
|
|
|
70
70
|
cursor: pointer;
|
|
71
71
|
height: fit-content;
|
|
72
72
|
overflow: hidden;
|
|
73
|
-
background-color: var(--nav-background-color,
|
|
73
|
+
background-color: var(--nav-background-color, #FFF);
|
|
74
74
|
}
|
|
75
75
|
.a-nav-section.animated {
|
|
76
76
|
transition: overflow 0.5s ease-in-out;
|
|
77
77
|
}
|
|
78
78
|
.a-nav-section--title {
|
|
79
|
-
color: var(--nav-text-color,
|
|
79
|
+
color: var(--nav-text-color, #222222);
|
|
80
80
|
display: flex;
|
|
81
81
|
justify-content: space-between;
|
|
82
82
|
background: none;
|
|
83
83
|
border: none;
|
|
84
|
-
border-top: 1px var(--nav-border-colors,
|
|
84
|
+
border-top: 1px var(--nav-border-colors, #DFDFDF) solid;
|
|
85
85
|
padding: 0;
|
|
86
86
|
width: 100%;
|
|
87
87
|
cursor: pointer;
|
|
@@ -106,16 +106,16 @@ onMounted(() => {
|
|
|
106
106
|
padding: 12px 0;
|
|
107
107
|
}
|
|
108
108
|
.a-nav-section--title .a-nav-section-title-wrapper .user-grid .user-icon {
|
|
109
|
-
color: var(--nav-icon-color,
|
|
109
|
+
color: var(--nav-icon-color, #222222);
|
|
110
110
|
grid-row: 1/span 2;
|
|
111
|
-
background: var(--nav-icon-background,
|
|
111
|
+
background: var(--nav-icon-background, #FFF);
|
|
112
112
|
border-radius: 4px;
|
|
113
113
|
padding: 4px;
|
|
114
114
|
margin-right: auto;
|
|
115
115
|
margin-left: 16px;
|
|
116
116
|
}
|
|
117
117
|
.a-nav-section--title .a-nav-section-title-wrapper .user-grid .info {
|
|
118
|
-
color: var(--nav-text-color,
|
|
118
|
+
color: var(--nav-text-color, #222222);
|
|
119
119
|
margin: 0;
|
|
120
120
|
grid-row: 1;
|
|
121
121
|
grid-column: 2;
|
|
@@ -132,7 +132,7 @@ onMounted(() => {
|
|
|
132
132
|
grid-column: 2;
|
|
133
133
|
grid-row: 2;
|
|
134
134
|
margin-top: 4px;
|
|
135
|
-
color: var(--nav-text-color,
|
|
135
|
+
color: var(--nav-text-color, #222222);
|
|
136
136
|
font-size: 11px;
|
|
137
137
|
font-style: normal;
|
|
138
138
|
font-weight: 400;
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
<div class="navbar--logo">
|
|
24
24
|
<img v-if="brandLogo" :src="brandLogo" :alt="$t('navigation.brandLogoAlt')">
|
|
25
25
|
<component
|
|
26
|
-
:is="
|
|
26
|
+
:is="ApptegyLogo"
|
|
27
27
|
v-else
|
|
28
28
|
:alt="$t('navigation.brandLogoAlt')"
|
|
29
29
|
:use-light-logo="isAdmin || Object.values(getBrandingStyles).length === 0"
|
|
@@ -35,7 +35,6 @@
|
|
|
35
35
|
</div>
|
|
36
36
|
</slot>
|
|
37
37
|
</NuxtLink>
|
|
38
|
-
<NavSidebarToggle />
|
|
39
38
|
</div>
|
|
40
39
|
<slot name="switcher" />
|
|
41
40
|
</div>
|
|
@@ -49,15 +48,15 @@
|
|
|
49
48
|
<slot v-if="currentApplication === application.text" />
|
|
50
49
|
</NavSidebarSection>
|
|
51
50
|
</li>
|
|
52
|
-
<li>
|
|
53
|
-
<NavHelpArticles
|
|
54
|
-
v-if="showHelpArticles"
|
|
55
|
-
:help-article-options="helpArticleOptions"
|
|
56
|
-
/>
|
|
57
|
-
</li>
|
|
58
51
|
</ul>
|
|
59
52
|
</div>
|
|
60
53
|
<div class="navbar--footer">
|
|
54
|
+
<NavHelpArticles
|
|
55
|
+
:show-help-articles="showHelpArticles"
|
|
56
|
+
:help-article-options="helpArticleOptions"
|
|
57
|
+
:settings-route="settingsRoute"
|
|
58
|
+
:school-website="schoolWebsite"
|
|
59
|
+
/>
|
|
61
60
|
<NavImpersonateInfoPanel
|
|
62
61
|
v-if="impersonatedUser.show"
|
|
63
62
|
:impersonated-user="impersonatedUser"
|
|
@@ -102,6 +101,8 @@ interface ISidebarProps {
|
|
|
102
101
|
useApptegyLogo?: boolean;
|
|
103
102
|
fixed?: boolean;
|
|
104
103
|
isAdmin?: boolean;
|
|
104
|
+
settingsRoute: string;
|
|
105
|
+
schoolWebsite: string;
|
|
105
106
|
}
|
|
106
107
|
|
|
107
108
|
const props = withDefaults(defineProps<ISidebarProps>(), {
|
|
@@ -127,6 +128,8 @@ const props = withDefaults(defineProps<ISidebarProps>(), {
|
|
|
127
128
|
useApptegyLogo: false,
|
|
128
129
|
fixed: false,
|
|
129
130
|
isAdmin: false,
|
|
131
|
+
settingsRoute: '',
|
|
132
|
+
schoolWebsite: '',
|
|
130
133
|
});
|
|
131
134
|
|
|
132
135
|
const emit = defineEmits<{
|
|
@@ -165,7 +168,7 @@ function onHoverLeave() {
|
|
|
165
168
|
.navbar {
|
|
166
169
|
grid-area: navsidebar;
|
|
167
170
|
font: var(--font-regular);
|
|
168
|
-
color: var(--nav-text-color,
|
|
171
|
+
color: var(--nav-text-color, #646464);
|
|
169
172
|
transition: width 0.3s ease;
|
|
170
173
|
height: 100%;
|
|
171
174
|
overflow-y: auto;
|
|
@@ -185,7 +188,7 @@ function onHoverLeave() {
|
|
|
185
188
|
.navbar--wrapper {
|
|
186
189
|
display: grid;
|
|
187
190
|
grid-template-rows: 0fr auto 0fr;
|
|
188
|
-
background-color: var(--nav-background-color,
|
|
191
|
+
background-color: var(--nav-background-color, #FFF);
|
|
189
192
|
height: 100%;
|
|
190
193
|
overflow-y: auto;
|
|
191
194
|
}
|
|
@@ -199,7 +202,7 @@ function onHoverLeave() {
|
|
|
199
202
|
z-index: 10;
|
|
200
203
|
}
|
|
201
204
|
.navbar--header {
|
|
202
|
-
border-bottom: 1px solid var(--nav-border-colors,
|
|
205
|
+
border-bottom: 1px solid var(--nav-border-colors, #DFDFDF);
|
|
203
206
|
}
|
|
204
207
|
.navbar--header .header-actions {
|
|
205
208
|
padding: 12px 16px;
|
|
@@ -40,14 +40,14 @@ const component = computed(()=> props.as || resolveComponent("NuxtLink"));
|
|
|
40
40
|
box-shadow: inset 0 0 0px 4px var(--primary-white);
|
|
41
41
|
}
|
|
42
42
|
.a-navbar-item.active, .a-navbar-item.nuxt-link-exact-active, .a-navbar-item.router-link-exact-active {
|
|
43
|
-
background-color: var(--nav-icon-background,
|
|
43
|
+
background-color: var(--nav-icon-background, #F7F5F9);
|
|
44
44
|
font-weight: 500;
|
|
45
45
|
}
|
|
46
46
|
.a-navbar-item.active svg path, .a-navbar-item.nuxt-link-exact-active svg path, .a-navbar-item.router-link-exact-active svg path {
|
|
47
47
|
stroke-width: 1.5px;
|
|
48
48
|
}
|
|
49
49
|
.a-navbar-item:hover {
|
|
50
|
-
background-color: var(--nav-icon-background,
|
|
50
|
+
background-color: var(--nav-icon-background, #F7F5F9);
|
|
51
51
|
}
|
|
52
52
|
.a-navbar-item:focus-visible {
|
|
53
53
|
outline: var(--orange) auto 2px;
|
|
@@ -2,7 +2,6 @@
|
|
|
2
2
|
<template>
|
|
3
3
|
<div class="a-nav-section" :class="{ active }">
|
|
4
4
|
<NuxtLink class="a-nav-section--link" :to="active ? '' : application.url" :aria-label="appText">
|
|
5
|
-
<svg :class="{ active }" width="32" height="32" viewBox="0 0 32 32" aria-hidden="true" v-html="icons[application.text as keyof typeof icons]"/>
|
|
6
5
|
<span v-if="expanded">{{ appText }}</span>
|
|
7
6
|
<a-icon v-if="expanded && active" :class="['caret-icon', { 'collapse': !isOpen }]" icon="16:carret-up" @click="isOpen = !isOpen" />
|
|
8
7
|
</NuxtLink>
|
|
@@ -33,11 +32,11 @@ const isOpen = ref(true);
|
|
|
33
32
|
|
|
34
33
|
<style scoped>
|
|
35
34
|
.a-nav-section {
|
|
36
|
-
box-shadow: inset 0px -1px 0px 0px var(--nav-icon-background,
|
|
35
|
+
box-shadow: inset 0px -1px 0px 0px var(--nav-icon-background, #DFDFDF);
|
|
37
36
|
min-height: 48px;
|
|
38
37
|
}
|
|
39
38
|
.a-nav-section.active {
|
|
40
|
-
box-shadow: inset 0px -1px 0px 0px var(--nav-icon-background,
|
|
39
|
+
box-shadow: inset 0px -1px 0px 0px var(--nav-icon-background, #DFDFDF);
|
|
41
40
|
}
|
|
42
41
|
.a-nav-section--content {
|
|
43
42
|
display: flex;
|
|
@@ -63,7 +62,7 @@ const isOpen = ref(true);
|
|
|
63
62
|
user-select: none;
|
|
64
63
|
}
|
|
65
64
|
.a-nav-section--link svg:first-child {
|
|
66
|
-
background: var(--nav-icon-background,
|
|
65
|
+
background: var(--nav-icon-background, #DFDFDF);
|
|
67
66
|
color: var(--nav-icon-color, var(--eggplant-30));
|
|
68
67
|
border-radius: 4px;
|
|
69
68
|
min-width: 32px;
|
|
@@ -88,6 +87,7 @@ const isOpen = ref(true);
|
|
|
88
87
|
width: inherit;
|
|
89
88
|
}
|
|
90
89
|
.a-nav-section--link .caret-icon {
|
|
90
|
+
cursor: pointer;
|
|
91
91
|
font-size: 24px;
|
|
92
92
|
transition: transform 0.2s ease-in-out;
|
|
93
93
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@apptegy/nuxt-navigation",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.46-alpha.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"exports": {
|
|
6
6
|
".": {
|
|
@@ -42,10 +42,10 @@
|
|
|
42
42
|
"eslint": "^9.25.1",
|
|
43
43
|
"nuxt": "^3.17.0",
|
|
44
44
|
"sass": "^1.87.0",
|
|
45
|
-
"typescript": "
|
|
45
|
+
"typescript": "~5.6",
|
|
46
46
|
"vitest": "^3.1.2",
|
|
47
47
|
"vue": "^3.5.13",
|
|
48
48
|
"vue-tsc": "^2.2.10"
|
|
49
49
|
},
|
|
50
|
-
"gitHead": "
|
|
50
|
+
"gitHead": "10bbb0c9c99365d4b0c2ab37b091913bd0af4212"
|
|
51
51
|
}
|