Skip to content

Commit e56d623

Browse files
syntaxlexxsyntaxlexx
committed
feat: added drawer to Dashboard Layout
1 parent 2eb02b3 commit e56d623

File tree

3 files changed

+88
-25
lines changed

3 files changed

+88
-25
lines changed

‎.github/workflows/deploy-ci.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
# Make sure that your key algorithm of choice is supported. On Ubuntu 20.04 or later you must explicitly allow the use of the ssh-rsa algorithm. Add the following line to your OpenSSH daemon file (which is either /etc/ssh/sshd_config or a drop-in file under /etc/ssh/sshd_config.d/):
88
# CASignatureAlgorithms +ssh-rsa
99

10-
name: Deploy Laravelte to Production
10+
name: Deploy Education-Materials to Production
1111

1212
# Controls when the workflow will run
1313
on:

‎resources/ts/Components/UserSidebar.svelte‎

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,13 @@
11
<script lang="ts">
22
import { inertia, page, useForm } from '@inertiajs/svelte'
3-
import { onMount } from 'svelte'
4-
import { Icon, Input } from '.'
3+
import { Icon, Input, ThemeSwitcher } from '.'
4+
import { createEventDispatcher } from 'svelte'
5+
6+
const dispatch = createEventDispatcher()
7+
8+
function handleClick() {
9+
dispatch('click')
10+
}
511
612
$: auth = $page.props.auth?.user
713
@@ -36,10 +42,6 @@
3642
icon: 'arrow-back',
3743
},
3844
]
39-
40-
function drawerClose(): void {
41-
// drawerStore.close()
42-
}
4345
</script>
4446

4547
<div class="">
@@ -66,7 +68,7 @@
6668
class:bg-primary-active-token={item.route.endsWith($page.url)}
6769
href={item.route}
6870
use:inertia
69-
on:click={drawerClose}
71+
on:click={handleClick}
7072
>
7173
<Icon name={item.icon} classes="text-xl text-gray-600 dark:text-gray-400" />
7274
{item.title}
@@ -76,6 +78,9 @@
7678
</ul>
7779
<br />
7880
<ul>
81+
<li class="pl-4">
82+
<ThemeSwitcher />
83+
</li>
7984
<li>
8085
<a href=":;" class="nav-item" on:click|preventDefault={handleLogout}>
8186
<Icon name="exit" classes="text-xl text-gray-600 dark:text-gray-400" />

‎resources/ts/Layouts/DashboardLayout.svelte‎

Lines changed: 75 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,65 @@
11
<script lang="ts">
22
import MainLayout from './MainLayout.svelte'
3-
import { page, inertia, useForm } from '@inertiajs/svelte'
3+
import { page } from '@inertiajs/svelte'
44
import UserSidebar from '@/Components/UserSidebar.svelte'
55
import { Button, Icon, ThemeSwitcher } from '@/Components'
6+
import { onMount } from 'svelte'
7+
import { slide } from 'svelte/transition'
8+
import { quintOut } from 'svelte/easing'
69
710
$: auth = $page.props.auth.user
811
9-
let form = useForm()
12+
let isMobile = false
13+
let isDrawerShown = false
14+
let x = 0
1015
11-
function handleLogout(e) {
12-
e.preventDefault()
13-
14-
$form.post(route('logout'))
16+
$: if (x > 768) {
17+
isMobile = false
18+
} else {
19+
isMobile = true
1520
}
1621
17-
function drawerOpen(): void {
18-
// drawerStore.open({})
22+
onMount(() => {
23+
isMobile = window.innerWidth < 768
24+
})
25+
26+
function closeDrawer() {
27+
isDrawerShown = false
1928
}
2029
</script>
2130

31+
<svelte:window bind:innerWidth={x} />
32+
2233
<MainLayout>
23-
<div class="user-dashboard flex flex-wrap">
24-
<div class="w-full md:w-72 hidden md:block">
25-
<div class=" bg-gray-100 dark:bg-gray-800 h-full w-full">
26-
<div class="p-5 pt-6">
27-
<UserSidebar />
28-
</div>
34+
<div class="user-dashboard flex flex-wrap relative">
35+
<!-- desktop -->
36+
<div class="hidden md:block md:w-72 h-full bg-gray-100 dark:bg-gray-800">
37+
<div class="p-5 pt-6">
38+
<UserSidebar on:click={closeDrawer} />
2939
</div>
3040
</div>
3141

42+
<!-- mobile -->
43+
{#if isMobile && isDrawerShown}
44+
<div
45+
class="md:hidden absolute w-full h-full z-20"
46+
in:slide={{ axis: 'x', duration: 300, easing: quintOut }}
47+
>
48+
<div class="relative">
49+
<div class="w-[100vw] h-[100vh] bg-gray-800/50 dark:bg-gray-600/50" on:click={closeDrawer}>
50+
<div class="absolute top-5 right-5">
51+
<Icon name="x-circle" classes="text-3xl text-white" />
52+
</div>
53+
</div>
54+
<div class="w-72 z-20 h-full bg-gray-100 dark:bg-gray-800 absolute top-0 left-0">
55+
<div class="p-5 pt-6">
56+
<UserSidebar on:click={closeDrawer} />
57+
</div>
58+
</div>
59+
</div>
60+
</div>
61+
{/if}
62+
3263
<div class="w-full md:flex-1 bg-white dark:bg-gray-900">
3364
<div class="px-4 py-3 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">
3465
<h3 class="text-xl font-semibold">
@@ -38,9 +69,36 @@
3869
<div class="flex gap-2 items-center">
3970
<Icon name="bell" classes="text-2xl text-gray-600 dark:text-gray-300" />
4071
<Icon name="message" classes="text-2xl text-gray-600 dark:text-gray-300" />
41-
<ThemeSwitcher />
42-
<Button size="sm">Share</Button>
43-
<Button size="sm" color="secondary">Create</Button>
72+
<div class="hidden md:block">
73+
<ThemeSwitcher />
74+
</div>
75+
<div class="hidden md:block">
76+
<Button size="sm">Share</Button>
77+
</div>
78+
<div class="hidden md:block">
79+
<Button size="sm" color="secondary">Create</Button>
80+
</div>
81+
<button
82+
type="button"
83+
class="inline-flex items-center p-2 text-sm rounded-lg md:hidden lg:hover:bg-primary-100 focus:outline-none focus:ring-2 focus:ring-primary-200"
84+
aria-controls="navbar-sticky"
85+
aria-expanded="false"
86+
on:click={() => (isDrawerShown = !isDrawerShown)}
87+
>
88+
<span class="sr-only">Open main menu</span>
89+
<svg
90+
class="w-6 h-6"
91+
aria-hidden="true"
92+
fill="currentColor"
93+
viewBox="0 0 20 20"
94+
xmlns="http://www.w3.org/2000/svg"
95+
><path
96+
fill-rule="evenodd"
97+
d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
98+
clip-rule="evenodd"
99+
/></svg
100+
>
101+
</button>
44102
</div>
45103
</div>
46104

0 commit comments

Comments
 (0)