From f1337f90162804ca898886ccd70b6110d12430da Mon Sep 17 00:00:00 2001
From: Alessandro Jean <alessandrojean@gmail.com>
Date: Sun, 6 Mar 2022 00:20:21 -0300
Subject: [PATCH] Update the help center UX.

---
 index.html                        |   2 +-
 src/components/AppNavbar.vue      |  99 +------------------------
 src/components/ContentBody.vue    |   8 +++
 src/components/ContentFooter.vue  |  89 +++++++++++++++++++++--
 src/components/ContentTitle.vue   |   2 +-
 src/components/HomeHeader.vue     |   4 +-
 src/components/LocaleSelector.vue |   8 ++-
 src/components/PageAside.vue      |  52 ++++++++++++++
 src/components/PageContents.vue   | 116 ++++++++++++++++++++++++++++++
 src/components/PageHeader.vue     |  14 ++--
 src/components/ProfileMenu.vue    | 113 +++++++++++++++++++++++++++++
 src/composables/useMarkdown.js    |   4 +-
 src/i18n/messages/en-US.js        |   8 +++
 src/i18n/messages/pt-BR.js        |   8 +++
 src/router/index.js               |  14 ++--
 src/views/about/Accessibility.vue |   4 +-
 src/views/about/Index.vue         |  13 ++--
 src/views/about/Instructions.vue  |   4 +-
 src/views/about/PrivacyPolicy.vue |   4 +-
 src/views/about/TermsOfUse.vue    |   4 +-
 tailwind.config.js                |  18 +++--
 21 files changed, 451 insertions(+), 137 deletions(-)
 create mode 100644 src/components/PageAside.vue
 create mode 100644 src/components/PageContents.vue
 create mode 100644 src/components/ProfileMenu.vue
diff --git a/index.html b/index.html
index 19b4593b..f77cb91e 100644
--- a/index.html
+++ b/index.html
@@ -28,7 +28,7 @@
       google.charts.load('current', { packages: ['table'] })
     </script>
   </head>
-  <body class="dark:bg-gray-900 antialiased">
+  <body class="dark:bg-gray-900 antialiased font-sans supports-var-font:font-sans-var">
     <noscript>
       <strong>
         Pedimos desculpas, mas o <%= htmlWebpackPlugin.options.title %> não funciona corretamente com o JavaScript desabilitado. Por favor, habilite-o para continuar.
diff --git a/src/components/AppNavbar.vue b/src/components/AppNavbar.vue
index 6a6847ae..80e62bdc 100644
--- a/src/components/AppNavbar.vue
+++ b/src/components/AppNavbar.vue
@@ -2,31 +2,20 @@
 import { computed, inject, onMounted, onUnmounted, ref, toRefs } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import { useAuthStore } from '@/stores/auth'
 import { useSheetStore } from '@/stores/sheet'
 
-import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'
-
-import {
-  CogIcon,
-  ChevronDownIcon,
-  LibraryIcon,
-  LogoutIcon,
-  SearchIcon
-} from '@heroicons/vue/solid'
+import { LibraryIcon, SearchIcon } from '@heroicons/vue/solid'
 
 import FadeTransition from '@/components/transitions/FadeTransition.vue'
-import ScaleTransition from '@/components/transitions/ScaleTransition.vue'
+import ProfileMenu from '@/components/ProfileMenu.vue'
 import ThemeToggle from '@/components/ThemeToggle.vue'
 
 const props = defineProps({ transparent: Boolean })
 
-const authStore = useAuthStore()
 const sheetStore = useSheetStore()
 
 const { t } = useI18n({ useScope: 'global' })
 
-const open = ref(false)
 const { transparent } = toRefs(props)
 
 const shared = computed(() => sheetStore.shared)
@@ -53,12 +42,6 @@ const desktopNavigation = computed(() => {
   return navigation.value.filter((navItem) => !navItem.mobileOnly)
 })
 
-const profileImageUrl = computed(() => authStore.profileImageUrl)
-
-async function signOut() {
-  await authStore.signOut()
-}
-
 const isMac = ref(
   navigator.userAgentData
     ? navigator.userAgentData.platform.toLowerCase().indexOf('mac') > -1
@@ -92,8 +75,6 @@ const isOnTop = computed(() => {
 
 onMounted(() => window.addEventListener('scroll', handleScroll))
 onUnmounted(() => window.removeEventListener('scroll', handleScroll))
-
-const showSettingsDialog = inject('showSettingsDialog')
 </script>
 
 <template>
@@ -212,81 +193,7 @@ const showSettingsDialog = inject('showSettingsDialog')
 
           <ThemeToggle class="ml-1" />
 
-          <!-- Profile dropdown -->
-          <Menu
-            as="div"
-            class="ml-3 md:relative hidden sm:inline-block"
-            v-slot="{ open }"
-          >
-            <div>
-              <MenuButton
-                class="max-w-xs flex items-center text-sm focus:outline-none group"
-              >
-                <span class="sr-only">{{
-                  t('dashboard.header.menu.open')
-                }}</span>
-                <div
-                  class="w-8 h-8 rounded-full bg-cover shadow-avatar transition-shadow motion-reduce:transition-none group-focus-visible:ring-2 group-focus-visible:ring-offset-2 group-focus-visible:ring-primary-500 group-focus-visible:ring-offset-gray-700"
-                  :style="{ backgroundImage: `url('${profileImageUrl}')` }"
-                />
-                <span aria-hidden="true">
-                  <ChevronDownIcon
-                    :class="[
-                      open ? '-scale-y-100' : '',
-                      'w-5 h-5 ml-1 text-gray-300 group-hover:text-gray-100 group-focus-visible:text-gray-100 motion-safe:transition-transform'
-                    ]"
-                  />
-                </span>
-              </MenuButton>
-            </div>
-            <ScaleTransition>
-              <MenuItems
-                as="ul"
-                class="fixed md:absolute z-40 left-8 md:left-auto right-8 md:right-0 bottom-8 md:bottom-auto md:w-48 mt-2 py-1 origin-bottom md:origin-top-right bg-white dark:bg-gray-700 md:dark:bg-gray-700 divide-y divide-gray-100 dark:divide-gray-600 rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
-              >
-                <div class="pb-1">
-                  <MenuItem v-slot="{ active }">
-                    <button
-                      type="button"
-                      :class="[
-                        active
-                          ? 'bg-gray-100 dark:bg-gray-600 md:dark:bg-gray-600/50'
-                          : '',
-                        'group flex items-center w-full px-4 py-2.5 text-sm text-gray-700 dark:text-gray-300 dark:hover:bg-gray-600 dark:md:hover:bg-gray-600/50 dark:hover:text-gray-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-primary-500 focus-visible:ring-offset-gray-700'
-                      ]"
-                      @click="showSettingsDialog"
-                    >
-                      <span aria-hidden="true">
-                        <CogIcon
-                          class="w-5 h-5 mr-3 text-gray-500 group-hover:text-gray-600 dark:text-gray-400 dark:group-hover:text-gray-300"
-                        />
-                      </span>
-                      {{ t('dashboard.header.menu.settings') }}
-                    </button>
-                  </MenuItem>
-                </div>
-                <div class="pt-1">
-                  <MenuItem v-slot="{ active }">
-                    <button
-                      type="button"
-                      :class="[
-                        active ? 'bg-gray-100 dark:bg-gray-600' : '',
-                        'group flex items-start w-full px-4 py-2.5 text-sm text-gray-700 dark:text-gray-300 dark:hover:bg-gray-600 dark:md:hover:bg-gray-600/50 dark:hover:text-gray-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-primary-500 focus-visible:ring-offset-gray-700'
-                      ]"
-                      @click.stop="signOut"
-                    >
-                      <span aria-hidden="true">
-                        <LogoutIcon
-                          class="w-5 h-5 mr-3 text-red-500 group-hover:text-red-600 dark:text-red-400 dark:group-hover:text-red-500"
-                        />
-                      </span>
-                      {{ t('dashboard.header.menu.signOut') }}
-                    </button>
-                  </MenuItem>
-                </div>
-              </MenuItems>
-            </ScaleTransition>
-          </Menu>
+          <ProfileMenu />
         </div>
       </div>
     </div>
diff --git a/src/components/ContentBody.vue b/src/components/ContentBody.vue
index 0da23615..4af16a09 100644
--- a/src/components/ContentBody.vue
+++ b/src/components/ContentBody.vue
@@ -24,4 +24,12 @@
 .content-body kbd {
   @apply inline-flex rounded-md py-0.5 px-2 text-xs dark:text-white dark:bg-gray-700;
 }
+
+.content-body :where(h1, h2, h3, h4, h5, h6) {
+  @apply scroll-mt-24;
+}
+
+.content-body .table-of-contents {
+  @apply hidden;
+}
 </style>
diff --git a/src/components/ContentFooter.vue b/src/components/ContentFooter.vue
index e2cddf18..ab9d3a51 100644
--- a/src/components/ContentFooter.vue
+++ b/src/components/ContentFooter.vue
@@ -1,8 +1,14 @@
 <script setup>
+import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
+import { useRoute } from 'vue-router'
 
 import useAppInfo from '@/composables/useAppInfo'
 
+import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/vue/solid'
+
+import LocaleSelector from '@/components/LocaleSelector.vue'
+
 defineProps({
   date: {
     type: String,
@@ -10,19 +16,92 @@ defineProps({
   }
 })
 
-const { appVersion } = useAppInfo()
-const { t, d } = useI18n({ useScope: 'global' })
+const { t, d, locale } = useI18n({ useScope: 'global' })
+
+const route = useRoute()
+const aboutRoute = computed(() => route.matched[0])
+const groups = computed(() =>
+  aboutRoute.value.children.reduce((groups, route) => {
+    if (groups[route.meta.category]) {
+      groups[route.meta.category].push(route)
+    } else {
+      groups[route.meta.category] = [route]
+    }
+
+    return groups
+  }, {})
+)
+
+const aboutRoutes = computed(() => Object.values(groups.value).flat())
+
+const currentIdx = computed(() =>
+  aboutRoutes.value.findIndex((r) => r.name === route.name)
+)
+const previous = computed(() => aboutRoutes.value[currentIdx.value - 1])
+const next = computed(() => aboutRoutes.value[currentIdx.value + 1])
 </script>
 
 <template>
   <footer class="content-footer">
-    <p>{{ t('footer.version', { version: appVersion }) }}</p>
-    <p>{{ t('footer.lastUpdate', [d(date, 'long')]) }}</p>
+    <div
+      class="pb-4 space-y-3 sm:space-y-0 flex flex-col sm:flex-row sm:justify-between items-center text-sm border-b border-gray-300 dark:border-gray-600"
+    >
+      <LocaleSelector class="w-56" v-model="locale" top />
+      <time :datetime="date" class="text-gray-500 dark:text-gray-400">
+        {{ t('footer.lastUpdate', [d(date, 'long')]) }}
+      </time>
+    </div>
+    <div
+      class="-mx-1 flex flex-col md:flex-row md:justify-between md:items-center pt-4 space-y-4 md:space-y-0"
+    >
+      <RouterLink
+        v-if="previous"
+        :to="{ name: previous.name }"
+        class="link previous has-ring-focus"
+      >
+        <div class="flex items-center">
+          <ChevronLeftIcon class="w-4 h-4 inline-block -ml-1 mr-0.5" />
+          <span>{{ t('about.previous') }}</span>
+        </div>
+        <span class="title">{{ previous.meta.title() }}</span>
+      </RouterLink>
+      <RouterLink
+        v-if="next"
+        :to="{ name: next.name }"
+        class="link next has-ring-focus"
+      >
+        <div class="flex items-center justify-end">
+          <span>{{ t('about.next') }}</span>
+          <ChevronRightIcon class="w-4 h-4 inline-block ml-0.5 -mr-1" />
+        </div>
+        <span class="title">{{ next.meta.title() }}</span>
+      </RouterLink>
+    </div>
   </footer>
 </template>
 
 <style lang="postcss" scoped>
 .content-footer {
-  @apply space-y-2 sm:space-y-0 text-center sm:text-left sm:flex sm:justify-between text-sm text-gray-500 dark:text-gray-400 border-t border-gray-300 dark:border-gray-600 pt-3 mt-10;
+  @apply space-y-2 sm:space-y-0 pt-3 mt-10
+    text-center sm:text-left;
+}
+
+.link {
+  @apply flex flex-col text-xs text-left rounded p-1;
+}
+
+.link.next {
+  @apply ml-auto text-right;
+}
+
+.link .title {
+  @apply text-base font-medium
+    text-primary-600 dark:text-primary-400;
+}
+
+.link:where(:hover, :focus-visible) .title {
+  @apply underline underline-offset-1 decoration-2
+    decoration-primary-600/60 dark:decoration-primary-400/80
+    text-primary-700 dark:text-primary-300;
 }
 </style>
diff --git a/src/components/ContentTitle.vue b/src/components/ContentTitle.vue
index a49e07c4..f020ea3d 100644
--- a/src/components/ContentTitle.vue
+++ b/src/components/ContentTitle.vue
@@ -6,7 +6,7 @@
 
 <style lang="postcss" scoped>
 .content-title {
-  @apply py-20 md:py-24 text-center font-display
+  @apply py-20 md:pb-10 md:pt-10 font-display
     font-bold leading-7 text-3xl md:text-4xl
     text-gray-800 dark:text-gray-100;
 }
diff --git a/src/components/HomeHeader.vue b/src/components/HomeHeader.vue
index b0f47a88..cb866d0d 100644
--- a/src/components/HomeHeader.vue
+++ b/src/components/HomeHeader.vue
@@ -6,6 +6,7 @@ import { useAuthStore } from '@/stores/auth'
 
 import { LibraryIcon } from '@heroicons/vue/solid'
 
+import ProfileMenu from '@/components/ProfileMenu.vue'
 import ThemeToggle from '@/components/ThemeToggle.vue'
 import SignInWithGoogleButton from '@/components/SignInWithGoogleButton.vue'
 
@@ -41,7 +42,6 @@ const { t } = useI18n({ useScope: 'global' })
           </router-link>
         </div>
         <div class="flex items-center">
-          <ThemeToggle light class="mr-3" />
           <router-link
             :to="{ name: 'DashboardHome' }"
             class="button is-primary is-rounded"
@@ -50,6 +50,8 @@ const { t } = useI18n({ useScope: 'global' })
             {{ t('home.header.dashboard') }}
           </router-link>
           <SignInWithGoogleButton collapse />
+          <ThemeToggle light class="ml-3" />
+          <ProfileMenu v-if="signedIn" class="ml-3" light hide-settings />
         </div>
       </div>
     </div>
diff --git a/src/components/LocaleSelector.vue b/src/components/LocaleSelector.vue
index 3845473d..fb501188 100644
--- a/src/components/LocaleSelector.vue
+++ b/src/components/LocaleSelector.vue
@@ -14,7 +14,8 @@ defineProps({
   modelValue: {
     type: String,
     required: true
-  }
+  },
+  top: Boolean
 })
 
 defineEmits(['update:modelValue'])
@@ -65,7 +66,7 @@ function createFlagUrl(country) {
 
     <Listbox
       as="div"
-      class="hidden md:block"
+      class="hidden md:block relative"
       :model-value="modelValue"
       @update:model-value="$emit('update:modelValue', $event)"
     >
@@ -98,7 +99,8 @@ function createFlagUrl(country) {
         leave-to-class="opacity-0"
       >
         <ListboxOptions
-          class="absolute z-10 mt-1 w-56 bg-white dark:supports-backdrop-blur:bg-gray-700/80 dark:bg-gray-700 dark:backdrop-blur shadow-lg max-h-56 rounded-md py-1 text-base border border-gray-200 dark:border-gray-600 overflow-auto focus:outline-none sm:text-sm"
+          :class="top ? 'top-0 translate-y-[calc(-100%-0.25rem)]' : 'mt-1'"
+          class="absolute z-10 w-56 bg-white dark:supports-backdrop-blur:bg-gray-700/80 dark:bg-gray-700 dark:backdrop-blur shadow-lg max-h-56 rounded-md py-1 text-base border border-gray-200 dark:border-gray-600 overflow-auto focus:outline-none sm:text-sm"
         >
           <ListboxOption
             as="template"
diff --git a/src/components/PageAside.vue b/src/components/PageAside.vue
new file mode 100644
index 00000000..4f3a4ec5
--- /dev/null
+++ b/src/components/PageAside.vue
@@ -0,0 +1,52 @@
+<script setup>
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRoute } from 'vue-router'
+
+const route = useRoute()
+const aboutRoute = computed(() => route.matched[0])
+
+const groups = computed(() =>
+  aboutRoute.value.children.reduce((groups, route) => {
+    if (groups[route.meta.category]) {
+      groups[route.meta.category].push(route)
+    } else {
+      groups[route.meta.category] = [route]
+    }
+
+    return groups
+  }, {})
+)
+
+const { t } = useI18n({ useScope: 'global' })
+</script>
+
+<template>
+  <aside class="w-56 py-8">
+    <nav class="sticky top-24 text-sm">
+      <p class="font-semibold font-display text-base dark:text-gray-100 pl-1">
+        {{ t('about.helpCenter') }}
+      </p>
+      <div class="space-y-10 mt-8">
+        <div v-for="(group, name) in groups" :key="name">
+          <p
+            class="uppercase tracking-wider font-semibold dark:font-bold text-xs pl-1"
+          >
+            {{ t('about.categories.' + name) }}
+          </p>
+          <ul class="space-y-3.5 mt-4 dark:text-gray-200 -ml-2">
+            <li v-for="route in group" :key="route.path">
+              <RouterLink
+                :to="{ name: route.name }"
+                class="px-3 py-1.5 has-ring-focus rounded-md text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 motion-safe:transition-colors"
+                active-class="font-semibold text-primary-800 hover:text-primary-800 dark:!text-gray-100 bg-primary-100 dark:bg-gray-600 hover:!bg-primary-100 dark:hover:!bg-gray-600"
+              >
+                {{ route.meta.title() }}
+              </RouterLink>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </nav>
+  </aside>
+</template>
diff --git a/src/components/PageContents.vue b/src/components/PageContents.vue
new file mode 100644
index 00000000..c0e2cf92
--- /dev/null
+++ b/src/components/PageContents.vue
@@ -0,0 +1,116 @@
+<script setup>
+import { nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRoute } from 'vue-router'
+
+const { t, locale } = useI18n({ useScope: 'global' })
+const route = useRoute()
+
+const pageContents = ref([])
+const active = ref(-1)
+const previousActive = ref(-1)
+const observer = ref(null)
+
+watch(active, (_, oldValue) => {
+  previousActive.value = oldValue
+})
+
+function buildPageContents() {
+  const contents = Array.from(
+    document.querySelectorAll('.table-of-contents ol > li > a')
+  )
+
+  if (contents.length > 0 && pageContents.value.length !== 0) {
+    observer.value.disconnect()
+  }
+
+  pageContents.value = contents.map((el) => ({
+    id: el.hash,
+    title: el.textContent
+  }))
+
+  // Await for the scroll to finish.
+  setTimeout(() => {
+    contents.forEach((el) =>
+      observer.value.observe(document.querySelector(el.hash))
+    )
+  }, 200)
+}
+
+function initializeObserver() {
+  observer.value = new IntersectionObserver(
+    (entries) => {
+      const current = entries.find((entry) => entry.isIntersecting)
+      const hash = current?.target?.id
+
+      const newActive = pageContents.value.findIndex(
+        (content) => content.id === '#' + hash
+      )
+
+      if (
+        !current &&
+        newActive === -1 &&
+        active.value === 0 &&
+        previousActive.value === 1
+      ) {
+        active.value = -1
+        return
+      }
+
+      active.value = newActive === -1 ? active.value : newActive
+    },
+    { threshold: 0.5, rootMargin: '0px 0px -80% 0px' }
+  )
+}
+
+onMounted(() => {
+  initializeObserver()
+  buildPageContents()
+})
+
+onUnmounted(() => observer.value?.disconnect())
+
+watch(
+  () => route.path,
+  async () => {
+    observer.value?.disconnect()
+    await nextTick()
+    buildPageContents()
+  }
+)
+
+watch(locale, async () => {
+  await nextTick()
+  buildPageContents()
+})
+
+watch(pageContents, () => {
+  active.value = -1
+  previousActive.value = -1
+})
+</script>
+
+<template>
+  <aside class="w-56 py-8 px-2">
+    <nav class="sticky top-24 text-sm">
+      <p class="font-semibold font-display dark:text-gray-100">
+        {{ t('about.onThisPage') }}
+      </p>
+      <ul class="space-y-2.5 mt-5 dark:text-gray-200">
+        <li v-for="(header, idx) in pageContents" :key="header.id">
+          <a
+            :href="header.id"
+            :class="[
+              'has-ring-focus rounded',
+              idx === active
+                ? 'font-medium'
+                : 'text-gray-500 dark:text-gray-400'
+            ]"
+          >
+            {{ header.title }}
+          </a>
+        </li>
+      </ul>
+    </nav>
+  </aside>
+</template>
diff --git a/src/components/PageHeader.vue b/src/components/PageHeader.vue
index 39e8f7a2..6e8a9782 100644
--- a/src/components/PageHeader.vue
+++ b/src/components/PageHeader.vue
@@ -6,6 +6,7 @@ import { useAuthStore } from '@/stores/auth'
 
 import { LibraryIcon } from '@heroicons/vue/solid'
 
+import ProfileMenu from '@/components/ProfileMenu.vue'
 import ThemeToggle from '@/components/ThemeToggle.vue'
 
 const { t } = useI18n({ useScope: 'global' })
@@ -15,9 +16,11 @@ const signedIn = computed(() => authStore.signedIn)
 </script>
 
 <template>
-  <header class="h-16 select-none">
+  <header
+    class="z-50 h-16 select-none border-b border-gray-300 dark:border-gray-700 fixed top-0 inset-x-0 bg-white dark:bg-gray-900 supports-backdrop-blur:backdrop-blur-md supports-backdrop-blur:bg-opacity-90 dark:supports-backdrop-blur:bg-opacity-80"
+  >
     <div
-      class="max-w-prose mx-auto px-4 sm:px-6 lg:px-0 flex items-center justify-between h-full"
+      class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between h-full"
     >
       <router-link
         :to="{ name: 'Home' }"
@@ -39,15 +42,16 @@ const signedIn = computed(() => authStore.signedIn)
           BETA
         </sup>
       </router-link>
-      <div class="inline-flex shrink-0">
-        <ThemeToggle light />
+      <div class="inline-flex shrink-0 items-center">
         <router-link
           :to="{ name: 'DashboardHome' }"
-          class="button is-primary is-rounded ml-3"
+          class="button is-primary is-rounded mr-3"
           v-if="signedIn"
         >
           {{ t('home.header.dashboard') }}
         </router-link>
+        <ThemeToggle light />
+        <ProfileMenu v-if="signedIn" class="ml-3" light hide-settings />
       </div>
     </div>
   </header>
diff --git a/src/components/ProfileMenu.vue b/src/components/ProfileMenu.vue
new file mode 100644
index 00000000..ad7e2b45
--- /dev/null
+++ b/src/components/ProfileMenu.vue
@@ -0,0 +1,113 @@
+<script setup>
+import { computed, inject } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import { useAuthStore } from '@/stores/auth'
+
+import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'
+
+import { CogIcon, ChevronDownIcon, LogoutIcon } from '@heroicons/vue/solid'
+
+import ScaleTransition from '@/components/transitions/ScaleTransition.vue'
+
+const props = defineProps({
+  light: Boolean,
+  hideSettings: Boolean
+})
+
+const { t } = useI18n({ useScope: 'global' })
+const authStore = useAuthStore()
+
+const profileImageUrl = computed(() => authStore.profileImageUrl)
+
+async function signOut() {
+  await authStore.signOut()
+}
+
+const showSettingsDialog = !props.hideSettings
+  ? inject('showSettingsDialog')
+  : () => {}
+</script>
+
+<template>
+  <Menu
+    as="div"
+    class="ml-3 md:relative hidden sm:inline-block"
+    v-slot="{ open }"
+  >
+    <div>
+      <MenuButton
+        class="max-w-xs flex items-center text-sm focus:outline-none group"
+      >
+        <span class="sr-only">{{ t('dashboard.header.menu.open') }}</span>
+        <div
+          :class="[
+            'w-8 h-8 rounded-full bg-cover shadow-avatar transition-shadow motion-reduce:transition-none group-focus-visible:ring-2 group-focus-visible:ring-offset-2 group-focus-visible:ring-primary-500',
+            light
+              ? 'group-focus-visible:ring-offset-white dark:group-focus-visible:ring-offset-gray-900'
+              : 'group-focus-visible:ring-offset-gray-700'
+          ]"
+          :style="{ backgroundImage: `url('${profileImageUrl}')` }"
+        />
+        <span aria-hidden="true">
+          <ChevronDownIcon
+            :class="[
+              open ? '-scale-y-100' : '',
+              'w-5 h-5 ml-1 motion-safe:transition-transform',
+              light
+                ? 'text-gray-400 dark:text-gray-300 group-hover:text-gray-500 dark:group-hover:text-gray-100 group-focus-visible:text-gray-500 dark:group-focus-visible:text-gray-100'
+                : 'text-gray-300 group-hover:text-gray-100 group-focus-visible:text-gray-100'
+            ]"
+          />
+        </span>
+      </MenuButton>
+    </div>
+    <ScaleTransition>
+      <MenuItems
+        as="ul"
+        class="fixed md:absolute z-40 left-8 md:left-auto right-8 md:right-0 bottom-8 md:bottom-auto md:w-48 mt-2 py-1 origin-bottom md:origin-top-right bg-white dark:bg-gray-700 md:dark:bg-gray-700 divide-y divide-gray-100 dark:divide-gray-600 rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
+      >
+        <div class="pb-1" v-if="!hideSettings">
+          <MenuItem v-slot="{ active }">
+            <button
+              type="button"
+              :class="[
+                active
+                  ? 'bg-gray-100 dark:bg-gray-600 md:dark:bg-gray-600/50'
+                  : '',
+                'group flex items-center w-full px-4 py-2.5 text-sm text-gray-700 dark:text-gray-300 dark:hover:bg-gray-600 dark:md:hover:bg-gray-600/50 dark:hover:text-gray-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-primary-500 focus-visible:ring-offset-gray-700'
+              ]"
+              @click="showSettingsDialog"
+            >
+              <span aria-hidden="true">
+                <CogIcon
+                  class="w-5 h-5 mr-3 text-gray-500 group-hover:text-gray-600 dark:text-gray-400 dark:group-hover:text-gray-300"
+                />
+              </span>
+              {{ t('dashboard.header.menu.settings') }}
+            </button>
+          </MenuItem>
+        </div>
+        <div :class="!hideSettings ? 'pt-1' : ''">
+          <MenuItem v-slot="{ active }">
+            <button
+              type="button"
+              :class="[
+                active ? 'bg-gray-100 dark:bg-gray-600' : '',
+                'group flex items-start w-full px-4 py-2.5 text-sm text-gray-700 dark:text-gray-300 dark:hover:bg-gray-600 dark:md:hover:bg-gray-600/50 dark:hover:text-gray-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-primary-500 focus-visible:ring-offset-gray-700'
+              ]"
+              @click.stop="signOut"
+            >
+              <span aria-hidden="true">
+                <LogoutIcon
+                  class="w-5 h-5 mr-3 text-red-500 group-hover:text-red-600 dark:text-red-400 dark:group-hover:text-red-500"
+                />
+              </span>
+              {{ t('dashboard.header.menu.signOut') }}
+            </button>
+          </MenuItem>
+        </div>
+      </MenuItems>
+    </ScaleTransition>
+  </Menu>
+</template>
diff --git a/src/composables/useMarkdown.js b/src/composables/useMarkdown.js
index d1c6f5fc..f9c68cf8 100644
--- a/src/composables/useMarkdown.js
+++ b/src/composables/useMarkdown.js
@@ -98,10 +98,10 @@ export default function useMarkdown(options = {}) {
     .use(mdDefList)
     .use(mdAnchor, {
       permalink: mdAnchor.permalink.linkInsideHeader(),
-      slugify: (s) => slugify(s, { lower: true })
+      slugify: (s) => slugify(s, { lower: true, remove: /[*+~.()'"!:@]/g })
     })
     .use(mdToc, {
-      slugify: (s) => slugify(s, { lower: true }),
+      slugify: (s) => slugify(s, { lower: true, remove: /[*+~.()'"!:@]/g }),
       listType: 'ol',
       containerHeaderHtml: `<h2>${t('about.summary')}</h2>`
     })
diff --git a/src/i18n/messages/en-US.js b/src/i18n/messages/en-US.js
index 8b3ac5d4..026b171a 100644
--- a/src/i18n/messages/en-US.js
+++ b/src/i18n/messages/en-US.js
@@ -763,6 +763,14 @@ export default {
   },
   about: {
     summary: 'Summary',
+    helpCenter: 'Help center',
+    onThisPage: 'On this page',
+    previous: 'Previous',
+    next: 'Next',
+    categories: {
+      general: 'General',
+      guide: 'Guides'
+    },
     a11y: {
       title: 'Accessibility',
       body: dedent`
diff --git a/src/i18n/messages/pt-BR.js b/src/i18n/messages/pt-BR.js
index 051a74b0..19090d56 100644
--- a/src/i18n/messages/pt-BR.js
+++ b/src/i18n/messages/pt-BR.js
@@ -768,6 +768,14 @@ export default {
   },
   about: {
     summary: 'Sumário',
+    helpCenter: 'Central de ajuda',
+    onThisPage: 'Nesta página',
+    previous: 'Anterior',
+    next: 'Próxima',
+    categories: {
+      general: 'Geral',
+      guide: 'Guias'
+    },
     a11y: {
       title: 'Acessibilidade',
       body: dedent`
diff --git a/src/router/index.js b/src/router/index.js
index 02fc2a6c..aadd1bbf 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -43,15 +43,17 @@ const routes = [
         name: 'Accessibility',
         component: () => import('../views/about/Accessibility.vue'),
         meta: {
-          title: () => t('app.routes.about.a11y')
+          title: () => t('app.routes.about.a11y'),
+          category: 'general'
         }
       },
       {
-        path: 'instructions',
+        path: 'guides/instructions',
         name: 'Instructions',
         component: () => import('../views/about/Instructions.vue'),
         meta: {
-          title: () => t('app.routes.about.instructions')
+          title: () => t('app.routes.about.instructions'),
+          category: 'guide'
         }
       },
       {
@@ -59,7 +61,8 @@ const routes = [
         name: 'PrivacyPolicy',
         component: () => import('../views/about/PrivacyPolicy.vue'),
         meta: {
-          title: () => t('app.routes.about.privacyPolicy')
+          title: () => t('app.routes.about.privacyPolicy'),
+          category: 'general'
         }
       },
       {
@@ -67,7 +70,8 @@ const routes = [
         name: 'TermsOfUse',
         component: () => import('../views/about/TermsOfUse.vue'),
         meta: {
-          title: () => t('app.routes.about.termsOfUse')
+          title: () => t('app.routes.about.termsOfUse'),
+          category: 'general'
         }
       }
     ]
diff --git a/src/views/about/Accessibility.vue b/src/views/about/Accessibility.vue
index 639ad748..b0de156d 100644
--- a/src/views/about/Accessibility.vue
+++ b/src/views/about/Accessibility.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref } from 'vue'
+import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import useMarkdown from '@/composables/useMarkdown'
@@ -15,7 +15,7 @@ const { renderMarkdown } = useMarkdown({
   mdOptions: { typographer: true }
 })
 
-const body = ref(
+const body = computed(() =>
   renderMarkdown(
     t('about.a11y.body', {
       headlessUiLink: 'https://headlessui.dev/vue/menu#keyboard-interaction'
diff --git a/src/views/about/Index.vue b/src/views/about/Index.vue
index 10dfe458..19083e83 100644
--- a/src/views/about/Index.vue
+++ b/src/views/about/Index.vue
@@ -3,7 +3,8 @@ import { nextTick, onMounted, watch } from 'vue'
 
 import { useAuthStore } from '@/stores/auth'
 
-import FadeTransition from '@/components/transitions/FadeTransition.vue'
+import PageAside from '@/components/PageAside.vue'
+import PageContents from '@/components/PageContents.vue'
 import PageHeader from '@/components/PageHeader.vue'
 
 const authStore = useAuthStore()
@@ -29,10 +30,10 @@ async function handleHash() {
 <template>
   <div>
     <PageHeader />
-    <router-view v-slot="{ Component }">
-      <FadeTransition>
-        <component :is="Component" />
-      </FadeTransition>
-    </router-view>
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-16 flex">
+      <PageAside class="hidden lg:block" />
+      <router-view />
+      <PageContents class="hidden lg:block" />
+    </div>
   </div>
 </template>
diff --git a/src/views/about/Instructions.vue b/src/views/about/Instructions.vue
index 0315d724..be4ee3ef 100644
--- a/src/views/about/Instructions.vue
+++ b/src/views/about/Instructions.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref } from 'vue'
+import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import useMarkdown from '@/composables/useMarkdown'
@@ -23,7 +23,7 @@ const { renderMarkdown } = useMarkdown({
   mdOptions: { typographer: true }
 })
 
-const body = ref(
+const body = computed(() =>
   renderMarkdown(
     t('about.instructions.body', {
       googleDriveLink: 'https://drive.google.com/',
diff --git a/src/views/about/PrivacyPolicy.vue b/src/views/about/PrivacyPolicy.vue
index ed5cb238..8785d683 100644
--- a/src/views/about/PrivacyPolicy.vue
+++ b/src/views/about/PrivacyPolicy.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref } from 'vue'
+import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import useMarkdown from '@/composables/useMarkdown'
@@ -15,7 +15,7 @@ const { renderMarkdown } = useMarkdown({
   mdOptions: { typographer: true }
 })
 
-const body = ref(
+const body = computed(() =>
   renderMarkdown(
     t('about.privacyPolicy.body', {
       googleHelpLink:
diff --git a/src/views/about/TermsOfUse.vue b/src/views/about/TermsOfUse.vue
index ceac0ff5..8ceb513d 100644
--- a/src/views/about/TermsOfUse.vue
+++ b/src/views/about/TermsOfUse.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref } from 'vue'
+import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import useMarkdown from '@/composables/useMarkdown'
@@ -15,7 +15,7 @@ const { renderMarkdown } = useMarkdown({
   mdOptions: { typographer: true }
 })
 
-const body = ref(
+const body = computed(() =>
   renderMarkdown(
     t('about.termsOfUse.body', {
       googleSignInLink: 'https://developers.google.com/identity/sign-in/web',
diff --git a/tailwind.config.js b/tailwind.config.js
index fee80e8d..1d610fda 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -11,6 +11,7 @@ module.exports = {
     fontFamily: {
       ...defaultTheme.fontFamily,
       sans: ['Inter', ...defaultTheme.fontFamily.sans],
+      'sans-var': ['Inter var', ...defaultTheme.fontFamily.sans],
       display: ['Poppins', ...defaultTheme.fontFamily.sans]
     },
     extend: {
@@ -43,7 +44,11 @@ module.exports = {
           css: {
             'h1, h2, h3, h4, h5, h6': {
               fontFamily: theme('fontFamily.display').join(', '),
-              scrollMargin: theme('scrollMargin.4')
+              scrollMargin: theme('scrollMargin.4'),
+
+              '&:focus': {
+                outline: 'none'
+              }
             },
             a: {
               color: theme('colors.primary.600'),
@@ -109,9 +114,10 @@ module.exports = {
                 opacity: '1'
               }
             },
-            ':where(h1, h2, h3, h4, h5, h6):hover .header-anchor': {
-              opacity: '1'
-            }
+            ':where(h1, h2, h3, h4, h5, h6):where(:hover, :focus) .header-anchor':
+              {
+                opacity: '1'
+              }
           }
         },
         invert: {
@@ -176,6 +182,10 @@ module.exports = {
         '@supports (backdrop-filter: blur(0)) or (-webkit-backdrop-filter: blur(0))'
       )
       addVariant('hocus', ['&:hover', '&:focus-visible'])
+      addVariant(
+        'supports-var-font',
+        '@supports (font-variation-settings: normal)'
+      )
     },
     function ({ matchUtilities, theme }) {
       matchUtilities(
