UI: improve placement of logo on small screens

src/UI/BigComponents/MenuDrawerIndex.svelte

@@ -60,6 +60,7 @@
   import ImageUploadQueue from "../../Logic/ImageProviders/ImageUploadQueue"
   import QueuedImagesView from "../Image/QueuedImagesView.svelte"
   import InsetSpacer from "../Base/InsetSpacer.svelte"
+  import UserCircle from "@rgossiaux/svelte-heroicons/solid/UserCircle"
 
   export let state: {
     favourites: FavouritesFeatureSource
@@ -133,14 +134,23 @@
     <SidebarUnit>
       <LoginToggle {state}>
         <LoginButton osmConnection={state.osmConnection} slot="not-logged-in" />
-        <div class="flex items-center gap-x-4">
+        <div class="flex items-center gap-x-4 w-fit m-2">
           {#if $userdetails.img}
-            <img alt="avatar" src={$userdetails.img} class="h-14 w-14 rounded-full" />
+            <img alt="avatar" src={$userdetails.img} class="h-12 w-12 rounded-full" />
+            {:else}
+            <UserCircle class="h-14 w-14" color="gray"/>
           {/if}
           <b>{$userdetails.name}</b>
         </div>
       </LoginToggle>
 
+      <Page {onlyLink} shown={pg.profile} bodyPadding="p-0 pb-4">
+        <svelte:fragment slot="header">
+          <CogIcon />
+          <Tr t={UserRelatedState.usersettingsConfig.title.GetRenderValue({})} />
+        </svelte:fragment>
+      </Page>
+
       <Page {onlyLink} shown={pg.usersettings} bodyPadding="p-0 pb-4">
         <svelte:fragment slot="header">
           <CogIcon />