layout: add edit icon on profile hover + sr-only link

assets/icons/pencil.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M20.71 7.04c.39-.39.39-1.04 0-1.41l-2.34-2.34c-.37-.39-1.02-.39-1.41 0l-1.84 1.83l3.75 3.75M3 17.25V21h3.75L17.81 9.93l-3.75-3.75L3 17.25Z"/></svg>

layouts/default.vue

@@ -61,12 +61,21 @@ async function logout() {
           <div
             class="flex min-[500px]:w-full max-[500px]:flex-col max-[500px]:ms-auto"
           >
-            <div>
-              <h2 class="text-2xl font-extrabold leading-none tracking-tight">
-                {{ user?.username || t('visitor') }}
-              </h2>
-              <h3 v-if="user">{{ user.fullname }}</h3>
-              <h4 v-if="user" class="opacity-50">{{ user.mail }}</h4>
+            <!-- eslint-disable-next-line vuejs-accessibility/click-events-have-key-events vuejs-accessibility/no-static-element-interactions -->
+            <div class="profile cursor-pointer" @click="navigateTo('/edit')">
+              <div>
+                <span
+                  class="text-2xl font-extrabold tracking-tight leading-none"
+                >
+                  {{ user?.username || t('visitor') }}
+                </span>
+                <YIcon v-if="user" name="pencil" size="1.25em" class="ms-2" />
+              </div>
+              <div v-if="user" class="leading-none">{{ user.fullname }}</div>
+              <div v-if="user" class="opacity-50">{{ user.mail }}</div>
+              <NuxtLink to="/edit" class="link sr-only focus:not-sr-only">
+                {{ t('footerlink_edit') }}
+              </NuxtLink>
             </div>
 
             <div class="min-[500px]:ms-auto max-[500px]:mt-2">
@@ -117,6 +126,10 @@ header .logo {
   width: 100px;
 }
 
+header .profile:not(:hover) .nuxt-icon {
+  display: none;
+}
+
 .focus-target:not(:focus-visible) {
   outline: none;
 }

locales/en.json

@@ -45,6 +45,7 @@
     },
     "theme": "Theme",
     "username": "Username",
+    "visitor": "Visitor",
     "v": {
         "email": "Invalid email: must be alphanumeric and '_.' characters only (e.g. someone{'@'}example.com, s0me-1{'@'}example.com)",
         "field_invalid": "Field value is invalid",

pages/index.vue

@@ -4,6 +4,8 @@ definePageMeta({
 })
 
 const { t } = useI18n()
+const isLoggedIn = await useIsLoggedIn()
+const settings = await useSettings()
 const appsData = await useApps()
 
 useHead({