Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feat/footer menu #4

Merged
merged 4 commits into from
Jul 26, 2024
Merged

Feat/footer menu #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
09ba4a2
.env example
prokawsar Jul 26, 2024
04fb5e1
Menu in footer
prokawsar Jul 26, 2024
c82beec
Footer menu
prokawsar Jul 26, 2024
4decc38
uncomment
prokawsar Jul 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions .env.example
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
PUBLIC_SUPABASE_URL=
PUBLIC_SUPABASE_ANON=
PUBLIC_MIX_TOKEN=""
74 changes: 46 additions & 28 deletions src/routes/(app)/+layout.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
import { slide } from 'svelte/transition'
import { supabase } from '$lib/db/supabaseClient'
import { Toaster } from 'svelte-sonner'
import Icon from '@iconify/svelte'

//Import Mixpanel SDK
mixpanel.init(PUBLIC_MIX_TOKEN, {
Expand All @@ -24,11 +25,11 @@
}
</script>

<main class="h-[100svh] flex flex-col">
<main class="h-[100svh] flex flex-col justify-between">
<Toaster
richColors
toastOptions={{
class: 'py-2'
class: 'py-2 mb-8'
}}
/>
{#if $navigating}
Expand All @@ -38,35 +39,52 @@
<Loader />
</div>
{/if}
<nav class="max-w-6xl mx-auto w-full">
<div class="flex justify-center py-2">
<p class="text-center text-2xl text-red-600 font-semibold">Molla Printing & Packaging</p>
</div>
<div class="bg-gradient-to-r from-transparent via-orange-800/40 to-transparent p-[1px]" />
<div class="px-4 flex w-full mt-2">
<div class="flex w-full flex-row justify-end gap-3 py-1 px-2 rounded border border-teal-400">
<a href="/history" class:hidden={$page.url.pathname == '/history'} class="h-full">History</a
>
<a href="/" class:!block={$page.url.pathname == '/history'} class="hidden h-full">Home</a>
<div class="flex flex-col h-[92%]">
<nav class="max-w-6xl mx-auto w-full">
<div class="flex justify-center py-2">
<p class="text-center text-2xl text-red-600 font-semibold">Molla Printing & Packaging</p>
</div>
</div>
</nav>
<slot />
<div class="bg-gradient-to-r from-transparent via-orange-800/40 to-transparent p-[1px]" />
</nav>
<slot />
</div>

<div class="absolute bottom-0 w-full flex">
<p class="text-right md:text-center text-gray-400 w-3/4">
<!-- Footer menu section -->
<div
class="max-w-6xl mx-auto w-full flex flex-row h-11 px-3 bg-slate-50 border-t border-teal-500 items-center justify-between rounded-t-lg"
>
<!-- <p class="text-right md:text-center text-gray-400 w-3/4">
&#x1F4BB;Developed by <a href="https://github.com/prokawsar" target="_blank">ProKawsar</a
>&#x1F60E;
</p>
<!-- <button on:click={() => (showSettings = !showSettings)} class="w-1/4"> Settings </button> -->
{#if showSettings}
<div
transition:slide={{ axis: 'y', duration: 200 }}
class="absolute right-2 bottom-7 flex flex-col items-start divide-y divide-orange-400 gap-1 bg-slate-100 p-2 rounded"
>
<button on:click={() => handleLogout()}>Logout</button>
<button>Change pin</button>
</div>
{/if}
</p> -->
<a
href="/"
class="flex flex-row items-center gap-1"
class:text-orange-500={$page.url.pathname == '/'}
>
<Icon icon="clarity:home-line" /> Home
</a>
<a
href="/history"
class="flex flex-row items-center gap-1"
class:text-orange-500={$page.url.pathname == '/history'}
>
<Icon icon="ph:read-cv-logo-light" /> Cost History
</a>
<button
on:click={() => (showSettings = !showSettings)}
class="flex flex-row gap-1 items-center"
>
<Icon icon="solar:settings-linear" /> Settings
</button>
</div>
{#if showSettings}
<div
transition:slide={{ axis: 'y', duration: 200 }}
class="absolute w-20 right-2 bottom-11 flex flex-col items-start divide-y divide-orange-400 gap-1 bg-slate-50 p-2 rounded"
>
<!-- <button on:click={() => handleLogout()}>Logout</button> -->
<button>About</button>
</div>
{/if}
</main>
4 changes: 2 additions & 2 deletions src/routes/(app)/history/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,15 +40,15 @@
<title>History</title>
</svelte:head>

<section class="max-w-6xl mx-auto flex w-full h-full max-h-[90%] flex-col gap-4 px-4 py-5">
<section class="max-w-6xl mx-auto flex w-full h-full max-h-[90%] flex-col gap-4 px-4 pt-5">
<div class="flex gap-2 items-center justify-center w-full">
<h1 class="text-xl text-center">History</h1>
<p class="bg-gray-100 flex items-center justify-center rounded-full w-7 h-7">
{data.histories.length}
</p>
</div>
<div class="w-full bg-gradient-to-r from-transparent via-slate-600/10 to-transparent p-[1px]" />
<div class="flex flex-col w-full justify-between gap-4 h-[82%] items-center">
<div class="flex flex-col w-full justify-between gap-4 h-[90%] items-center">
<div class="relative flex flex-col justify-between h-full gap-3 w-full max-w-3xl py-2 z-0">
{#if !isLoading}
{#if data.histories.length}
Expand Down