Eclypsed/Lazuli
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

SERIOUS messing around with the navbar

Browse Source
This commit is contained in:
Eclypsed
2024-01-28 02:41:13 -05:00
parent bee4c903ec
commit 5bd5b603b0
7 changed files with 200 additions and 146 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
src/lib/components/util/navbarFoot.svelte
View File

@@ -12,7 +12,7 @@
export let transitionTime: number = 200
import { fade } from 'svelte/transition'
import { createEventDispatcher } from 'svelte'
import { createEventDispatcher, onMount } from 'svelte'
const dispatch = createEventDispatcher()
@@ -25,41 +25,39 @@
return newPageIndex > currentPageIndex ? 'right' : 'left'
}
let activeTab: HTMLButtonElement, indicatorBar: HTMLDivElement, tabList: HTMLDivElement
$: calculateBar(activeTab)
let indicatorBar: HTMLDivElement, tabList: HTMLDivElement
const calculateBar = (activeTab: HTMLButtonElement) => {
if (activeTab && indicatorBar && tabList) {
const listRect = tabList.getBoundingClientRect()
const tabRec = activeTab.getBoundingClientRect()
const calculateBar = (newPathname: string) => {
const newTab = document.querySelector(`button[data-tab="${newPathname}"]`)
if (newTab && indicatorBar && tabList) {
const listRect = tabList.getBoundingClientRect(),
tabRec = newTab.getBoundingClientRect()
const shiftRight = () => (indicatorBar.style.right = `${listRect.right - tabRec.right}px`),
shiftLeft = () => (indicatorBar.style.left = `${tabRec.left - listRect.left}px`)
if (direction === 'right') {
indicatorBar.style.right = `${listRect.right - tabRec.right}px`
setTimeout(() => (indicatorBar.style.left = `${tabRec.left - listRect.left}px`), transitionTime)
shiftRight()
setTimeout(shiftLeft, transitionTime)
} else {
indicatorBar.style.left = `${tabRec.left - listRect.left}px`
setTimeout(() => (indicatorBar.style.right = `${listRect.right - tabRec.right}px`), transitionTime)
shiftLeft()
setTimeout(shiftRight, transitionTime)
}
}
}
</script>
<div bind:this={tabList} id="bottom-tab-list" class="relative flex w-full items-center justify-around bg-black">
<div bind:this={tabList} id="tab-list" class="relative flex w-full items-center justify-around bg-black">
{#each navTabs as tabData}
{#if currentPathname === tabData.pathname}
<button bind:this={activeTab} class="pointer-events-none text-white transition-colors" disabled>
<i class={tabData.icon} />
</button>
{:else}
<button
class="text-neutral-400 transition-colors hover:text-lazuli-primary"
on:click={() => {
direction = calculateDirection(tabData.pathname, currentPathname)
dispatch('navigate', { direction, pathname: tabData.pathname })
}}
>
<i class={tabData.icon} />
</button>
{/if}
<button
class="transition-colors"
data-tab={tabData.pathname}
disabled={currentPathname === tabData.pathname}
on:click={() => {
direction = calculateDirection(tabData.pathname, currentPathname)
dispatch('navigate', { direction, pathname: tabData.pathname })
}}
>
<i class="{tabData.icon} pointer-events-none" />
</button>
{/each}
{#if navTabs.some((tab) => tab.pathname === currentPathname)}
<div bind:this={indicatorBar} transition:fade class="absolute bottom-0 h-1 rounded-full bg-white transition-all duration-300 ease-in-out" />
@@ -67,9 +65,16 @@
</div>
<style>
#bottom-tab-list {
#tab-list {
padding: 16px 0px;
font-size: 20px;
line-height: 28px;
}
button:not(:disabled) {
cursor: pointer;
color: rgb(163 163, 163);
}
button:not(:disabled):hover {
color: var(--lazuli-primary);
}
</style>

73
src/lib/components/util/navbarSide.svelte
View File

@@ -1,73 +0,0 @@
<script context="module" lang="ts">
export interface NavTab {
pathname: string
name: string
icon: string
}
</script>
<script lang="ts">
export let navTabs: NavTab[]
export let currentPathname: string
export let transitionTime: number = 200
import { fade } from 'svelte/transition'
import { createEventDispatcher } from 'svelte'
const dispatch = createEventDispatcher()
type PageTransitionDirection = 'up' | 'down'
let direction: PageTransitionDirection = 'down'
const calculateDirection = (newPage: string, currentPage: string): PageTransitionDirection => {
const newPageIndex = navTabs.findIndex((tab) => tab.pathname === newPage)
const currentPageIndex = navTabs.findIndex((tab) => tab.pathname === currentPage)
return newPageIndex > currentPageIndex ? 'down' : 'up'
}
let activeTab: HTMLButtonElement, indicatorBar: HTMLDivElement, tabList: HTMLDivElement
$: calculateBar(activeTab)
const calculateBar = (activeTab: HTMLButtonElement) => {
if (activeTab && indicatorBar && tabList) {
const listRect = tabList.getBoundingClientRect()
const tabRec = activeTab.getBoundingClientRect()
if (direction === 'down') {
indicatorBar.style.bottom = `${listRect.bottom - tabRec.bottom}px`
setTimeout(() => (indicatorBar.style.top = `${tabRec.top - listRect.top}px`), transitionTime)
} else {
indicatorBar.style.top = `${tabRec.top - listRect.top}px`
setTimeout(() => (indicatorBar.style.bottom = `${listRect.bottom - tabRec.bottom}px`), transitionTime)
}
}
}
</script>
<div class="relative flex h-full flex-col gap-6 rounded-lg px-3 py-12" bind:this={tabList}>
{#each navTabs as tabData}
{#if currentPathname === tabData.pathname}
<button bind:this={activeTab} class="pointer-events-none grid aspect-square w-14 place-items-center text-white transition-colors" disabled>
<span class="flex flex-col gap-2 text-xs">
<i class="{tabData.icon} text-xl" />
{tabData.name}
</span>
</button>
{:else}
<button
class="grid aspect-square w-14 place-items-center text-neutral-400 transition-colors hover:text-lazuli-primary"
on:click={() => {
direction = calculateDirection(tabData.pathname, currentPathname)
dispatch('navigate', { direction, pathname: tabData.pathname })
}}
>
<span class="flex flex-col gap-2 text-xs">
<i class="{tabData.icon} text-xl" />
{tabData.name}
</span>
</button>
{/if}
{/each}
{#if navTabs.some((tab) => tab.pathname === currentPathname)}
<div bind:this={indicatorBar} transition:fade class="absolute left-0 w-[0.2rem] rounded-full bg-white transition-all duration-300 ease-in-out" />
{/if}
</div>