problem: layout sucks

nostrocket · Oct 14, 2024 · 86a307a · 86a307a
1 parent b1085eb
commit 86a307a
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 94 deletions.
diff --git a/src/components/Menu.svelte b/src/components/Menu.svelte
@@ -1,11 +1,10 @@
 <script lang="ts">
 	import { base } from '$app/paths';
 	import { page } from '$app/stores';
-	import { Badge } from '@/components/ui/badge';
 	import Separator from '@/components/ui/separator/separator.svelte';
-	import { currentUser, devmode } from '@/stores/session';
 	import { commitInfo } from '@/stores/github';
-	import { Code, Mail, Pyramid } from 'lucide-svelte';
+	import { devmode } from '@/stores/session';
+	import { Code, Pyramid } from 'lucide-svelte';
 	import { GitAltBrand } from 'svelte-awesome-icons';
 
 	export let closeSheet = () => {};

diff --git a/src/components/RecursiveProblemTile.svelte b/src/components/RecursiveProblemTile.svelte
@@ -26,7 +26,7 @@
 			//if (!expanded && !$isSelected) {expanded = true}
 			$selected = problem;
 		}}
-		class="problems-start flex w-full flex-col gap-2 rounded-lg border p-3 text-left text-sm transition-all hover:bg-accent hover:bg-opacity-100 {$isSelected
+		class="problems-start flex w-full cursor-zoom-in flex-col gap-2 rounded-lg border p-3 text-left text-sm transition-all hover:bg-accent hover:bg-opacity-100 {$isSelected
 			? 'bg-accent bg-opacity-90'
 			: ''}"
 	>

diff --git a/src/layouts/MailLayout.svelte b/src/layouts/MailLayout.svelte
diff --git a/src/layouts/SidePanelLayout.svelte b/src/layouts/SidePanelLayout.svelte
@@ -1,92 +1,28 @@
 <script lang="ts">
-	import Menu from 'lucide-svelte/icons/menu';
-	import Sun from 'svelte-radix/Sun.svelte';
-	import Moon from 'svelte-radix/Moon.svelte';
-	import { toggleMode } from 'mode-watcher';
-	import { Button } from '$lib/components/ui/button/index.js';
-	import * as Sheet from '$lib/components/ui/sheet/index.js';
-	import NewMenu from '../components/Menu.svelte';
+	import { goto } from '$app/navigation';
 	import { base } from '$app/paths';
-	import Login from '../components/Login.svelte';
+	import { Button } from '$lib/components/ui/button/index.js';
 	import { Badge } from '@/components/ui/badge';
 	import { bitcoinTip } from '@/stores/bitcoin';
-	import { AngleLeftSolid, AngleRightSolid } from 'svelte-awesome-icons';
-	import { goto } from '$app/navigation';
 	import { devmode } from '@/stores/session';
+	import { toggleMode } from 'mode-watcher';
+	import Moon from 'svelte-radix/Moon.svelte';
+	import Sun from 'svelte-radix/Sun.svelte';
+	import Login from '../components/Login.svelte';
+	import { HomeIcon } from 'lucide-svelte';
 
 	let open = false;
-	let expandSidebar = true;
+	let expandSidebar = false;
 </script>
 
-<div
-	class={`grid min-h-screen w-full ${expandSidebar ? 'md:grid-cols-[220px_1fr] lg:grid-cols-[260px_1fr]' : ''}`}
->
-	<div class="hidden border-r bg-muted/40 md:block">
-		{#if expandSidebar}
-			<div class="flex h-full max-h-screen flex-col gap-2">
-				<div class="flex h-14 items-center border-b px-4 lg:h-[60px] lg:px-6">
-					<a href="{base}/" class="flex items-center gap-2 font-semibold">
-						<span class="">Problems</span>
-					</a>
-				</div>
-				<div class="flex-1">
-					<nav class="items-start px-2 text-sm font-medium lg:px-4">
-						<NewMenu />
-					</nav>
-				</div>
-				<button
-					on:click={() => {
-						expandSidebar = false;
-					}}
-					class="mb-2 flex transform items-center justify-center rounded-r-full bg-blue-500 px-4 py-2 font-semibold
-					 text-white opacity-20 shadow-md transition
-					  duration-300 ease-in-out hover:scale-105
-						hover:bg-blue-600 hover:opacity-70 md:w-[180px] lg:w-[220px]"
-				>
-					<AngleLeftSolid />
-					Close Sidebar
-				</button>
-			</div>
-		{:else}
-			<button
-				on:click={() => {
-					expandSidebar = true;
-				}}
-				class="absolute bottom-2 left-0 flex items-center justify-center rounded-r-full bg-green-500
-				 px-4 py-2 font-semibold text-white
-				 opacity-20 shadow-md transition
-				 duration-300 ease-in-out hover:scale-105
-				 hover:bg-green-600 hover:opacity-70 md:w-[180px] lg:w-[220px]"
-			>
-				Expand Sidebar
-				<AngleRightSolid />
-			</button>
-		{/if}
-	</div>
+<div class="grid min-h-screen w-full">
 	<div class="flex h-dvh flex-col">
 		<header class="flex h-14 items-center border-b bg-muted/40 px-4 lg:h-[60px] lg:px-6">
-			<div class="shrink-0 pr-4 md:hidden">
-				<Sheet.Root bind:open>
-					<Sheet.Trigger asChild let:builder>
-						<Button variant="outline" size="icon" builders={[builder]}>
-							<Menu class="h-5 w-5" />
-							<span class="sr-only">Toggle navigation menu</span>
-						</Button>
-					</Sheet.Trigger>
-					<Sheet.Content side="left" class="flex flex-col">
-						<nav class="grid gap-2 text-lg font-medium">
-							<a
-								href="{base}/"
-								class="flex items-center gap-2 text-lg font-semibold"
-								on:click={() => (open = false)}
-							>
-								<span>Problems</span>
-							</a>
-							<NewMenu closeSheet={() => (open = false)} />
-						</nav>
-					</Sheet.Content>
-				</Sheet.Root>
-			</div>
+			<Button
+				on:click={() => {
+					goto(`/`);
+				}}><HomeIcon /></Button
+			>
 			{#if $devmode}
 				<Button on:click={async () => await goto(`${base}/new/problem/`)}>Log New Problem</Button>
 			{/if}