Mobile navs: bigger buttons and hide new? (#720)

* bigger buttons and hide new

* icon update

Author: gary149

src/lib/components/MobileNav.svelte

@@ -3,10 +3,11 @@
 	import { createEventDispatcher } from "svelte";
 	import { browser } from "$app/environment";
 	import { base } from "$app/paths";
+	import { page } from "$app/stores";
 
 	import CarbonClose from "~icons/carbon/close";
-	import CarbonAdd from "~icons/carbon/add";
 	import CarbonTextAlignJustify from "~icons/carbon/text-align-justify";
+	import IconNew from "$lib/components/icons/IconNew.svelte";
 
 	export let isOpen = false;
 	export let title: string | undefined;
@@ -30,18 +31,20 @@
 </script>
 
 <nav
-	class="flex h-12 items-center justify-between border-b bg-gray-50 px-4 md:hidden dark:border-gray-800 dark:bg-gray-800/70"
+	class="flex h-12 items-center justify-between border-b bg-gray-50 px-3 md:hidden dark:border-gray-800 dark:bg-gray-800/70"
 >
 	<button
 		type="button"
-		class="-ml-3 flex h-9 w-9 shrink-0 items-center justify-center"
+		class="-ml-3 flex size-12 shrink-0 items-center justify-center text-lg"
 		on:click={() => dispatch("toggle", true)}
 		aria-label="Open menu"
 		bind:this={openEl}><CarbonTextAlignJustify /></button
 	>
 	<span class="truncate px-4">{title}</span>
-	<a href={`${base}/`} class="-mr-3 flex h-9 w-9 shrink-0 items-center justify-center"
-		><CarbonAdd /></a
+	<a
+		class:invisible={!$page.params.id}
+		href="{base}/"
+		class="-mr-3 flex size-12 shrink-0 items-center justify-center text-lg"><IconNew /></a
 	>
 </nav>
 <nav
@@ -52,7 +55,7 @@
 	<div class="flex h-12 items-center px-4">
 		<button
 			type="button"
-			class="-mr-3 ml-auto flex h-9 w-9 items-center justify-center"
+			class="-mr-3 ml-auto flex size-12 items-center justify-center text-lg"
 			on:click={() => dispatch("toggle", false)}
 			aria-label="Close menu"
 			bind:this={closeEl}><CarbonClose /></button

src/lib/components/icons/IconNew.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	export let classNames = "";
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	class={classNames}
+	width="1em"
+	height="1em"
+	fill="none"
+	viewBox="0 0 32 32"
+	><path
+		fill="currentColor"
+		fill-rule="evenodd"
+		d="M3.143 20.286h4.286v2.142H3.143A2.143 2.143 0 0 1 1 20.287V3.143A2.143 2.143 0 0 1 3.143 1h17.143a2.143 2.143 0 0 1 2.142 2.143v4.286h-2.142V3.143H3.143v17.143Zm9.643-12.857v3.214H16v2.143h-3.214V16h-2.143v-3.214H7.429v-2.143h3.214V7.429h2.143Zm14.185 2.639 3.533 3.532a1.7 1.7 0 0 1 0 2.4L15.5 31H9.57v-5.928l15-15.004a1.7 1.7 0 0 1 2.4 0Zm-15.257 18.79h2.897l10.116-10.116-2.899-2.897L11.714 25.96v2.897ZM23.346 14.33l2.897 2.897 2.429-2.43-2.897-2.896-2.43 2.429Z"
+		clip-rule="evenodd"
+	/></svg
+>