starred/reiverr
1
0
Fork 0
mirror of https://github.com/aleksilassila/reiverr.git synced 2026-04-26 18:55:12 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: Add mouse navigation to sidebar

Browse Source
This commit is contained in:
Aleksi Lassila
2024-04-14 02:19:41 +03:00
parent 73db1a1f04
commit 72027faff2
2 changed files with 43 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
src/lib/components/Sidebar/Sidebar.svelte
View File

@@ -10,14 +10,14 @@
const navigate = useNavigate();
const itemContainer = (index: number, _focusIndex: number) =>
classNames('h-12 flex items-center', {
classNames('h-12 flex items-center cursor-pointer', {
'text-amber-300': _focusIndex === index,
'text-stone-300': _focusIndex !== index
});
</script>
<Container
class={classNames('flex items-stretch fixed z-20 left-0 inset-y-0', 'py-4 w-16', {
class={classNames('flex items-stretch fixed z-20 left-0 inset-y-0 group', 'py-4 w-16', {
//'max-w-[64px]': !$isNavBarOpen,
//'max-w-64': $isNavBarOpen
})}
@@ -32,78 +32,83 @@
<!-- </div>-->
<div class={'flex flex-col flex-1 relative z-20 items-center'}>
<div class={'flex flex-col flex-1 justify-center'}>
<Container on:clickOrSelect={() => navigate('/')}>
<div class={itemContainer(0, $focusIndex)}>
<Laptop class="w-8 h-8" slot="icon" />
</div>
<div class={'flex flex-col flex-1 justify-center self-stretch'}>
<Container
class={classNames(itemContainer(0, $focusIndex), 'w-full flex justify-center')}
on:clickOrSelect={() => navigate('/')}
>
<Laptop class="w-8 h-8" />
</Container>
<Container on:clickOrSelect={() => navigate('movies')}>
<div class={itemContainer(1, $focusIndex)}>
<CardStack class="w-8 h-8" slot="icon" />
</div>
<Container
class={classNames(itemContainer(1, $focusIndex), 'w-full flex justify-center')}
on:clickOrSelect={() => navigate('movies')}
>
<CardStack class="w-8 h-8" />
</Container>
<Container on:clickOrSelect={() => navigate('library')}>
<div class={itemContainer(2, $focusIndex)}>
<Bookmark class="w-8 h-8" slot="icon" />
</div>
<Container
class={classNames(itemContainer(2, $focusIndex), 'w-full flex justify-center')}
on:clickOrSelect={() => navigate('library')}
>
<Bookmark class="w-8 h-8" />
</Container>
<Container on:clickOrSelect={() => navigate('search')}>
<div class={itemContainer(3, $focusIndex)}>
<MagnifyingGlass class="w-8 h-8" slot="icon" />
</div>
<Container
class={classNames(itemContainer(3, $focusIndex), 'w-full flex justify-center')}
on:clickOrSelect={() => navigate('search')}
>
<MagnifyingGlass class="w-8 h-8" />
</Container>
</div>
<Container on:clickOrSelect={() => navigate('manage')}>
<div class={itemContainer(4, $focusIndex)}>
<Gear class="w-8 h-8" slot="icon" />
</div>
<Container
class={classNames(itemContainer(4, $focusIndex), 'w-full flex justify-center')}
on:clickOrSelect={() => navigate('manage')}
>
<Gear class="w-8 h-8" />
</Container>
</div>
<div
class={classNames(
'absolute inset-y-0 left-0 pl-[64px] pr-10 z-10 transition-all bg-stone-900',
'flex flex-col flex-1 p-4',
'absolute inset-y-0 right-full pl-[64px] pr-10 z-10 transition-all bg-stone-900/90',
'flex flex-col flex-1 p-4 opacity-0',
{
'opacity-0': $isNavBarOpen === false,
'-translate-x-1/4': $isNavBarOpen === false
'translate-x-full opacity-100': $isNavBarOpen,
'group-hover:translate-x-full group-hover:opacity-100': true
}
)}
>
<div class="flex flex-col flex-1 justify-center">
<div class={itemContainer(0, $focusIndex)}>
<div class={itemContainer(0, $focusIndex)} on:click={() => navigate('/')}>
<span
class={classNames('text-xl transition-opacity font-medium', {
'opacity-0': $isNavBarOpen === false
// 'opacity-0': $isNavBarOpen === false
})}
>
Series</span
>
</div>
<div class={itemContainer(1, $focusIndex)}>
<div class={itemContainer(1, $focusIndex)} on:click={() => navigate('movies')}>
<span
class={classNames('text-xl transition-opacity font-medium', {
'opacity-0': $isNavBarOpen === false
// 'opacity-0': $isNavBarOpen === false
})}
>
Movies</span
>
</div>
<div class={itemContainer(2, $focusIndex)}>
<div class={itemContainer(2, $focusIndex)} on:click={() => navigate('library')}>
<span
class={classNames('text-xl transition-opacity font-medium', {
'opacity-0': $isNavBarOpen === false
// 'opacity-0': $isNavBarOpen === false
})}
>
Library</span
>
</div>
<div class={itemContainer(3, $focusIndex)}>
<div class={itemContainer(3, $focusIndex)} on:click={() => navigate('search')}>
<span
class={classNames('text-xl transition-opacity font-medium', {
'opacity-0': $isNavBarOpen === false
// 'opacity-0': $isNavBarOpen === false
})}
>
Search</span
@@ -111,10 +116,10 @@
</div>
</div>
<div class={itemContainer(4, $focusIndex)}>
<div class={itemContainer(4, $focusIndex)} on:click={() => navigate('manage')}>
<span
class={classNames('text-xl transition-opacity font-medium', {
'opacity-0': $isNavBarOpen === false
// 'opacity-0': $isNavBarOpen === false
})}
>
Manage</span