christoph/svelte-formula11
1
Fork 0
Code Issues 23 Actions Packages Projects 1 Activity

Skeleton: Position the drawer below the navbar + allow toggling between them

Browse Source
This commit is contained in:
Christoph Urlacher
2024-12-16 16:46:26 +01:00
parent bac2d31d73
commit f086e360d4
1 changed files with 116 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

212
src/routes/+layout.svelte
View File

@ -33,12 +33,36 @@
// Drawer config // Drawer config
initializeStores(); initializeStores();
const drawerStore: DrawerStore = getDrawerStore(); const drawerStore: DrawerStore = getDrawerStore();
let drawerOpen: boolean = false;
let drawerId: string = "";
drawerStore.subscribe((settings: DrawerSettings) => {
drawerOpen = settings.open ?? false;
drawerId = settings.id ?? "";
});
const toggle_drawer = (settings: DrawerSettings) => {
if (drawerOpen) {
if (drawerId === settings.id) {
// We clicked the same button to close the drawer
drawerStore.close();
} else {
// We clicked another button to open another drawer
drawerStore.close();
setTimeout(() => drawerStore.open(settings), 200);
}
} else {
drawerStore.open(settings);
}
};
const close_drawer = () => drawerStore.close();
const drawer_settings_base: DrawerSettings = { const drawer_settings_base: DrawerSettings = {
position: "top", position: "top",
height: "auto", height: "auto",
padding: "lg:px-96", padding: "lg:px-96 pt-14", // pt-14 is 56px, so its missing 4px for the 60px navbar...
bgDrawer: "bg-surface-100", bgDrawer: "bg-surface-100",
duration: 150,
}; };
const menu_drawer = () => { const menu_drawer = () => {
@ -46,7 +70,7 @@
id: "menu_drawer", id: "menu_drawer",
...drawer_settings_base, ...drawer_settings_base,
}; };
drawerStore.open(drawerSettings); toggle_drawer(drawerSettings);
}; };
const data_drawer = () => { const data_drawer = () => {
@ -54,7 +78,7 @@
id: "data_drawer", id: "data_drawer",
...drawer_settings_base, ...drawer_settings_base,
}; };
drawerStore.open(drawerSettings); toggle_drawer(drawerSettings);
}; };
const login_drawer = () => { const login_drawer = () => {
@ -62,7 +86,7 @@
id: "login_drawer", id: "login_drawer",
...drawer_settings_base, ...drawer_settings_base,
}; };
drawerStore.open(drawerSettings); toggle_drawer(drawerSettings);
}; };
const profile_drawer = () => { const profile_drawer = () => {
@ -70,11 +94,9 @@
id: "profile_drawer", id: "profile_drawer",
...drawer_settings_base, ...drawer_settings_base,
}; };
drawerStore.open(drawerSettings); toggle_drawer(drawerSettings);
}; };
const close_drawer = () => drawerStore.close();
// Popups config // Popups config
storePopup.set({ computePosition, autoUpdate, offset, shift, flip, arrow }); storePopup.set({ computePosition, autoUpdate, offset, shift, flip, arrow });
@ -93,11 +115,12 @@
<LoadingIndicator /> <LoadingIndicator />
<Drawer> <Drawer>
{#if $drawerStore.id === "menu_drawer"} <!-- Use p-3 because the drawer has a 5px overlap with the navbar -->
<!-- Menu Drawer --> <div class="flex flex-col gap-2 p-3">
<!-- Menu Drawer --> {#if $drawerStore.id === "menu_drawer"}
<!-- Menu Drawer --> <!-- Menu Drawer -->
<div class="flex flex-col gap-2 p-2"> <!-- Menu Drawer -->
<!-- Menu Drawer -->
<Button href="/racepicks" onclick={close_drawer} color="surface" fullwidth>Race Picks</Button> <Button href="/racepicks" onclick={close_drawer} color="surface" fullwidth>Race Picks</Button>
<Button href="/seasonpicks" onclick={close_drawer} color="surface" fullwidth <Button href="/seasonpicks" onclick={close_drawer} color="surface" fullwidth
>Season Picks >Season Picks
@ -109,51 +132,46 @@
>Statistics >Statistics
</Button> </Button>
<Button href="/rules" onclick={close_drawer} color="surface" fullwidth>Rules</Button> <Button href="/rules" onclick={close_drawer} color="surface" fullwidth>Rules</Button>
</div> {:else if $drawerStore.id === "data_drawer"}
{:else if $drawerStore.id === "data_drawer"} <!-- Data Drawer -->
<!-- Data Drawer --> <!-- Data Drawer -->
<!-- Data Drawer --> <!-- Data Drawer -->
<!-- Data Drawer --> <Button href="/data/raceresult" onclick={close_drawer} color="surface" fullwidth
<div class="flex flex-col gap-2 p-2"> >Race Results
<Button href="/data/raceresult" onclick={close_drawer} color="surface" fullwidth>
Race Results
</Button> </Button>
<Button href="/data/season" onclick={close_drawer} color="surface" fullwidth>Season</Button> <Button href="/data/season" onclick={close_drawer} color="surface" fullwidth>Season</Button>
<Button href="/data/user" onclick={close_drawer} color="surface" fullwidth>Users</Button> <Button href="/data/user" onclick={close_drawer} color="surface" fullwidth>Users</Button>
</div> {:else if $drawerStore.id === "login_drawer"}
{:else if $drawerStore.id === "login_drawer"} <!-- Login Drawer -->
<!-- Login Drawer --> <!-- Login Drawer -->
<!-- Login Drawer --> <!-- Login Drawer -->
<!-- Login Drawer -->
<div class="flex flex-col gap-2 p-2">
<h4 class="h4 select-none">Enter Username and Password</h4> <h4 class="h4 select-none">Enter Username and Password</h4>
<form method="POST" class="contents"> <form method="POST" class="contents">
<!-- Supply the pathname so the form can redirect to the current page. --> <!-- Supply the pathname so the form can redirect to the current page. -->
<input type="hidden" name="redirect_url" value={$page.url.pathname} /> <input type="hidden" name="redirect_url" value={$page.url.pathname} />
<Input name="username" placeholder="Username" autocomplete="username" required> <Input name="username" placeholder="Username" autocomplete="username" required
<UserIcon /> ><UserIcon />
</Input> </Input>
<Input name="password" type="password" placeholder="Password" autocomplete="off" required> <Input name="password" type="password" placeholder="Password" autocomplete="off" required
<PasswordIcon /> ><PasswordIcon />
</Input> </Input>
<div class="flex justify-end gap-2"> <div class="flex justify-end gap-2">
<Button formaction="/profile?/login" onclick={close_drawer} color="tertiary" submit> <Button formaction="/profile?/login" onclick={close_drawer} color="tertiary" submit
Login >Login
</Button> </Button>
<Button <Button
formaction="/profile?/create_profile" formaction="/profile?/create_profile"
onclick={close_drawer} onclick={close_drawer}
color="tertiary" color="tertiary"
submit>Register</Button submit
> >Register
</Button>
</div> </div>
</form> </form>
</div> {:else if $drawerStore.id === "profile_drawer" && data.user}
{:else if $drawerStore.id === "profile_drawer" && data.user} <!-- Profile Drawer -->
<!-- Profile Drawer --> <!-- Profile Drawer -->
<!-- Profile Drawer --> <!-- Profile Drawer -->
<!-- Profile Drawer -->
<div class="flex flex-col gap-2 p-2">
<h4 class="h4 select-none">Edit Profile</h4> <h4 class="h4 select-none">Edit Profile</h4>
<form method="POST" enctype="multipart/form-data" class="contents"> <form method="POST" enctype="multipart/form-data" class="contents">
<!-- Supply the pathname so the form can redirect to the current page. --> <!-- Supply the pathname so the form can redirect to the current page. -->
@ -187,72 +205,74 @@
</Button> </Button>
</div> </div>
</form> </form>
</div> {/if}
{/if} </div>
</Drawer> </Drawer>
<nav> <nav>
<!-- TODO: Make this stick to the top somehow (fixed/sticky). --> <div class="fixed left-0 right-0 top-0 z-50">
<AppBar <AppBar
slotDefault="place-self-center" slotDefault="place-self-center"
slotTrail="place-content-end" slotTrail="place-content-end"
background="bg-primary-500" background="bg-primary-500"
shadow="shadow" shadow="shadow"
padding="p-2" padding="p-2"
> >
<svelte:fragment slot="lead"> <svelte:fragment slot="lead">
<div class="flex gap-2"> <div class="flex gap-2">
<!-- Navigation drawer --> <!-- Navigation drawer -->
<div class="lg:hidden"> <div class="lg:hidden">
<Button color="primary" onclick={menu_drawer}> <Button color="primary" onclick={menu_drawer}>
<MenuDrawerIcon /> <MenuDrawerIcon />
</Button> </Button>
</div>
<!-- Site logo -->
<Button href="/" color="primary"><span class="text-xl font-bold">Formula 11</span></Button
>
</div> </div>
</svelte:fragment>
<!-- Site logo --> <!-- Large navigation -->
<Button href="/" color="primary"><span class="text-xl font-bold">Formula 11</span></Button> <div class="hidden gap-2 lg:flex">
<Button href="/racepicks" color="primary" activate_href>Race Picks</Button>
<Button href="/seasonpicks" color="primary" activate_href>Season Picks</Button>
<Button href="/leaderboard" color="primary" activate_href>Leaderboard</Button>
<Button href="/statistics" color="primary" activate_href>Statistics</Button>
<Button href="/rules" color="primary" activate_href>Rules</Button>
</div> </div>
</svelte:fragment>
<!-- Large navigation --> <svelte:fragment slot="trail">
<div class="hidden gap-2 lg:flex"> <div class="flex gap-2">
<Button href="/racepicks" color="primary" activate_href>Race Picks</Button> <!-- Data drawer -->
<Button href="/seasonpicks" color="primary" activate_href>Season Picks</Button> <Button
<Button href="/leaderboard" color="primary" activate_href>Leaderboard</Button> color="primary"
<Button href="/statistics" color="primary" activate_href>Statistics</Button> onclick={data_drawer}
<Button href="/rules" color="primary" activate_href>Rules</Button> activate={$page.url.pathname.startsWith("/data")}>Data</Button
</div> >
<svelte:fragment slot="trail"> {#if !data.user}
<div class="flex gap-2"> <!-- Login drawer -->
<!-- Data drawer --> <Button color="primary" onclick={login_drawer}>Login</Button>
<Button {:else}
color="primary" <!-- Profile drawer -->
onclick={data_drawer} <Avatar
activate={$page.url.pathname.startsWith("/data")}>Data</Button id="user_avatar_preview"
> src={data.user.avatar_url}
rounded="rounded-full"
{#if !data.user} width="w-10"
<!-- Login drawer --> background="bg-primary-50"
<Button color="primary" onclick={login_drawer}>Login</Button> onclick={profile_drawer}
{:else} cursor="cursor-pointer"
<!-- Profile drawer --> />
<Avatar {/if}
id="user_avatar_preview" </div>
src={data.user.avatar_url} </svelte:fragment>
rounded="rounded-full" </AppBar>
width="w-10" </div>
background="bg-primary-50"
onclick={profile_drawer}
cursor="cursor-pointer"
/>
{/if}
</div>
</svelte:fragment>
</AppBar>
</nav> </nav>
<!-- Each child's contents will be inserted here --> <!-- Each child's contents will be inserted here -->
<div class="p-2"> <div class="p-2" style="margin-top: 60px;">
{@render children()} {@render children()}
</div> </div>