feat: add setting to hide side menu

messages/en.json

@@ -357,6 +357,8 @@
 	"settings_enable_developer": "Enable Developer Mode",
 	"settings_enable_developer_desc": "Show raw data used for development and debugging",
 	"settings_general": "General",
+	"settings_hide_side_menu": "Hide Side Menu",
+	"settings_hide_side_menu_desc": "Maximize available horizontal space by collapsing the navigation menu on larger screens.",
 	"settings_language_selector": "Language Selector",
 	"settings_page_subtitle": "Configure Unicove",
 	"settings_prevent_account_page_switching": "Remain on current page when switching accounts",

src/lib/components/navigation/mobilenavigation.svelte

@@ -10,6 +10,9 @@
 
 	const context = getContext<UnicoveContext>('state');
 
+	// Always show the button when hide menu setting is active
+	const showMenuButton = $derived(!!context.settings.data.hideSideMenu);
+
 	interface Props {
 		network: NetworkState;
 		class?: string;
@@ -62,27 +65,29 @@
 	focus-visible:ring-inset
 	focus-visible:ring-solar-500
 	md:hidden
+	md:data-[show=true]:flex
 	{className}
 	"
 	use:melt={$trigger}
 	aria-label="menu-open"
 	id="menu-open"
 	data-session={!!context.wharf.session}
+	data-show={showMenuButton}
 >
 	<Unicovelogo small />
 	<Menu class="size-8 text-inherit" />
 </button>
 
 {#if $open}
-	<div class="md:hidden" use:melt={$portalled}>
+	<div use:melt={$portalled}>
 		<div
 			use:melt={$overlay}
-			class="fixed inset-0 z-50 bg-black/50 md:bg-transparent"
+			class="fixed inset-0 z-50 bg-black/50"
 			transition:fade={{ duration: 150 }}
 		></div>
 		<nav
 			use:melt={$content}
-			class="fixed left-0 top-0 z-50 grid h-svh grid-rows-[auto_1fr] gap-8 bg-shark-950 px-8 pt-4 shadow-lg focus:outline-none md:bg-transparent md:shadow-none"
+			class="fixed left-0 top-0 z-50 grid h-svh grid-rows-[auto_1fr] gap-8 bg-shark-950 px-8 pt-4 shadow-lg focus:outline-none"
 			transition:fly={{
 				x: -350,
 				duration: 300,

src/lib/state/settings.svelte.ts

@@ -5,7 +5,8 @@ export enum SettingKeys {
 	'debugMode' = 'debugMode',
 	'preventAccountPageSwitching' = 'preventAccountPageSwitching',
 	'searchAccountSwitch' = 'searchAccountSwitch',
-	'searchShowPages' = 'searchShowPages'
+	'searchShowPages' = 'searchShowPages',
+	'hideSideMenu' = 'hideSideMenu'
 }
 
 export type SettingsData = Record<SettingKeys, unknown>;
@@ -16,7 +17,8 @@ export class SettingsState {
 		debugMode: false,
 		preventAccountPageSwitching: false,
 		searchAccountSwitch: false,
-		searchShowPages: true
+		searchShowPages: true,
+		hideSideMenu: false
 	});
 
 	constructor() {

src/routes/[network]/+layout.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { Checksum256, type NameType } from '@wharfkit/antelope';
 	import { chainLogos } from '@wharfkit/common';
-	import { onMount, setContext, untrack } from 'svelte';
+	import { getContext, onMount, setContext, untrack } from 'svelte';
 	import X from 'lucide-svelte/icons/circle-x';
 	import * as env from '$env/static/public';
 
@@ -14,7 +14,6 @@
 	import MobileNavigation from '$lib/components/navigation/mobilenavigation.svelte';
 	import SideMenuContent from '$lib/components/navigation/sidemenu.svelte';
 	import AccountSwitcher from '$lib/components/accountswitch.svelte';
-	import UnicoveLogo from '$lib/assets/unicovelogo.svelte';
 	import Search from '$lib/components/search/input.svelte';
 	import { SettingsState } from '$lib/state/settings.svelte.js';
 	import Unicovelogo from '$lib/assets/unicovelogo.svelte';
@@ -44,6 +43,9 @@
 		}
 	});
 
+	const context = getContext<UnicoveContext>('state');
+	let showSideMenu = $derived(!context.settings.data.hideSideMenu);
+
 	export function setAccount(
 		state: NetworkState,
 		name: NameType,
@@ -188,16 +190,18 @@
 	md:gap-x-4
 	"
 >
-	<aside
-		class="relative col-start-1 col-end-3 row-span-full row-start-1 hidden h-full grid-rows-subgrid md:grid"
-	>
-		<nav class="sticky top-4 row-span-2 grid max-h-svh grid-rows-subgrid content-start">
-			<a href="/{data.network}" class="grid h-12 items-center" aria-label="home">
-				<Unicovelogo small class="items-start" />
-			</a>
-			<SideMenuContent network={data.network} />
-		</nav>
-	</aside>
+	{#if showSideMenu}
+		<aside
+			class="relative col-start-1 col-end-3 row-span-full row-start-1 hidden h-full grid-rows-subgrid md:grid"
+		>
+			<nav class="sticky top-4 row-span-2 grid max-h-svh grid-rows-subgrid content-start">
+				<a href="/{data.network}" class="grid h-12 items-center" aria-label="home">
+					<Unicovelogo small class="items-start" />
+				</a>
+				<SideMenuContent network={data.network} />
+			</nav>
+		</aside>
+	{/if}
 
 	<header class="col-span-full row-start-1 flex h-12 items-center justify-between">
 		<MobileNavigation network={data.network} />
@@ -212,7 +216,13 @@
 	</header>
 
 	<main
-		class="col-span-full col-start-1 row-span-full row-start-2 grid grid-cols-subgrid content-start gap-x-4 *:col-span-full md:col-start-3 md:col-end-13 md:px-0 lg:col-end-12"
+		data-full-width={!showSideMenu}
+		class="col-span-full col-start-1 row-span-full row-start-2 grid grid-cols-subgrid content-start gap-x-4 *:col-span-full
+		md:col-end-13
+		md:px-0
+		md:data-[full-width=false]:col-start-3
+		lg:data-[full-width=false]:col-end-12
+		"
 	>
 		{@render children()}
 	</main>

src/routes/[network]/settings/+page.svelte

@@ -15,6 +15,7 @@
 	let searchShowPages = $state(!!context.settings.data.searchShowPages);
 	let advancedMode = $state(!!context.settings.data.advancedMode);
 	let debugMode = $state(!!context.settings.data.debugMode);
+	let hideSideMenu = $state(!!context.settings.data.hideSideMenu);
 
 	$effect(() => {
 		context.settings.data = {
@@ -23,7 +24,8 @@
 			searchAccountSwitch,
 			searchShowPages,
 			// Override debug mode if advanced mode is disabled
-			debugMode: advancedMode ? debugMode : false
+			debugMode: advancedMode ? debugMode : false,
+			hideSideMenu
 		};
 	});
 </script>
@@ -79,6 +81,14 @@
 		<Switch id="advanced-mode" bind:checked={advancedMode} />
 	</div>
 
+	<div class="flex items-center justify-between">
+		<Stack class="gap-1">
+			<Label for="hide-side-menu">{m.settings_hide_side_menu()}</Label>
+			<p class="caption text-sm">{m.settings_hide_side_menu_desc()}</p>
+		</Stack>
+		<Switch id="hide-side-menu" bind:checked={hideSideMenu} />
+	</div>
+
 	{#if advancedMode}
 		<div class="flex items-center justify-between">
 			<h2 class="text-muted text-xl font-semibold">{m.settings_developer()}</h2>
@@ -92,6 +102,7 @@
 		</div>
 	{/if}
 </div>
+
 {#if debugMode}
 	<Code>{JSON.stringify(context.settings.data, null, 2)}</Code>
 {/if}