flo-bit.dev
[READ-ONLY] Mirror of https://github.com/flo-bit/skywatched. review movies and tv shows, based on at proto
skywatched.app
8.5 kB
184 lines
1<script lang="ts">
2 import { page } from '$app/stores';
3 import { cn } from '$lib/utils';
4 import User from '$lib/Components/User/User.svelte';
5 import { rateMovieModal, showSidebar } from '$lib/state/modals.svelte';
6 import { fade } from 'svelte/transition';
7 import { onNavigate } from '$app/navigation';
8 //import { get2PopularMovies } from '$lib/server/movies';
9
10 const menu = [
11 {
12 icon: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
13 <path stroke-linecap="round" stroke-linejoin="round" d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
14</svg>`,
15 label: 'Home',
16 href: '/'
17 },
18 {
19 icon: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
20 <path stroke-linecap="round" stroke-linejoin="round" d="M12.75 3.03v.568c0 .334.148.65.405.864l1.068.89c.442.369.535 1.01.216 1.49l-.51.766a2.25 2.25 0 0 1-1.161.886l-.143.048a1.107 1.107 0 0 0-.57 1.664c.369.555.169 1.307-.427 1.605L9 13.125l.423 1.059a.956.956 0 0 1-1.652.928l-.679-.906a1.125 1.125 0 0 0-1.906.172L4.5 15.75l-.612.153M12.75 3.031a9 9 0 0 0-8.862 12.872M12.75 3.031a9 9 0 0 1 6.69 14.036m0 0-.177-.529A2.25 2.25 0 0 0 17.128 15H16.5l-.324-.324a1.453 1.453 0 0 0-2.328.377l-.036.073a1.586 1.586 0 0 1-.982.816l-.99.282c-.55.157-.894.702-.8 1.267l.073.438c.08.474.49.821.97.821.846 0 1.598.542 1.865 1.345l.215.643m5.276-3.67a9.012 9.012 0 0 1-5.276 3.67m0 0a9 9 0 0 1-10.275-4.835M15.75 9c0 .896-.393 1.7-1.016 2.25" />
21</svg>`,
22 label: 'Feed',
23 href: '/feed'
24 },
25 {
26 icon: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
27 <path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
28</svg>`,
29 label: 'Search',
30 href: '/search'
31 }
32 ];
33
34 const userMenu = [
35 {
36 icon: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
37 <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
38</svg>`,
39 label: 'New review',
40 href: '/review/new',
41 onclick: () => {
42 showSidebar.value = false;
43 rateMovieModal.showEmpty();
44 }
45 },
46 {
47 icon: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
48 <path stroke-linecap="round" stroke-linejoin="round" d="M12.75 3.03v.568c0 .334.148.65.405.864l1.068.89c.442.369.535 1.01.216 1.49l-.51.766a2.25 2.25 0 0 1-1.161.886l-.143.048a1.107 1.107 0 0 0-.57 1.664c.369.555.169 1.307-.427 1.605L9 13.125l.423 1.059a.956.956 0 0 1-1.652.928l-.679-.906a1.125 1.125 0 0 0-1.906.172L4.5 15.75l-.612.153M12.75 3.031a9 9 0 0 0-8.862 12.872M12.75 3.031a9 9 0 0 1 6.69 14.036m0 0-.177-.529A2.25 2.25 0 0 0 17.128 15H16.5l-.324-.324a1.453 1.453 0 0 0-2.328.377l-.036.073a1.586 1.586 0 0 1-.982.816l-.99.282c-.55.157-.894.702-.8 1.267l.073.438c.08.474.49.821.97.821.846 0 1.598.542 1.865 1.345l.215.643m5.276-3.67a9.012 9.012 0 0 1-5.276 3.67m0 0a9 9 0 0 1-10.275-4.835M15.75 9c0 .896-.393 1.7-1.016 2.25" />
49</svg>`,
50 label: 'Following',
51 href: '/following'
52 },
53 {
54 icon: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
55 <path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z" />
56 <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
57</svg>`,
58 label: 'Settings',
59 href: '/settings'
60 }
61 ];
62
63 let { user } = $props();
64
65 onNavigate(() => {
66 showSidebar.value = false;
67 });
68</script>
69
70{#key $page.url.pathname}
71 <div
72 class={cn(
73 'sidebar fixed bottom-2 left-0 top-2 z-50 w-[4.5rem] py-2 transition-transform duration-300',
74 showSidebar.value ? 'translate-x-0' : '-translate-x-64 md:translate-x-0'
75 )}
76 >
77 <div class="flex h-full flex-col items-center justify-end space-y-1 pb-2 md:justify-between">
78 <ul class="flex flex-col items-center space-y-2">
79 {#each menu as item}
80 <li class="group relative size-12">
81 <a
82 href={item.href}
83 class={cn(
84 'group flex items-center gap-x-3 rounded-md p-3 text-sm/6 font-semibold',
85 $page.url.pathname === item.href
86 ? 'bg-accent-950/10 text-accent-400'
87 : 'text-base-200 transition-colors duration-100 hover:bg-accent-950/20 hover:text-accent-400'
88 )}
89 >
90 {@html item.icon}
91 <span
92 class="pointer-events-none absolute left-14 rounded-lg transition-opacity duration-200 group-hover:pointer-events-auto group-hover:opacity-100 md:bg-accent-950/20 md:px-3 md:py-2 md:opacity-0"
93 >{item.label}</span
94 >
95
96 {#if showSidebar.value}
97 <span class="absolute inset-0 block h-full w-screen md:hidden"></span>
98 {/if}
99 </a>
100 </li>
101 {/each}
102 </ul>
103 <ul class="flex flex-col items-center space-y-2">
104 {#if user}
105 {#each userMenu as item}
106 <li class="group relative">
107 <a
108 href={item.href}
109 class={'group flex items-center gap-x-3 rounded-md p-3 text-sm/6 font-semibold text-base-200 transition-colors duration-100 hover:bg-accent-950/20 hover:text-accent-400'}
110 onclick={(event) => {
111 if (item.onclick) {
112 event.preventDefault();
113 item.onclick();
114 }
115 }}
116 >
117 {@html item.icon}
118 <span
119 class="pointer-events-none absolute left-14 whitespace-nowrap rounded-lg backdrop-blur-md transition-opacity duration-200 group-hover:pointer-events-auto group-hover:opacity-100 md:bg-accent-950/20 md:px-3 md:py-2 md:opacity-0"
120 >{item.label}</span
121 >
122
123 {#if showSidebar.value}
124 <span class="absolute inset-0 block h-full w-screen md:hidden"></span>
125 {/if}
126 </a>
127 </li>
128 {/each}
129 {/if}
130
131 <User {user} />
132 </ul>
133 </div>
134 </div>
135{/key}
136
137{#if showSidebar.value}
138 <button
139 transition:fade
140 class="fixed inset-0 z-40 bg-base-950/90 backdrop-blur-sm md:hidden"
141 onclick={() => showSidebar.toggle()}
142 >
143 <span class="sr-only">Close Menu</span>
144 </button>
145
146 <button
147 transition:fade
148 onclick={() => showSidebar.toggle()}
149 class="fixed bottom-6 right-4 z-50 md:hidden"
150 >
151 <span class="sr-only">close Menu</span>
152
153 <svg
154 xmlns="http://www.w3.org/2000/svg"
155 fill="none"
156 viewBox="0 0 24 24"
157 stroke-width="1.5"
158 stroke="currentColor"
159 class="size-6"
160 >
161 <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
162 </svg>
163 </button>
164{:else}
165 <button
166 class="fixed bottom-2 left-2 z-50 rounded-lg border border-base-800 bg-base-900/75 p-2 backdrop-blur-sm md:hidden"
167 onclick={() => showSidebar.toggle()}
168 >
169 <span class="sr-only">Open Menu</span>
170 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-6">
171 <path
172 fill-rule="evenodd"
173 d="M3 9a.75.75 0 0 1 .75-.75h16.5a.75.75 0 0 1 0 1.5H3.75A.75.75 0 0 1 3 9Zm0 6.75a.75.75 0 0 1 .75-.75h16.5a.75.75 0 0 1 0 1.5H3.75a.75.75 0 0 1-.75-.75Z"
174 clip-rule="evenodd"
175 />
176 </svg>
177 </button>
178{/if}
179
180<style>
181 .sidebar {
182 view-transition-name: sidebar;
183 }
184</style>