This PR:
- Adds a background to the navbar
- Fixes an issue where todos were hidden behind the navbar
- Fixes a reload issue where the selected navigation style was not persisted correctly
+19
-9
Diff
round #1
+1
-1
app/components/Todo/Todos.vue
+1
-1
app/components/Todo/Todos.vue
···
18
18
<template>
19
19
<div class="flex justify-center" data-testid="todos-container">
20
20
<div
21
-
class="max-h-[calc(100dvh-5.75rem)] w-dvw max-w-200 overflow-auto px-1 md:max-h-[calc(100dvh-2.5rem)] pb-1"
21
+
class="max-h-[calc(100dvh-5.75rem)] pwa:max-h-[calc(100dvh-8.75rem)] floating:max-h-[calc(100dvh-8.75rem)] w-dvw max-w-200 overflow-auto px-1 md:max-h-[calc(100dvh-2.5rem)] pb-1"
22
22
>
23
23
<TransitionGroup
24
24
leave-to-class="max-h-0! opacity-0 scale-y-0"
+2
-4
app/composables/useSettings.ts
+2
-4
app/composables/useSettings.ts
+5
-1
app/components/Settings/SettingsSheet.vue
+5
-1
app/components/Settings/SettingsSheet.vue
···
10
10
11
11
const config = useRuntimeConfig();
12
12
13
+
const cookie = useCookie<string>("navStyle", {
14
+
default: () => "classic",
15
+
});
16
+
13
17
function close() {
14
18
isOpen.value = false;
15
19
}
···
92
96
<div>
93
97
<h2 class="text-muted-text text-lg">{{ t("design") }}</h2>
94
98
<select
95
-
v-model="settings.design"
99
+
v-model="cookie"
96
100
class="bg-surface border-secondary h-8 cursor-pointer rounded border px-2 text-white"
97
101
>
98
102
<option value="classic">{{ t(`classic`) }}</option>
+11
-2
app/pages/index.vue
+11
-2
app/pages/index.vue
···
36
36
});
37
37
38
38
const { isMobile } = useDevice();
39
+
const cookie = useCookie("navStyle");
39
40
40
41
const isPwa = useIsPwa();
41
-
const { settings } = useSettings();
42
+
43
+
let design = computed(() => cookie.value);
44
+
45
+
useHead({
46
+
htmlAttrs: {
47
+
"data-design": design,
48
+
"data-pwa": isPwa,
49
+
},
50
+
});
42
51
</script>
43
52
<template>
44
-
<div :data-design="settings.design" :data-pwa="isPwa">
53
+
<div>
45
54
<FilterSheet v-model:is-open="isFilterSheetOpen" />
46
55
<SettingsSheet v-model:is-open="isSettingsSheetOpen" />
47
56
<EditTodoSheet />