fix: adding mobile support to showcase

N00nDay · Oct 5, 2022 · 8295b8c · 8295b8c
1 parent 7aa8a04
commit 8295b8c
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 17 deletions.
diff --git a/src/lib/components/layout/Header.svelte b/src/lib/components/layout/Header.svelte
@@ -24,7 +24,7 @@
 	});
 
 	const defaultClass =
-		'hidden md:flex sticky top-0 z-10 pt-3 pb-2 pl-[calc(var(--sal)+1rem)] pr-[calc(var(--sar)+1rem)] w-full flex-row h-16 min-h-[64px] max-h-16 flex-shrink items-center bg-light-surface dark:bg-dark-surface text-light-content dark:text-dark-content shadow-md dark:shadow-black flex-1';
+		'flex sticky top-0 z-10 pt-3 pb-2 pl-[calc(var(--sal)+1rem)] pr-[calc(var(--sar)+1rem)] w-full flex-row h-16 min-h-[64px] max-h-16 flex-shrink items-center bg-light-surface dark:bg-dark-surface text-light-content dark:text-dark-content shadow-md dark:shadow-black flex-1';
 	const finalClass = twMerge(defaultClass, $$props.class);
 </script>
 

diff --git a/src/lib/components/menu/Item.svelte b/src/lib/components/menu/Item.svelte
@@ -37,6 +37,7 @@
 
 <div class="transition-all duration-300" style="width: {$menuCollapse ? '3rem' : '100%'}">
 	<a
+		on:click
 		use:tooltip={{
 			placement: 'right',
 			content: label,

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -4,8 +4,7 @@
 	import { page } from '$app/stores';
 	import { CommandPalette, type SearchResult } from '../lib/components/command-palette';
 
-	import { Button, Dropdown, Icon, Layout, Menu, Portal, Row } from '../lib';
-	import Swap from '../lib/components/swap/Swap.svelte';
+	import { Button, Dropdown, Drawer, Swap, Icon, Layout, Menu, Portal, Row } from '../lib';
 
 	const sidebarItems = [
 		{
@@ -180,6 +179,10 @@
 		openMenu = !openMenu;
 	}
 
+	function closeOpenMenu() {
+		openMenu = false;
+	}
+
 	function handleCreateOpen() {
 		createOpen = !createOpen;
 	}
@@ -259,7 +262,7 @@
 		<Layout.Header {toggleSidebarWidth}>
 			<Button
 				shape="circle"
-				class="inline-block lg:hidden mr-4 bg-light-icon-background text-light-icon dark:bg-dark-icon-background dark:text-dark-icon border-none outline-none"
+				class="inline-block mr-4 bg-light-icon-background text-light-icon dark:bg-dark-icon-background dark:text-dark-icon border-none outline-none"
 				on:click={handleOpenMenu}
 			>
 				<Swap slot="icon">
@@ -268,16 +271,12 @@
 				</Swap>
 			</Button>
 
-			<img
-				src="/120x120-transparent.png"
-				alt="logo-icon"
-				class="h-10 mr-4 hidden lg:inline-block"
-			/>
+			<img src="/120x120-transparent.png" alt="logo-icon" class="h-10 mr-4" />
 
 			<div class="mr-2 font-bold text-xl opacity-80 dark:opacity-100">{pageTitle}</div>
 
 			<Layout.Header.Extra slot="extra">
-				<Button
+				<!-- <Button
 					shape="circle"
 					on:click={handleCreateOpen}
 					class="hidden lg:block mr-4 bg-light-icon-background text-light-icon dark:bg-dark-icon-background dark:text-dark-icon border-none outline-none"
@@ -286,15 +285,15 @@
 						<Icon slot="on" icon="add" />
 						<Icon slot="off" icon="close" />
 					</Swap>
-				</Button>
+				</Button> -->
 
-				<Button
+				<!-- <Button
 					on:click={handleSearchOpen}
 					shape="circle"
 					class="mr-4 bg-light-icon-background text-light-icon dark:bg-dark-icon-background dark:text-dark-icon border-none outline-none"
 				>
 					<Button.Icon slot="icon" icon="search" />
-				</Button>
+				</Button> -->
 
 				<Button
 					shape="circle"
@@ -342,11 +341,11 @@
 			{collapsed}
 		>
 			<Layout.Content.Sidebar class="max-w-[calc(100vh-64px)]">
-				{#each sidebarItems as item}
-					<Menu {collapsed}>
+				<Menu {collapsed}>
+					{#each sidebarItems as item}
 						<Menu.Item label={item.title} href={item.href} />
-					</Menu>
-				{/each}
+					{/each}
+				</Menu>
 			</Layout.Content.Sidebar>
 			<Layout.Content.Body
 				class="relative h-full lg:pl-0 overflow-x-hidden overflow-y-auto pt-[var(--sat)] pb-[var(--sab)] pr-[var(--sar)] pl-[var(--sal)]"
@@ -410,3 +409,17 @@
 		<CommandPalette handleClose={handleCloseSearch} results={[]} onChange={handleSearchChange} />
 	{/if}
 </Portal>
+
+<Portal>
+	{#if openMenu}
+		<Drawer handleClose={closeOpenMenu} placement="left">
+			<Drawer.Content class="overflow-y-auto p-4">
+				<Menu collapsed={false}>
+					{#each sidebarItems as item}
+						<Menu.Item label={item.title} href={item.href} on:click={closeOpenMenu} />
+					{/each}
+				</Menu>
+			</Drawer.Content>
+		</Drawer>
+	{/if}
+</Portal>