Skip to content

Commit aa39aa3

Browse files
syntaxlexxsyntaxlexx
committed
refactor: swapped Skeleton AppBar with a sexier tailwind one for frontend pages. About us page mods
1 parent a1ae0fd commit aa39aa3

File tree

10 files changed

+241
-112
lines changed

10 files changed

+241
-112
lines changed

‎public/img/laravelte-screenshot-6.png‎

28.7 KB
Loading

‎resources/css/app.css‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -27,11 +27,6 @@
2727
/* --color-primary-900: 117 29 22; */
2828
}
2929

30-
html,
31-
body {
32-
@apply h-full overflow-hidden;
33-
}
34-
3530
.inter {
3631
font-family: 'Inter', sans-serif;
3732
}
@@ -54,3 +49,12 @@ body {
5449
figcaption {
5550
@apply text-sm italic mt-1;
5651
}
52+
a.no-underline {
53+
@apply !no-underline;
54+
}
55+
.page-padding {
56+
@apply mt-28 mb-12;
57+
}
58+
.page-top-padding {
59+
@apply mt-28;
60+
}

‎resources/ts/Layouts/AppLayout.svelte‎

Lines changed: 202 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -1,121 +1,235 @@
1-
<script>
1+
<script lang="ts">
22
import MainLayout from './MainLayout.svelte'
3-
import { AppBar } from '@skeletonlabs/skeleton'
43
import { page, inertia, useForm } from '@inertiajs/svelte'
5-
import { LightSwitch } from '@skeletonlabs/skeleton'
4+
import { LightSwitch, type ModalSettings, modalStore, type ToastSettings, toastStore } from '@skeletonlabs/skeleton'
65
76
$: auth = $page.props.auth.user
87
98
let form = useForm()
9+
let isNavCollapsed = true
10+
let y = 0
11+
let hasScrolled = false
12+
13+
$: if (y > 100) {
14+
hasScrolled = true
15+
} else {
16+
hasScrolled = false
17+
}
18+
19+
type NavItem = {
20+
title: string
21+
route: string
22+
}
23+
24+
let nav: NavItem[] = [
25+
{
26+
title: 'Home',
27+
route: '/',
28+
},
29+
{
30+
title: 'About',
31+
route: route('about'),
32+
},
33+
{
34+
title: 'Contact',
35+
route: route('contact'),
36+
},
37+
]
1038
1139
function handleLogout(e) {
40+
isNavCollapsed = true
1241
e.preventDefault()
1342
14-
$form.post(route('logout'))
43+
const confirm: ModalSettings = {
44+
type: 'confirm',
45+
title: 'Logout?',
46+
body: 'Are you sure youwant to logout?',
47+
response: (r: boolean) => {
48+
if (r) {
49+
$form.post(route('logout'), {
50+
onSuccess: () => {
51+
const t: ToastSettings = {
52+
message: 'Logged out',
53+
background: 'variant-filled-success',
54+
}
55+
toastStore.trigger(t)
56+
},
57+
})
58+
}
59+
},
60+
}
61+
62+
modalStore.trigger(confirm)
1563
}
1664
</script>
1765

18-
<MainLayout withShell={true}>
19-
<svelte:fragment slot="header">
20-
<div class="bg-surface-100-800-token">
21-
<div class="container">
22-
<AppBar background="bg-transparent">
23-
<svelte:fragment slot="lead">
24-
<a href="/" use:inertia>
25-
<strong class="text-xl uppercase">{$page.props.siteName}</strong>
26-
</a>
27-
</svelte:fragment>
66+
<svelte:window bind:scrollY={y} />
2867

29-
<svelte:fragment slot="trail">
68+
<MainLayout>
69+
<nav
70+
class="px-2 sm:px-4 py-2.5 fixed w-full z-20 top-0 left-0 border-b border-primary-50 dark:border-primary-800 transition-all duration-300 ease-in-out {hasScrolled ||
71+
!isNavCollapsed
72+
? 'bg-surface'
73+
: ''}"
74+
>
75+
<div class="relative">
76+
<!-- <div class="absolute top-0 left-0 right-0 bottom-0 bg-white opacity-90" /> -->
77+
<div class="container flex z-10 flex-wrap items-center justify-between mx-auto">
78+
<a href="/" use:inertia class="flex items-baseline no-underline">
79+
<span class="self-center text-xl font-semibold whitespace-nowrap text-token"
80+
>{$page.props.siteName}</span
81+
>
82+
</a>
83+
<div class="flex items-center md:order-2">
84+
<div class="mx-2 lg:mr-8">
3085
<LightSwitch />
86+
</div>
3187

32-
{#if auth}
33-
<a class="btn btn-sm variant-ghost-surface" href="/dashboard" use:inertia> Dashboard </a>
34-
<form on:submit|preventDefault={handleLogout}>
35-
<button type="submit" class="btn btn-sm variant-ghost-surface"> Logout </button>
36-
</form>
37-
{:else}
38-
<a class="btn btn-sm variant-ghost-surface" href={route('login')} use:inertia> Login </a>
39-
<a class="btn btn-sm variant-ghost-surface" href={route('register')} use:inertia>
40-
Register
41-
</a>
42-
{/if}
43-
44-
<a
45-
class="btn btn-sm variant-ringed-surface"
46-
href="https://twitter.com/acelords"
47-
target="_blank"
48-
rel="noreferrer"
49-
>
50-
Twitter
88+
<span class="">
89+
<a href={route('contact')} use:inertia class="btn btn-sm variant-ghost-surface">
90+
<i class="bx bx-support text-[20px]" />
91+
Talk to Us
5192
</a>
52-
<a
53-
class="btn btn-sm variant-ringed-surface"
54-
href="https://github.com/lexxyungcarter/laravelte"
55-
target="_blank"
56-
rel="noreferrer"
93+
</span>
94+
95+
<button
96+
type="button"
97+
class="inline-flex items-center p-2 ml-2 text-sm rounded-lg md:hidden text-primary-token lg:hover:bg-primary-100 focus:outline-none focus:ring-2 focus:ring-primary-300 dark:focus:ring-primary-700"
98+
aria-controls="navbar-sticky"
99+
aria-expanded="false"
100+
on:click={() => (isNavCollapsed = !isNavCollapsed)}
101+
>
102+
<span class="sr-only">Open main menu</span>
103+
<svg
104+
class="w-6 h-6"
105+
aria-hidden="true"
106+
fill="currentColor"
107+
viewBox="0 0 20 20"
108+
xmlns="http://www.w3.org/2000/svg"
109+
><path
110+
fill-rule="evenodd"
111+
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"
112+
clip-rule="evenodd"
113+
/></svg
57114
>
58-
GitHub
59-
</a>
60-
</svelte:fragment>
115+
</button>
116+
</div>
117+
<div
118+
class="items-center justify-between w-full md:flex md:w-auto md:order-1 transition-all duration-300 {isNavCollapsed
119+
? 'hidden'
120+
: ''}"
121+
id="navbar-sticky"
122+
>
123+
<ul
124+
class="flex flex-col p-4 mt-4 rounded-lg md:flex-row md:flex-wrap md:leading-10 md:space-x-8 md:mt-0 md:text-sm md:font-medium"
125+
>
126+
{#each nav as item}
127+
<li>
128+
<a
129+
href={item.route}
130+
use:inertia
131+
class="nav-item !text-token"
132+
aria-current="page"
133+
on:click={() => (isNavCollapsed = true)}>{item.title}</a
134+
>
135+
</li>
136+
{/each}
61137

62-
<div class="hidden lg:flex gap-5 justify-center">
63-
<a class="nav-item-link" href={route('about')} use:inertia> About </a>
64-
<a class="nav-item-link" href={route('contact')} use:inertia> Contact </a>
65-
</div>
66-
</AppBar>
138+
{#if auth}
139+
<li>
140+
<a
141+
href={route('dashboard')}
142+
class="nav-item !text-token"
143+
use:inertia
144+
on:click={() => (isNavCollapsed = true)}>Dashboard ({auth?.email})</a
145+
>
146+
</li>
147+
<li>
148+
<form on:submit|preventDefault={handleLogout}>
149+
<button type="submit" class="nav-item">
150+
<span class="text-primary-500"> Logout </span>
151+
</button>
152+
</form>
153+
</li>
154+
{:else}
155+
<li>
156+
<a href={route('login')} use:inertia class="nav-item !text-token">Login</a>
157+
</li>
158+
<li>
159+
<a href={route('register')} use:inertia class="nav-item !text-token">Register</a>
160+
</li>
161+
{/if}
162+
</ul>
163+
</div>
67164
</div>
68165
</div>
69-
</svelte:fragment>
166+
</nav>
70167

71168
<!-- content -->
72169
<slot />
73170

74-
<svelte:fragment slot="footer">
75-
<!-- footer -->
76-
<div class="bg-surface rounded-lg shadow dark:bg-surface-900 m-4">
77-
<div class="w-full max-w-screen-xl mx-auto p-4 md:py-8">
78-
<div class="sm:flex sm:items-center sm:justify-between">
79-
<a href="/" use:inertia class="mb-4 sm:mb-0">
80-
<img src="/img/laravelte-logo-full.png" class="h-8 mr-3" alt="logo" />
81-
<br />
82-
<div class="text-2xl font-semibold whitespace-nowrap dark:text-white">
83-
{$page.props.siteName}
84-
</div>
85-
</a>
86-
<ul
87-
class="flex flex-wrap items-center mb-6 text-sm font-medium text-gray-500 sm:mb-0 dark:text-gray-400"
88-
>
89-
<li>
90-
<a href={route('about')} class="mr-4 hover:underline md:mr-6" use:inertia>About</a>
91-
</li>
92-
93-
<li>
94-
<a href={route('contact')} class="mr-4 hover:underline md:mr-6" use:inertia>Contact</a>
95-
</li>
96-
<li>
97-
<a href={route('policy-pages', 'privacy-policy')} class="mr-4 hover:underline md:mr-6"
98-
>Privacy Policy</a
99-
>
100-
</li>
101-
<li>
102-
<a href="https://ko-fi.com/acelords" target="_blank" class="mr-4 hover:underline md:mr-6"
103-
>Support Development</a
104-
>
105-
</li>
106-
</ul>
107-
</div>
108-
<hr class="my-6 border-gray-200 sm:mx-auto dark:border-gray-700 lg:my-8" />
109-
<span class="block text-sm text-gray-500 sm:text-center dark:text-gray-400"
110-
>© 2023 <a href="https://flowbite.com/" class="hover:underline">Flowbite™</a>. All Rights Reserved.</span
171+
<!-- footer -->
172+
<div class="bg-surface rounded-lg shadow dark:bg-surface-900 m-4">
173+
<div class="w-full max-w-screen-xl mx-auto p-4 md:py-8">
174+
<div class="sm:flex sm:items-center sm:justify-between">
175+
<a href="/" use:inertia class="mb-4 sm:mb-0 no-underline">
176+
<img src="/img/laravelte-logo-full.png" class="h-8 mr-3" alt="logo" />
177+
<br />
178+
<div class="text-2xl font-semibold whitespace-nowrap text-token">
179+
{$page.props.siteName}
180+
</div>
181+
</a>
182+
<ul
183+
class="flex flex-wrap items-center mb-6 text-sm font-medium text-primary-500 sm:mb-0 dark:text-primary-400"
111184
>
185+
<li>
186+
<a
187+
href={route('about')}
188+
class="mr-4 hover:underline md:mr-6 no-underline !text-token"
189+
use:inertia>About</a
190+
>
191+
</li>
192+
193+
<li>
194+
<a
195+
href={route('contact')}
196+
class="mr-4 hover:underline md:mr-6 no-underline !text-token"
197+
use:inertia>Contact</a
198+
>
199+
</li>
200+
<li>
201+
<a
202+
href={route('policy-pages', 'privacy-policy')}
203+
use:inertia
204+
class="mr-4 hover:underline md:mr-6 no-underline !text-token">Privacy Policy</a
205+
>
206+
</li>
207+
<li>
208+
<a
209+
href="https://ko-fi.com/acelords"
210+
target="_blank"
211+
class="mr-4 hover:underline md:mr-6 no-underline !text-token">Support Development</a
212+
>
213+
</li>
214+
</ul>
112215
</div>
216+
<hr class="my-6 lg:my-8" />
217+
<span class="block text-sm sm:text-center opacity-80"
218+
>© {new Date().getFullYear()}
219+
<a href={route('home')} class="hover:underline">{$page.props.siteName}</a>. All Rights Reserved.
220+
Developed by <a href="https://acelords.com" target="_blank">AceLords</a>
221+
</span>
113222
</div>
114-
</svelte:fragment>
223+
</div>
115224
</MainLayout>
116225

117226
<style lang="css">
118-
.nav-item-link {
119-
@apply hover:underline hover:underline-offset-8;
227+
nav {
228+
-webkit-backdrop-filter: blur(8px);
229+
backdrop-filter: blur(8px);
230+
}
231+
232+
.nav-item {
233+
@apply block py-2 pl-3 pr-4 font-bold rounded hover:bg-surface-100 dark:hover:bg-surface-800 md:hover:bg-transparent dark:md:hover:bg-transparent !no-underline md:hover:!underline md:hover:underline-offset-8 md:p-0 w-full md:w-auto md:border-0 text-left md:text-center;
120234
}
121235
</style>

‎resources/ts/Layouts/MainLayout.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
<title>{title}</title>
2222
</svelte:head>
2323

24-
<div class="h-full overflow-hidden contents">
24+
<div class="">
2525
<Modal />
2626

2727
{#if withShell}

0 commit comments

Comments
 (0)