Skip to content

Commit cd20fe0

Browse files
KreezagKreezag
committed
[#47] create settings for navbar locking
1 parent 075b083 commit cd20fe0

File tree

10 files changed

+271
-124
lines changed

10 files changed

+271
-124
lines changed

‎assets/mixins.scss‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,12 @@
77
}
88

99
@mixin layout-head {
10-
@apply left-10 md:left-14 lg:left-16 h-12 right-0 fixed justify-between border-b border-gray-200 dark:border-gray-700 px-4 bg-white dark:bg-gray-800 z-50;
10+
@apply left-10 md:left-14 lg:left-16 h-12 right-0 justify-between border-b border-gray-200 dark:border-gray-700 px-4 bg-white dark:bg-gray-800 z-50;
11+
@apply absolute;
12+
13+
html.navbar-fixed & {
14+
@apply fixed;
15+
}
1116
}
1217

1318
@mixin layout-body {

‎components/IconSvg/IconSvg.vue‎

Lines changed: 73 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -65,19 +65,19 @@
6565
xmlns="http://www.w3.org/2000/svg"
6666
viewBox="0 0 489.8 489.8"
6767
>
68-
<circle cx="245" cy="453.9" r="26.8"/>
69-
<circle cx="422.8" cy="453.9" r="26.8"/>
70-
<circle cx="67" cy="453.9" r="26.8"/>
68+
<circle cx="245" cy="453.9" r="26.8" />
69+
<circle cx="422.8" cy="453.9" r="26.8" />
70+
<circle cx="67" cy="453.9" r="26.8" />
7171
<path
7272
d="M443 31c0-17-14-31-31-31H78C61 0 47 14 47 31v69c0 8 4 15 9 21-5 6-9 13-9 21v70c0 8 4 15 9 21-5 5-9 13-9 21v69c0 17 14 31 31 31h334c17 0 31-14 31-31v-69c0-8-3-16-9-21 6-6 9-13 9-22v-69c0-8-3-16-9-21 6-6 9-13 9-21V31zM65 31c0-7 6-13 12-13h335c7 0 13 6 13 13v69c0 6-6 12-13 12H78c-7 0-13-5-13-12V31zm360 111v70c0 6-6 12-13 12H78c-7 0-13-6-13-12v-70c0-6 6-12 13-12h334c7 0 13 6 13 12zm0 181c0 7-6 13-13 13H78c-7 0-13-6-13-13v-69c0-7 6-12 13-12h334c7 0 13 5 13 12v69z"
7373
/>
74-
<path d="M241 74h113c5 0 9-4 9-9s-4-9-9-9H241c-5 0-9 4-9 9s4 9 9 9z"/>
75-
<circle cx="148.8" cy="65.1" r="10.8"/>
74+
<path d="M241 74h113c5 0 9-4 9-9s-4-9-9-9H241c-5 0-9 4-9 9s4 9 9 9z" />
75+
<circle cx="148.8" cy="65.1" r="10.8" />
7676
<path
7777
d="M241 186h113c5 0 9-4 9-9s-4-9-9-9H241c-5 0-9 4-9 9s4 9 9 9zM354 280H241c-5 0-9 4-9 9s4 9 9 9h113c5 0 9-4 9-9s-4-9-9-9z"
7878
/>
79-
<circle cx="148.8" cy="177" r="10.8"/>
80-
<circle cx="148.8" cy="288.9" r="10.8"/>
79+
<circle cx="148.8" cy="177" r="10.8" />
80+
<circle cx="148.8" cy="288.9" r="10.8" />
8181
<path
8282
d="M423 418c-17 0-31 11-35 27H280c-4-13-13-22-26-26v-28c0-5-4-9-9-9s-9 4-9 9v28c-13 3-22 13-26 26H102a36 36 0 100 18h108a36 36 0 0070 0h108a36 36 0 1035-45zM67 472a18 18 0 010-36 18 18 0 010 36zm178 0a18 18 0 010-36 18 18 0 010 36zm178 0a18 18 0 010-36 18 18 0 010 36z"
8383
/>
@@ -143,7 +143,7 @@
143143
xmlns="http://www.w3.org/2000/svg"
144144
viewBox="0 0 12 12"
145145
>
146-
<path d="M12 6c0 .6-.4 1-1 1H1a1 1 0 0 1 0-2h10c.6 0 1 .4 1 1Z"/>
146+
<path d="M12 6c0 .6-.4 1-1 1H1a1 1 0 0 1 0-2h10c.6 0 1 .4 1 1Z" />
147147
</svg>
148148

149149
<svg
@@ -163,8 +163,8 @@
163163
xmlns="http://www.w3.org/2000/svg"
164164
viewBox="0 0 12 12"
165165
>
166-
<path d="M6 0c.6 0 1 .4 1 1v10a1 1 0 1 1-2 0V1c0-.6.4-1 1-1Z"/>
167-
<path d="M12 6c0 .6-.4 1-1 1H1a1 1 0 0 1 0-2h10c.6 0 1 .4 1 1Z"/>
166+
<path d="M6 0c.6 0 1 .4 1 1v10a1 1 0 1 1-2 0V1c0-.6.4-1 1-1Z" />
167+
<path d="M12 6c0 .6-.4 1-1 1H1a1 1 0 0 1 0-2h10c.6 0 1 .4 1 1Z" />
168168
</svg>
169169

170170
<svg
@@ -346,7 +346,7 @@
346346
y2="30"
347347
gradientUnits="userSpaceOnUse"
348348
>
349-
<stop class="transition-all duration-200" stop-color="#FACC15"/>
349+
<stop class="transition-all duration-200" stop-color="#FACC15" />
350350
<stop
351351
class="transition-all duration-200"
352352
offset="1"
@@ -377,7 +377,7 @@
377377
<path
378378
d="M128 406c4 0 8-4 8-8V124a8 8 0 0 0-15 0v274c0 4 3 8 7 8zM384 264c-4 0-7 3-7 7v204c0 12-11 22-23 22H158c-12 0-22-10-22-22v-47a8 8 0 0 0-15 0v47c0 20 16 37 37 37h196c21 0 38-17 38-37V271c0-4-4-7-8-7zM354 0H158c-21 0-37 17-37 38v56a8 8 0 0 0 15 0V38c0-13 10-23 22-23h31c8 15 24 25 41 25h52c17 0 33-10 41-25h31c12 0 23 10 23 23v203a8 8 0 0 0 15 0V38c0-21-17-38-38-38zm-72 25h-52c-9 0-17-4-23-10h98c-6 6-14 10-23 10z"
379379
/>
380-
<path d="M287 478a8 8 0 0 0 0-15h-62a8 8 0 0 0 0 15h62z"/>
380+
<path d="M287 478a8 8 0 0 0 0-15h-62a8 8 0 0 0 0 15h62z" />
381381
</svg>
382382

383383
<svg
@@ -391,7 +391,7 @@
391391
<path
392392
d="M90 61v284a8 8 0 0 0 15 0V69h302v103a8 8 0 0 0 15 0V61c0-4-3-7-7-7H97c-4 0-7 3-7 7zM90 432c0 4 3 8 7 8h318c4 0 7-4 7-8V202a8 8 0 0 0-15 0v223H105v-50a8 8 0 0 0-15 0v57zM233 467a23 23 0 1 0 46-1 23 23 0 0 0-46 1zm31 0a8 8 0 1 1-16 0 8 8 0 0 1 16 0zM288 42a8 8 0 0 0 0-15h-34a8 8 0 0 0 0 15h34z"
393393
/>
394-
<circle cx="225.6" cy="34.3" r="7.5"/>
394+
<circle cx="225.6" cy="34.3" r="7.5" />
395395
</svg>
396396

397397
<svg
@@ -422,20 +422,70 @@
422422

423423
<svg
424424
v-if="name === 'http-dumps'"
425-
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 22">
426-
<path fill-rule="evenodd" clip-rule="evenodd"
427-
d="M5 0a4 4 0 0 0-4 4v11.27A2 2 0 0 0 0 17v2a3 3 0 0 0 3 3h20a3 3 0 0 0 3-3v-2a2 2 0 0 0-1-1.73V4a4 4 0 0 0-4-4H5Zm18 15V4a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v11h5.5l2 1.5H15l2.25-1.5H23Zm-6.9 3.16L17.87 17H24v2a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1v-2h5.83l1.47 1.1.53.4h5.77l.5-.34Zm3.02-11.35h-2.18v4.38h.87V9.88h1.32A.88.88 0 0 0 20 9V7.69a.88.88 0 0 0-.88-.88ZM17.82 9V7.69h1.3V9h-1.3Zm-6.57-1.31h-.88V6.8H13v.88h-.88v3.5h-.87v-3.5Zm4.81-.88h-2.62v.88h.87v3.5h.88v-3.5h.87V6.8ZM8.63 8.56V6.81h.87v4.38h-.88V9.44h-1.3v1.75h-.88V6.8h.87v1.75h1.32Z"/>
425+
xmlns="http://www.w3.org/2000/svg"
426+
viewBox="0 0 26 22"
427+
>
428+
<path
429+
fill-rule="evenodd"
430+
clip-rule="evenodd"
431+
d="M5 0a4 4 0 0 0-4 4v11.27A2 2 0 0 0 0 17v2a3 3 0 0 0 3 3h20a3 3 0 0 0 3-3v-2a2 2 0 0 0-1-1.73V4a4 4 0 0 0-4-4H5Zm18 15V4a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v11h5.5l2 1.5H15l2.25-1.5H23Zm-6.9 3.16L17.87 17H24v2a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1v-2h5.83l1.47 1.1.53.4h5.77l.5-.34Zm3.02-11.35h-2.18v4.38h.87V9.88h1.32A.88.88 0 0 0 20 9V7.69a.88.88 0 0 0-.88-.88ZM17.82 9V7.69h1.3V9h-1.3Zm-6.57-1.31h-.88V6.8H13v.88h-.88v3.5h-.87v-3.5Zm4.81-.88h-2.62v.88h.87v3.5h.88v-3.5h.87V6.8ZM8.63 8.56V6.81h.87v4.38h-.88V9.44h-1.3v1.75h-.88V6.8h.87v1.75h1.32Z"
432+
/>
428433
</svg>
429434
<svg
430435
v-if="name === 'collapsed'"
431-
viewBox="0 0 16 16" fill="currentColor" height="100%" width="100%">
432-
<path d="M14,11.75a.74.74,0,0,1-.53-.22L8,6.06,2.53,11.53a.75.75,0,0,1-1.06-1.06l6-6a.75.75,0,0,1,1.06,0l6,6a.75.75,0,0,1,0,1.06A.74.74,0,0,1,14,11.75Z"></path>
436+
viewBox="0 0 16 16"
437+
fill="currentColor"
438+
height="100%"
439+
width="100%"
440+
>
441+
<path
442+
d="M14,11.75a.74.74,0,0,1-.53-.22L8,6.06,2.53,11.53a.75.75,0,0,1-1.06-1.06l6-6a.75.75,0,0,1,1.06,0l6,6a.75.75,0,0,1,0,1.06A.74.74,0,0,1,14,11.75Z"
443+
></path>
444+
</svg>
445+
446+
<svg
447+
v-if="name === 'lock'"
448+
width="24"
449+
height="24"
450+
viewBox="0 0 24 24"
451+
stroke-width="2"
452+
stroke="currentColor"
453+
fill="none"
454+
stroke-linecap="round"
455+
stroke-linejoin="round"
456+
>
457+
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
458+
<path
459+
d="M5 13a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v6a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-6z"
460+
/>
461+
<path d="M11 16a1 1 0 1 0 2 0a1 1 0 0 0 -2 0" />
462+
<path d="M8 11v-4a4 4 0 1 1 8 0v4" />
463+
</svg>
464+
465+
<svg
466+
v-if="name === 'lock-off'"
467+
width="24"
468+
height="24"
469+
viewBox="0 0 24 24"
470+
stroke-width="2"
471+
stroke="currentColor"
472+
fill="none"
473+
stroke-linecap="round"
474+
stroke-linejoin="round"
475+
>
476+
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
477+
<path
478+
d="M15 11h2a2 2 0 0 1 2 2v2m0 4a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-6a2 2 0 0 1 2 -2h4"
479+
/>
480+
<path d="M11 16a1 1 0 1 0 2 0a1 1 0 0 0 -2 0" />
481+
<path d="M8 11v-3m.719 -3.289a4 4 0 0 1 7.281 2.289v4" />
482+
<path d="M3 3l18 18" />
433483
</svg>
434484
</div>
435485
</template>
436486

437487
<script lang="ts">
438-
import {defineComponent} from "vue";
488+
import { defineComponent } from "vue";
439489
440490
export default defineComponent({
441491
props: {
@@ -451,5 +501,9 @@ export default defineComponent({
451501
<style lang="scss" scoped>
452502
.icon-svg {
453503
@apply fill-current;
504+
505+
svg {
506+
@apply w-full h-full;
507+
}
454508
}
455509
</style>

‎components/IconSvg/lock-off.svg‎

Lines changed: 9 additions & 0 deletions
Loading

‎components/IconSvg/lock.svg‎

Lines changed: 8 additions & 0 deletions
Loading

‎components/PageHeader/PageHeader.vue‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,13 +13,17 @@
1313
{{ buttonTitle }}
1414
</button>
1515
</div>
16+
17+
<IconSvg class="page-header__lock-icon" name="lock" />
1618
</header>
1719
</template>
1820

1921
<script lang="ts">
2022
import { defineComponent } from "vue";
23+
import IconSvg from "~/components/IconSvg/IconSvg.vue";
2124
2225
export default defineComponent({
26+
components: { IconSvg },
2327
props: {
2428
title: {
2529
type: String,
@@ -59,4 +63,17 @@ export default defineComponent({
5963
.page-header__btn-clear {
6064
@apply px-3 py-1 text-xs bg-red-800 text-white rounded-sm hover:bg-red-700 transition transition-all duration-300;
6165
}
66+
67+
.page-header__lock-icon {
68+
@apply absolute right-0 w-4 h-4;
69+
70+
top: 50%;
71+
margin-top: -0.5rem;
72+
display: none;
73+
opacity: 0.3;
74+
75+
html.navbar-fixed & {
76+
display: block;
77+
}
78+
}
6279
</style>

‎config/constants.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,7 @@ export const EVENT_STATUS_COLOR_MAP = {
5050
export const LOCAL_STORAGE_KEYS = {
5151
CACHED_EVENTS: "cached_events",
5252
THEME: "theme",
53+
NAVBAR: "navbar",
5354
};
5455

5556

‎layouts/default.vue‎

Lines changed: 5 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
<script lang="ts">
1717
import LayoutSidebar from "~/components/LayoutSidebar/LayoutSidebar.vue";
1818
import { defineComponent } from "vue";
19-
import { THEME_MODES, useThemeStore } from "~/stores/theme";
19+
import { THEME_MODES, useSettingsStore } from "~/stores/settings";
2020
import { storeToRefs } from "pinia";
2121
import { useNuxtApp } from "#app";
2222
@@ -26,8 +26,8 @@ export default defineComponent({
2626
},
2727
2828
async setup() {
29-
const themeStore = useThemeStore();
30-
const { themeType } = storeToRefs(themeStore);
29+
const settingsStore = useSettingsStore();
30+
const { themeType, isFixedHeader } = storeToRefs(settingsStore);
3131
const { $config, $api } = useNuxtApp();
3232
3333
const apiVersion = await $api.getVersion();
@@ -41,6 +41,7 @@ export default defineComponent({
4141
4242
return {
4343
themeType,
44+
isFixedHeader,
4445
apiVersion: String(apiVersion).match(/^[0-9.]+.*$/)
4546
? `v${apiVersion}`
4647
: `@${apiVersion}`,
@@ -53,6 +54,7 @@ export default defineComponent({
5354
5455
return {
5556
themeType,
57+
isFixedHeader: false,
5658
clientVersion: "@dev",
5759
apiVersion: "@dev",
5860
};
@@ -63,13 +65,6 @@ export default defineComponent({
6365
return false;
6466
},
6567
},
66-
mounted() {
67-
if (this.themeType === THEME_MODES.DARK) {
68-
document?.documentElement?.classList?.add(THEME_MODES.DARK);
69-
} else {
70-
document?.documentElement?.classList?.remove(THEME_MODES.DARK);
71-
}
72-
},
7368
});
7469
</script>
7570

0 commit comments

Comments
 (0)