Skip to content

Commit

Permalink
problem: sidebar can't be expanded to show item names (#23)
Browse files Browse the repository at this point in the history
  • Loading branch information
@bob2402
bob2402 authored Sep 6, 2024
1 parent 975ad47 commit fa82708
Showing 1 changed file with 157 additions and 61 deletions.
218 changes: 157 additions & 61 deletions src/lib/components/ChatLayout.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,115 +4,211 @@
import { toggleMode } from 'mode-watcher';
import { Home, Moon, Sun } from 'radix-icons-svelte';
import {
ChartPieSolid,
ChartPieSolid,
CircleQuestionSolid,
CodePullRequestSolid,
FaucetSolid,
GearSolid,
GhostSolid,
ListCheckSolid,
PodcastSolid
PodcastSolid,
AngleLeftSolid,
AngleRightSolid
} from 'svelte-awesome-icons';
import Button from './Button.svelte';
import LoginButton from './LoginButton.svelte';
import Login from '@/ndk/Login.svelte';
export let hideFaucet = false;
$: isExpanded = false;
const descriptions = {
faucet: 'Home',
todo: 'To-Do List',
help: 'Help',
gear: 'Settings',
merits: 'Merits',
github: 'GitHub',
theme: 'Toggle Theme',
tiks: 'Podcast',
marcus: 'Marcus',
ghost: 'Ghost Mode'
};
</script>

<div class="flex flex-row h-full">
<div class="flex h-full flex-row">
<!-- Icon Sidebar -->
<div class="w-12 flex-shrink-0 block bg-orange-500 dark:bg-cyan-950">
<div class="flex flex-col bg-layer-2 relative h-full">
<div
class={`block flex-shrink-0 bg-orange-500 transition-all duration-300 dark:bg-cyan-950 ${isExpanded ? 'w-40' : 'w-12'}`}
>
<div class="bg-layer-2 relative flex h-full flex-col">
<div
class="flex flex-1 flex-col overflow-x-hidden overflow-y-scroll no-scrollbar sm:overflow-hidden place-items-center"
class="no-scrollbar flex flex-1 flex-col overflow-x-hidden overflow-y-scroll sm:overflow-hidden"
>
<slot name="buttons" />
{#if !hideFaucet}
<div class="flex w-full items-center">
<Button
onClick={() => {
goto(`${base}/`);
}}
>
<FaucetSolid />
</Button>
{#if isExpanded}
<span class="ml-2 text-sm text-white">{descriptions.faucet}</span>
{/if}
</div>
{/if}

<div class="flex w-full items-center">
<Button
onClick={() => {
goto(`${base}/`);
goto(`${base}/todo`);
}}
>
<FaucetSolid />
<ListCheckSolid />
</Button>
{/if}
{#if isExpanded}
<span class="ml-2 text-sm text-white">{descriptions.todo}</span>
{/if}
</div>

<Button
onClick={() => {
goto(`${base}/todo`);
}}><ListCheckSolid /></Button
>
<Button
onClick={() => {
goto(`${base}/help`);
}}><CircleQuestionSolid /></Button
>
<Button><GearSolid /></Button>
<Button onClick={() => {
goto(`${base}/merits`);
}}><ChartPieSolid /></Button>
<Button
onClick={() => {
console.log('43');
window.location.href = `https://github.com/nostrocket/humble.horse/`;
}}><CodePullRequestSolid /></Button
>
<div class="flex w-full items-center">
<Button
onClick={() => {
goto(`${base}/help`);
}}
>
<CircleQuestionSolid />
</Button>
{#if isExpanded}
<span class="ml-2 text-sm text-white">{descriptions.help}</span>
{/if}
</div>

<Button onClick={toggleMode}>
<Moon
class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"
/>
<Sun
class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"
/>
<span class="sr-only">Toggle theme</span>
</Button>
<div class="flex w-full items-center">
<Button onClick={() => {}}>
<GearSolid />
</Button>
{#if isExpanded}
<span class="ml-2 text-sm text-white">{descriptions.gear}</span>
{/if}
</div>

<!-- <Button onClick={()=>{goto(`${base}/debug`)}}><ToolboxSolid /></Button
> -->
<Button
onClick={() => {
goto(`${base}/tiks`);
}}><PodcastSolid /></Button
>
<Button
notifs={0}
onClick={() => {
goto(`${base}/marcus`);
}}><img class="w-9 min-w-9" src={`${base}/marcus.png`} /></Button
>
<div class="flex w-full items-center">
<Button
onClick={() => {
goto(`${base}/merits`);
}}
>
<ChartPieSolid />
</Button>
{#if isExpanded}
<span class="ml-2 text-sm text-white">{descriptions.merits}</span>
{/if}
</div>

<div class="flex w-full items-center">
<Button
onClick={() => {
window.location.href = `https://github.com/nostrocket/humble.horse/`;
}}
>
<CodePullRequestSolid />
</Button>
{#if isExpanded}
<span class="ml-2 text-sm text-white">{descriptions.github}</span>
{/if}
</div>

<div class="flex w-full items-center">
<Button onClick={toggleMode}>
<Moon
class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"
/>
<Sun
class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"
/>
<span class="sr-only">Toggle theme</span>
</Button>
{#if isExpanded}
<span class="ml-2 text-sm text-white">{descriptions.theme}</span>
{/if}
</div>

<div class="flex w-full items-center">
<Button
onClick={() => {
goto(`${base}/tiks`);
}}
>
<PodcastSolid />
</Button>
{#if isExpanded}
<span class="ml-2 text-sm text-white">{descriptions.tiks}</span>
{/if}
</div>

<div class="flex w-full items-center">
<Button
notifs={0}
onClick={() => {
goto(`${base}/marcus`);
}}
>
<img class="w-9 min-w-9" src={`${base}/marcus.png`} alt="Marcus" />
</Button>
{#if isExpanded}
<span class="ml-2 text-sm text-white">{descriptions.marcus}</span>
{/if}
</div>
</div>
<div class="mb-2 overflow-hidden place-items-center">
<Button
onClick={() => {
alert('ghost mode: implement me!');
}}><GhostSolid /></Button
>
<div class="mb-2 overflow-hidden">
<Button onClick={() => (isExpanded = !isExpanded)}>
{#if isExpanded}
<AngleLeftSolid />
{:else}
<AngleRightSolid />
{/if}
</Button>
<div class="flex w-full items-center">
<Button
onClick={() => {
alert('ghost mode: implement me!');
}}
>
<GhostSolid />
</Button>
{#if isExpanded}
<span class="ml-2 text-sm text-white">{descriptions.ghost}</span>
{/if}
</div>
<Login />
</div>
</div>
</div>

<div class="flex-1">
<div class="flex flex-col h-full">
<div class="flex h-full flex-col">
<!-- CONTENT-->
<div
id="content"
class="h-full relative z-10 bg-white dark:bg-slate-900 overflow-x-hidden overflow-y-scroll no-scrollbar"
class="no-scrollbar relative z-10 h-full overflow-x-hidden overflow-y-scroll bg-white dark:bg-slate-900"
>
<slot />
<!-- NOTE VIEWER-->
</div>
<!-- INPUT BOX-->
<div class="relative w-full h-fit">
<div class="relative h-fit w-full">
<div class="z-20 flex"><slot name="input" /></div>
</div>
</div>
</div>
<div class="hidden flex-1 lg:block">
<div class="h-full flex-col">
<div class="h-full flex-1 bg-slate-100 dark:bg-cyan-800 overflow-y-scroll">
<div class="h-full flex-1 overflow-y-scroll bg-slate-100 dark:bg-cyan-800">
<slot name="right" />
</div>
</div>
Expand Down

0 comments on commit fa82708

Please sign in to comment.