Skip to content

Commit 3bad68f

Browse files
vikdieselvikdiesel
committed
upd: darkMode use
1 parent 8bd8a69 commit 3bad68f

File tree

16 files changed

+256
-211
lines changed

16 files changed

+256
-211
lines changed

‎.laravel-guide/README.md‎

Lines changed: 66 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -83,14 +83,14 @@ Please make sure, you've copied template's `tailwind.config.js`. Then replace `c
8383
```js
8484
module.exports = {
8585
content: [
86-
"./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php",
87-
"./storage/framework/views/*.php",
88-
"./resources/views/**/*.blade.php",
89-
"./resources/js/**/*.vue",
90-
"./resources/js/**/*.js",
91-
],
86+
'./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
87+
'./storage/framework/views/*.php',
88+
'./resources/views/**/*.blade.php',
89+
'./resources/js/**/*.vue',
90+
'./resources/js/**/*.js'
91+
]
9292
// ...
93-
};
93+
}
9494
```
9595

9696
### In resources/views/app.blade.php
@@ -107,7 +107,7 @@ Then, open `resources/js/Pages/HomeView.vue` and add `<Head>`:
107107

108108
```vue
109109
<script setup>
110-
import { Head } from "@inertiajs/vue3";
110+
import { Head } from '@inertiajs/vue3'
111111
// ...
112112
</script>
113113
@@ -139,25 +139,25 @@ Optionally, you can pass menu via Inertia shared props, so you'll be able to con
139139

140140
```javascript
141141
export default [
142-
"General",
142+
'General',
143143
[
144144
{
145-
route: "dashboard",
145+
route: 'dashboard',
146146
icon: mdiMonitor,
147-
label: "Dashboard",
147+
label: 'Dashboard'
148148
},
149149
// {
150150
// route: "another-route-name",
151151
// icon: mdiMonitor,
152152
// label: "Dashboard 2",
153153
// },
154154
{
155-
href: "https://example.com/",
155+
href: 'https://example.com/',
156156
icon: mdiMonitor,
157-
label: "Example.com",
158-
},
159-
],
160-
];
157+
label: 'Example.com'
158+
}
159+
]
160+
]
161161
```
162162

163163
Route names reflect ones defined in `routes/web.php`:
@@ -180,21 +180,19 @@ Replace `RouterLink` imported from `vue-router` with `Link` import in `<script s
180180

181181
```vue
182182
<script setup>
183-
import { Link } from "@inertiajs/vue3";
183+
import { Link } from '@inertiajs/vue3'
184184
// import { RouterLink } from "vue-router";
185185
// ...
186186
187187
// Add itemHref
188-
const itemHref = computed(() =>
189-
props.item.route ? route(props.item.route) : props.item.href
190-
);
188+
const itemHref = computed(() => (props.item.route ? route(props.item.route) : props.item.href))
191189
192190
// Add activeInactiveStyle
193191
const activeInactiveStyle = computed(() =>
194192
props.item.route && route().current(props.item.route)
195-
? styleStore.asideMenuItemActiveStyle
196-
: ""
197-
);
193+
? darkModeStore.asideMenuItemActiveStyle
194+
: ''
195+
)
198196
199197
// ...
200198
</script>
@@ -212,7 +210,7 @@ Replace `RouterLink` imported from `vue-router` with `Link` import in `<script s
212210

213211
```vue
214212
<script setup>
215-
import { Link } from "@inertiajs/vue3";
213+
import { Link } from '@inertiajs/vue3'
216214
// import { RouterLink } from "vue-router";
217215
// ...
218216
</script>
@@ -225,30 +223,30 @@ const props = defineProps({
225223
// ...
226224
routeName: {
227225
type: String,
228-
default: null,
229-
},
226+
default: null
227+
}
230228
// ...
231-
});
229+
})
232230
```
233231

234232
Fix `const is` declaration, so it returns the `Link` component when `props.routeName` is set:
235233

236234
```javascript
237235
const is = computed(() => {
238236
if (props.as) {
239-
return props.as;
237+
return props.as
240238
}
241239

242240
if (props.routeName) {
243-
return Link;
241+
return Link
244242
}
245243

246244
if (props.href) {
247-
return "a";
245+
return 'a'
248246
}
249247

250-
return "button";
251-
});
248+
return 'button'
249+
})
252250
```
253251

254252
Remove `:to` and replace `:href` in `<component>` with `:href="routeName ? route(routeName) : href"`:
@@ -274,27 +272,25 @@ Replace `RouterLink` imported from `vue-router` with `Link` import in `<script s
274272

275273
```vue
276274
<script setup>
277-
import { Link } from "@inertiajs/vue3";
275+
import { Link } from '@inertiajs/vue3'
278276
// import { RouterLink } from "vue-router";
279277
// ...
280278
281279
// Add itemHref
282-
const itemHref = computed(() =>
283-
props.item.route ? route(props.item.route) : props.item.href
284-
);
280+
const itemHref = computed(() => (props.item.route ? route(props.item.route) : props.item.href))
285281
286282
// Update `const is` to return `Link` when `props.routeName` is set:
287283
const is = computed(() => {
288284
if (props.item.href) {
289-
return "a";
285+
return 'a'
290286
}
291287
292288
if (props.item.route) {
293-
return Link;
289+
return Link
294290
}
295291
296-
return "div";
297-
});
292+
return 'div'
293+
})
298294
</script>
299295
```
300296

@@ -319,12 +315,12 @@ Then, remove `:to` attribute and set `:href` attribute to `:href="itemHref"` in
319315
320316
// Add:
321317
322-
import { router } from "@inertiajs/vue3";
318+
import { router } from '@inertiajs/vue3'
323319
324-
router.on("navigate", () => {
325-
isAsideMobileExpanded.value = false;
326-
isAsideLgActive.value = false;
327-
});
320+
router.on('navigate', () => {
321+
isAsideMobileExpanded.value = false
322+
isAsideLgActive.value = false
323+
})
328324
329325
// Replace `isLogout` logic:
330326
@@ -333,9 +329,9 @@ const menuClick = (event, item) => {
333329
334330
if (item.isLogout) {
335331
// Add:
336-
router.post(route("logout"));
332+
router.post(route('logout'))
337333
}
338-
};
334+
}
339335
340336
// ...
341337
</script>
@@ -347,11 +343,11 @@ Let's fetch user avatar initials based on username stored in database.
347343

348344
```vue
349345
<script setup>
350-
import { computed } from "vue";
351-
import { usePage } from "@inertiajs/vue3";
352-
import UserAvatar from "@/components/UserAvatar.vue";
346+
import { computed } from 'vue'
347+
import { usePage } from '@inertiajs/vue3'
348+
import UserAvatar from '@/components/UserAvatar.vue'
353349
354-
const userName = computed(() => usePage().props.auth.user.name);
350+
const userName = computed(() => usePage().props.auth.user.name)
355351
</script>
356352
357353
<template>
@@ -366,15 +362,15 @@ const userName = computed(() => usePage().props.auth.user.name);
366362
```vue
367363
<script setup>
368364
// Add usePage:
369-
import { usePage } from "@inertiajs/vue3";
365+
import { usePage } from '@inertiajs/vue3'
370366
// Remove unused useMainStore:
371367
// import { useMainStore } from '@/stores/main.js'
372368
// ...
373369
374370
// Update itemLabel:
375371
const itemLabel = computed(() =>
376372
props.item.isCurrentUser ? usePage().props.auth.user.name : props.item.label
377-
);
373+
)
378374
379375
// ...
380376
</script>
@@ -408,14 +404,14 @@ Replace `tailwind.config.js` in your Laravel project with the Premium one. Make
408404
```js
409405
module.exports = {
410406
content: [
411-
"./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php",
412-
"./storage/framework/views/*.php",
413-
"./resources/views/**/*.blade.php",
414-
"./resources/js/**/*.vue",
415-
"./resources/js/**/*.js",
416-
],
407+
'./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
408+
'./storage/framework/views/*.php',
409+
'./resources/views/**/*.blade.php',
410+
'./resources/js/**/*.vue',
411+
'./resources/js/**/*.js'
412+
]
417413
// ...
418-
};
414+
}
419415
```
420416

421417
### Update resources/js/app.js
@@ -424,12 +420,12 @@ Add layout store to `resources/js/app.js`:
424420

425421
```js
426422
// Add layout store
427-
import { useLayoutStore } from "@/stores/layout.js";
423+
import { useLayoutStore } from '@/stores/layout.js'
428424

429-
const layoutStore = useLayoutStore(pinia);
425+
const layoutStore = useLayoutStore(pinia)
430426

431-
layoutStore.responsiveLayoutControl();
432-
window.onresize = () => layoutStore.responsiveLayoutControl();
427+
layoutStore.responsiveLayoutControl()
428+
window.onresize = () => layoutStore.responsiveLayoutControl()
433429
```
434430

435431
### Update resources/js/layouts/LayoutAuthenticated.vue
@@ -441,27 +437,27 @@ Replace contents of `resources/js/layouts/LayoutAuthenticated.vue` with contents
441437
// Replace router use:
442438
443439
// import { useRouter } from "vue-router";
444-
import { router } from "@inertiajs/vue3";
440+
import { router } from '@inertiajs/vue3'
445441
446442
// const router = useRouter();
447443
448444
// router.beforeEach(() => {
449445
// layoutStore.isAsideMobileExpanded = false;
450446
// });
451447
452-
router.on("navigate", () => {
453-
layoutStore.isAsideMobileExpanded = false;
454-
});
448+
router.on('navigate', () => {
449+
layoutStore.isAsideMobileExpanded = false
450+
})
455451
456452
// Add logout:
457453
458454
const menuClick = (event, item) => {
459455
// ...
460456
461457
if (item.isLogout) {
462-
router.post(route("logout"));
458+
router.post(route('logout'))
463459
}
464-
};
460+
}
465461
</script>
466462
```
467463

‎.laravel-guide/resources/js/app.js‎

Lines changed: 19 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,39 @@
1-
import "../css/main.css";
1+
import '../css/main.css'
22

3-
import { createPinia } from "pinia";
4-
import { useStyleStore } from "@/stores/style.js";
5-
import { darkModeKey, styleKey } from "@/config.js";
6-
import { createApp, h } from "vue";
7-
import { createInertiaApp } from "@inertiajs/vue3";
8-
import { resolvePageComponent } from "laravel-vite-plugin/inertia-helpers";
9-
import { ZiggyVue } from "../../vendor/tightenco/ziggy/dist/vue.m";
3+
import { createPinia } from 'pinia'
4+
import { useDarkModeStore } from '@/stores/darkMode.js'
5+
import { darkModeKey, styleKey } from '@/config.js'
6+
import { createApp, h } from 'vue'
7+
import { createInertiaApp } from '@inertiajs/vue3'
8+
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers'
9+
import { ZiggyVue } from '../../vendor/tightenco/ziggy/dist/vue.m'
1010

11-
const appName =
12-
window.document.getElementsByTagName("title")[0]?.innerText || "Laravel";
11+
const appName = window.document.getElementsByTagName('title')[0]?.innerText || 'Laravel'
1312

14-
const pinia = createPinia();
13+
const pinia = createPinia()
1514

1615
createInertiaApp({
1716
title: (title) => `${title} - ${appName}`,
1817
resolve: (name) =>
19-
resolvePageComponent(
20-
`./Pages/${name}.vue`,
21-
import.meta.glob("./Pages/**/*.vue")
22-
),
18+
resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
2319
setup({ el, App, props, plugin }) {
2420
return createApp({ render: () => h(App, props) })
2521
.use(plugin)
2622
.use(pinia)
2723
.use(ZiggyVue, Ziggy)
28-
.mount(el);
24+
.mount(el)
2925
},
3026
progress: {
31-
color: "#4B5563",
32-
},
33-
});
27+
color: '#4B5563'
28+
}
29+
})
3430

35-
const styleStore = useStyleStore(pinia);
31+
const darkModeStore = useDarkModeStore(pinia)
3632

3733
/* Dark mode */
3834
if (
39-
(!localStorage[darkModeKey] &&
40-
window.matchMedia("(prefers-color-scheme: dark)").matches) ||
41-
localStorage[darkModeKey] === "1"
35+
(!localStorage[darkModeKey] && window.matchMedia('(prefers-color-scheme: dark)').matches) ||
36+
localStorage[darkModeKey] === '1'
4237
) {
43-
styleStore.setDarkMode(true);
38+
darkModeStore.set(true)
4439
}

0 commit comments

Comments
 (0)