From ecadf17d506e2a4cfa9fb1bb33e942f1a6499c25 Mon Sep 17 00:00:00 2001
From: Michael Mayer <michael@photoprism.app>
Date: Fri, 26 Aug 2022 18:15:22 +0200
Subject: [PATCH] UX: Replace "speed dial" in mobile toolbar with custom
 context menu

Signed-off-by: Michael Mayer <michael@photoprism.app>
---
 frontend/src/component/navigation.vue         |  84 ++++-----
 frontend/src/css/effects.css                  |  27 +++
 frontend/src/css/navigation.css               | 132 +++++++++++++--
 frontend/src/dialog/sponsor.vue               |   2 +-
 frontend/src/locales/translations.pot         | 159 +++++++++++-------
 frontend/src/pages/about/about.vue            |  10 +-
 frontend/src/pages/auth/connect.vue           |   2 +-
 frontend/src/pages/auth/login.vue             |   2 +-
 .../acceptance-public/settings/about.js       |   2 +-
 9 files changed, 291 insertions(+), 129 deletions(-)

diff --git a/frontend/src/component/navigation.vue b/frontend/src/component/navigation.vue
index 085439f6a..3c82927f2 100644
--- a/frontend/src/component/navigation.vue
+++ b/frontend/src/component/navigation.vue
@@ -9,57 +9,41 @@
         <v-toolbar-title class="nav-title">
           <span :class="{'clickable': auth}" @click.stop.prevent="showNavigation()">{{ page.title }}</span>
         </v-toolbar-title>
-        <v-speed-dial
-            v-model="speedDial"
-            direction="bottom"
-            transition="slide-y-transition"
-            class="mobile-dial"
-            open-on-hover
-            dark
+        <v-btn
+            fab dark :ripple="false"
+            color="transparent"
+            class="mobile-menu-trigger elevation-0"
+            @click.stop.prevent="speedDial = true"
         >
-          <template #activator>
-            <v-btn
-                v-model="speedDial"
-                dark fab icon flat
-                :ripple="false"
-                class="nav-menu-trigger"
-            >
-              <v-icon>more_vert</v-icon>
-              <v-icon>close</v-icon>
-            </v-btn>
-          </template>
-          <v-btn
-              v-if="!routeName('browse')" to="/browse" class="nav-menu-browse elevation-5 highlight"
-              fab dark small
-          >
-            <v-icon>search</v-icon>
-          </v-btn>
-          <v-btn
-              v-if="auth && !config.readonly && $config.feature('upload')" class="nav-menu-upload elevation-5 highlight"
-              fab dark small
-              @click.prevent="openUpload()"
-          >
-            <v-icon>cloud_upload</v-icon>
-          </v-btn>
-          <v-btn
-              v-if="!config.disable.settings && !routeName('settings')" to="/settings" class="nav-menu-settings elevation-5"
-              fab dark small
-          >
-            <v-icon>settings</v-icon>
-          </v-btn>
-          <v-btn
-              v-if="auth && !isPublic" class="nav-menu-reload elevation-4"
-              fab dark small
-              @click.prevent="reloadApp">
-            <v-icon>refresh</v-icon>
-          </v-btn>
-          <v-btn
-              v-if="auth && !isPublic" class="nav-menu-logout elevation-4"
-              fab dark small
-              @click.prevent="logout">
-            <v-icon>power_settings_new</v-icon>
-          </v-btn>
-        </v-speed-dial>
+          <v-icon dark>more_vert</v-icon>
+        </v-btn>
+        <div id="mobile-menu" :class="{'active': speedDial}" @click.stop="speedDial = false">
+          <div class="menu-content grow-top-right">
+            <div class="menu-icons">
+              <a v-if="auth && !isPublic" href="#" :title="$gettext('Logout')" @click.prevent="logout"><v-icon>power_settings_new</v-icon></a>
+              <a href="#" :title="$gettext('Reload')" @click.prevent="reloadApp"><v-icon>refresh</v-icon></a>
+              <router-link v-if="!auth && !isPublic" :to="{ name: 'login' }" :title="$gettext('Login')">
+                <v-icon>login</v-icon>
+              </router-link>
+              <router-link v-if="auth && !routeName('library') && $config.feature('library')" :to="{ name: 'library_logs' }" :title="$gettext('Logs')"><v-icon>feed</v-icon></router-link>
+              <router-link v-if="auth && !config.disable.settings && !routeName('settings')" to="/settings" :title="$gettext('Settings')">
+                <v-icon>settings</v-icon>
+              </router-link>
+              <a v-if="auth && !config.readonly && $config.feature('upload')" href="#" :title="$gettext('Upload')" @click.prevent="openUpload()"><v-icon>cloud_upload</v-icon></a>
+            </div>
+            <div class="menu-actions">
+              <div v-if="auth && !routeName('browse')" class="menu-action"><router-link to="/browse"><v-icon>search</v-icon> <translate>Search</translate></router-link></div>
+              <div v-if="auth && !routeName('albums') && $config.feature('albums')" class="menu-action"><router-link to="/albums"><v-icon>bookmark</v-icon> <translate>Albums</translate></router-link></div>
+              <div v-if="auth && !routeName('library') && $config.feature('library')" class="menu-action"><router-link :to="{ name: 'library' }"><v-icon>camera_roll</v-icon> <translate>Index</translate></router-link></div>
+              <div v-if="auth && !routeName('files') && $config.feature('library')" class="menu-action"><router-link to="/library/files"><v-icon>folder</v-icon> <translate>Files</translate></router-link></div>
+              <div v-if="auth && !config.disable.settings && !routeName('settings')" class="menu-action"><router-link :to="{ name: 'settings_sync' }"><v-icon>sync</v-icon> <translate>Connect</translate></router-link></div>
+              <div v-if="auth && !config.disable.settings && !routeName('settings')" class="menu-action"><router-link :to="{ name: 'settings_account' }"><v-icon>person</v-icon> <translate>Account</translate></router-link></div>
+              <div class="menu-action"><a href="https://link.photoprism.app/docs" target="_blank"><v-icon>auto_stories</v-icon> <translate>User Guide</translate></a></div>
+              <div v-if="!isSponsor" class="menu-action"><a href="https://link.photoprism.app/membership" target="_blank"><v-icon>workspace_premium</v-icon> <translate>Become a sponsor</translate></a></div>
+              <div v-if="config.imprintUrl" class="menu-action"><a :href="config.imprintUrl" target="_blank"><v-icon>info</v-icon> <translate>Legal Information</translate></a></div>
+            </div>
+          </div>
+        </div>
       </v-toolbar>
     </template>
     <template v-else-if="visible && !auth">
diff --git a/frontend/src/css/effects.css b/frontend/src/css/effects.css
index 004ec01aa..f829a01ba 100644
--- a/frontend/src/css/effects.css
+++ b/frontend/src/css/effects.css
@@ -100,6 +100,33 @@
     animation: stretch 1.5s ease-out 0s alternate infinite none running;
 }
 
+@keyframes slide-left {
+    0% {
+        transform:  translateX(105%);;
+    }
+    100% {
+        transform: translateX(0%);
+    }
+}
+
+#photoprism .animate-slide-left {
+    animation: slide-left 300ms ease-in-out forwards;
+}
+
+@keyframes grow {
+    0% {
+        transform: scale(0);
+    }
+    100% {
+        transform: scale(1);
+    }
+}
+
+#photoprism .grow-top-right {
+    transform-origin: top right;
+    animation: grow 200ms ease-in-out forwards;
+}
+
 #photoprism .select-transition {
     -webkit-transition-duration: 15ms !important;
     -moz-transition-duration: 15ms !important;
diff --git a/frontend/src/css/navigation.css b/frontend/src/css/navigation.css
index be18f4849..7a8c3819e 100644
--- a/frontend/src/css/navigation.css
+++ b/frontend/src/css/navigation.css
@@ -158,27 +158,135 @@ nav .v-list__tile__title.title {
     font-size: 19px;
 }
 
-/* MOBILE NAV SPEED DIAL */
+/* Mobile Menu */
 
-#photoprism .mobile-dial .v-btn.nav-menu-trigger {
+#photoprism #p-navigation .mobile-menu-trigger {
     width: 48px;
+    padding: 0;
+    margin: 0;
 }
 
-#photoprism .mobile-dial .v-btn:after,
-#photoprism .mobile-dial .v-btn:before {
+#photoprism .v-btn.mobile-menu-trigger:after,
+#photoprism .v-btn.mobile-menu-trigger:before {
     display: none!important;
 }
 
-#photoprism .mobile-dial .v-speed-dial__list .v-btn {
-    color: white!important;
-    background-color: #8916ff;
+#mobile-menu {
+    display: none;
+    position: fixed;
+    overflow: hidden;
+    z-index: 1;
+    top: 0;
+    right: 0;
+    left: 0;
+    bottom: 0;
+    margin: 0;
+    padding: 0;
+    width: 0;
+    height: 0;
 }
 
-#photoprism .mobile-dial .v-speed-dial__list .v-btn.highlight {
-    background-color: #5f30fe;
+#mobile-menu.active {
+    display: block;
+    width: 100vw;
+    height: 100vh;
 }
 
-#photoprism .mobile-dial .v-speed-dial__list .v-btn:hover,
-#photoprism .mobile-dial .v-speed-dial__list .v-btn.highlight:hover {
-    background-color: #6600cc;
+#mobile-menu .menu-content {
+    display: block;
+    position: fixed;
+    top: 0;
+    right: 0;
+    left: auto;
+    width: auto;
+    height: auto;
+    margin: 10px;
+    overflow: hidden;
+    background: #393a3c;
+    border-radius: 8px;
+}
+
+#mobile-menu .menu-icons {
+    -ms-flex-pack: distribute;
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+    -webkit-box-align: stretch;
+    -ms-flex-align: stretch;
+    -ms-flex-flow: row nowrap;
+    align-items: stretch;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: space-around;
+    background: rgba(250, 250, 255,.1);
+    padding: 0;
+    margin: 0;
+    text-align: center;
+}
+
+#mobile-menu .menu-icons a {
+    fill: rgba(255,255,255,.8);
+    color: rgba(255,255,255,.8);
+    -webkit-box-flex: 1;
+    -ms-flex-positive: 1;
+    cursor: pointer;
+    display: inline-block;
+    flex-grow: 1;
+    overflow: hidden;
+    padding: 12px 11px 10px 11px;
+    margin: 0;
+    position: relative;
+    text-align: center;
+    vertical-align: middle;
+    z-index: 1;
+    text-decoration: none;
+    font-weight: bold;
+}
+
+#mobile-menu .menu-icons a:hover {
+    background: rgba(250, 250, 255,.08);
+}
+
+#mobile-menu .menu-icons a i {
+    font-size: 22px;
+}
+
+#mobile-menu .menu-actions {
+    display: block;
+    overflow-y: auto;
+    padding: 0;
+    margin: 0;
+}
+
+#mobile-menu .menu-actions .menu-action {
+    display: block;
+    padding: 0;
+    margin: 0;
+}
+
+#mobile-menu .menu-actions .menu-action:hover {
+    background: #3f4042;
+}
+
+#mobile-menu .menu-actions .menu-action a {
+    color: #c2c4c5;
+    display: inline-block;
+    min-width: 200px;
+    font-size: 15px;
+    line-height: 50px;
+    text-decoration: none;
+    padding: 0 20px;
+    margin: 0;
+}
+
+#mobile-menu .menu-actions .menu-action a i {
+    padding: 0 16px 0 0;
+    font-size: 20px;
+}
+
+#mobile-menu .menu-icons a:hover i,
+#mobile-menu .menu-actions .menu-action:hover a,
+#mobile-menu .menu-actions .menu-action:hover a i{
+    color: #ffffff;
 }
\ No newline at end of file
diff --git a/frontend/src/dialog/sponsor.vue b/frontend/src/dialog/sponsor.vue
index 1febac6fd..3a8461308 100644
--- a/frontend/src/dialog/sponsor.vue
+++ b/frontend/src/dialog/sponsor.vue
@@ -70,7 +70,7 @@ export default {
       this.$emit('close');
     },
     signUp() {
-      window.open("https://photoprism.app/membership", "_blank");
+      window.open("https://link.photoprism.app/membership", "_blank");
       this.$emit('close');
     },
   },
diff --git a/frontend/src/locales/translations.pot b/frontend/src/locales/translations.pot
index 04a437f88..c8c1bbf56 100644
--- a/frontend/src/locales/translations.pot
+++ b/frontend/src/locales/translations.pot
@@ -57,10 +57,10 @@ msgstr ""
 msgid "A click will copy it to your clipboard."
 msgstr ""
 
-#: src/component/navigation.vue:426
+#: src/component/navigation.vue:433
 #: src/component/navigation.vue:27
 #: src/pages/about/about.vue:4
-#: src/pages/about/about.vue:193
+#: src/pages/about/about.vue:195
 #: src/pages/help.vue:45
 msgid "About"
 msgstr ""
@@ -69,6 +69,8 @@ msgstr ""
 msgid "Abyss"
 msgstr ""
 
+#: src/component/navigation.vue:33
+#: src/component/navigation.vue:31
 #: src/component/navigation.vue:73
 #: src/dialog/share/upload.vue:112
 #: src/model/account.js:98
@@ -173,10 +175,12 @@ msgstr ""
 
 #: src/app/routes.js:140
 #: src/app/routes.js:147
-#: src/component/navigation.vue:164
-#: src/component/navigation.vue:174
+#: src/component/navigation.vue:29
+#: src/component/navigation.vue:171
+#: src/component/navigation.vue:181
+#: src/component/navigation.vue:27
 #: src/component/navigation.vue:4
-#: src/component/navigation.vue:737
+#: src/component/navigation.vue:984
 #: src/share/albums.vue:4
 msgid "Albums"
 msgstr ""
@@ -264,7 +268,7 @@ msgstr ""
 msgid "An error occurred - are you offline?"
 msgstr ""
 
-#: src/component/navigation.vue:118
+#: src/component/navigation.vue:125
 #: src/component/photo/cards.vue:306
 #: src/component/photo/cards.vue:486
 #: src/component/photo/list.vue:204
@@ -297,7 +301,7 @@ msgid "Approve"
 msgstr ""
 
 #: src/app/routes.js:221
-#: src/component/navigation.vue:151
+#: src/component/navigation.vue:158
 #: src/component/photo/cards.vue:387
 #: src/component/photo/clipboard.vue:216
 #: src/pages/settings/general.vue:294
@@ -353,6 +357,8 @@ msgstr ""
 msgid "Automatically creates albums of special moments, trips, and places."
 msgstr ""
 
+#: src/component/navigation.vue:35
+#: src/component/navigation.vue:33
 #: src/dialog/sponsor.vue:7
 #: src/pages/about/about.vue:33
 #: src/pages/auth/login.vue:48
@@ -410,8 +416,8 @@ msgstr ""
 
 #: src/app/routes.js:153
 #: src/app/routes.js:160
-#: src/component/navigation.vue:270
-#: src/component/navigation.vue:1099
+#: src/component/navigation.vue:277
+#: src/component/navigation.vue:1346
 msgid "Calendar"
 msgstr ""
 
@@ -537,6 +543,8 @@ msgstr ""
 msgid "Confidence"
 msgstr ""
 
+#: src/component/navigation.vue:32
+#: src/component/navigation.vue:30
 #: src/dialog/account/add.vue:18
 #: src/pages/auth/connect.vue:12
 msgid "Connect"
@@ -890,7 +898,7 @@ msgid "Enables RAW converter presets. May reduce performance."
 msgstr ""
 
 #: src/app/routes.js:266
-#: src/component/navigation.vue:393
+#: src/component/navigation.vue:400
 msgid "Errors"
 msgstr ""
 
@@ -915,7 +923,7 @@ msgstr ""
 msgid "Exclude hidden"
 msgstr ""
 
-#: src/component/navigation.vue:416
+#: src/component/navigation.vue:663
 msgid "Expand"
 msgstr ""
 
@@ -974,8 +982,8 @@ msgid "Favorite"
 msgstr ""
 
 #: src/app/routes.js:186
-#: src/component/navigation.vue:244
-#: src/component/navigation.vue:1011
+#: src/component/navigation.vue:251
+#: src/component/navigation.vue:1258
 msgid "Favorites"
 msgstr ""
 
@@ -983,7 +991,7 @@ msgstr ""
 msgid "Feature Request"
 msgstr ""
 
-#: src/component/navigation.vue:434
+#: src/component/navigation.vue:441
 #: src/component/navigation.vue:35
 msgid "Feedback"
 msgstr ""
@@ -1005,6 +1013,8 @@ msgstr ""
 msgid "Filename"
 msgstr ""
 
+#: src/component/navigation.vue:31
+#: src/component/navigation.vue:29
 #: src/dialog/photo/edit.vue:65
 #: src/dialog/photo/edit.vue:6
 #: src/dialog/photo/edit.vue:316
@@ -1038,8 +1048,8 @@ msgstr ""
 
 #: src/app/routes.js:166
 #: src/app/routes.js:173
-#: src/component/navigation.vue:330
-#: src/component/navigation.vue:1307
+#: src/component/navigation.vue:337
+#: src/component/navigation.vue:1554
 msgid "Folders"
 msgstr ""
 
@@ -1108,7 +1118,7 @@ msgstr ""
 msgid "Help & Support"
 msgstr ""
 
-#: src/component/navigation.vue:384
+#: src/component/navigation.vue:391
 msgid "Hidden"
 msgstr ""
 
@@ -1213,6 +1223,8 @@ msgstr ""
 msgid "In case pictures you expect are missing, please rescan your library and wait until indexing has been completed."
 msgstr ""
 
+#: src/component/navigation.vue:30
+#: src/component/navigation.vue:28
 #: src/pages/library.vue:32
 #: src/pages/settings/library.vue:6
 msgid "Index"
@@ -1277,14 +1289,18 @@ msgstr ""
 msgid "Keywords"
 msgstr ""
 
+#: src/pages/about/about.vue:53
+msgid "Knowledge Base"
+msgstr ""
+
 #: src/dialog/photo/labels.vue:20
 #: src/model/label.js:124
 msgid "Label"
 msgstr ""
 
 #: src/app/routes.js:272
-#: src/component/navigation.vue:317
-#: src/component/navigation.vue:1262
+#: src/component/navigation.vue:324
+#: src/component/navigation.vue:1509
 #: src/dialog/photo/edit.vue:39
 #: src/dialog/photo/edit.vue:6
 #: src/dialog/photo/edit.vue:215
@@ -1317,6 +1333,15 @@ msgstr ""
 msgid "Lavender"
 msgstr ""
 
+#: src/pages/about/about.vue:55
+msgid "Learn more"
+msgstr ""
+
+#: src/component/navigation.vue:36
+#: src/component/navigation.vue:34
+msgid "Legal Information"
+msgstr ""
+
 #: src/dialog/photo/details.vue:403
 msgid "Lens"
 msgstr ""
@@ -1324,16 +1349,16 @@ msgstr ""
 #: src/app/routes.js:304
 #: src/app/routes.js:311
 #: src/app/routes.js:318
-#: src/component/navigation.vue:356
-#: src/component/navigation.vue:366
+#: src/component/navigation.vue:363
+#: src/component/navigation.vue:373
 #: src/component/navigation.vue:4
-#: src/component/navigation.vue:1399
+#: src/component/navigation.vue:1646
 #: src/pages/settings.vue:41
 #: src/pages/settings/general.vue:404
 msgid "Library"
 msgstr ""
 
-#: src/component/navigation.vue:442
+#: src/component/navigation.vue:449
 #: src/component/navigation.vue:43
 #: src/dialog/photo/details.vue:544
 #: src/pages/about/license.vue:4
@@ -1366,7 +1391,7 @@ msgid "List"
 msgstr ""
 
 #: src/app/routes.js:193
-#: src/component/navigation.vue:217
+#: src/component/navigation.vue:224
 #: src/component/photo/cards.vue:297
 #: src/component/photo/list.vue:195
 #: src/component/photo/mosaic.vue:219
@@ -1394,17 +1419,20 @@ msgstr ""
 msgid "Log messages appear here whenever PhotoPrism comes across broken files, or there are other potential issues."
 msgstr ""
 
-#: src/component/navigation.vue:456
-#: src/component/navigation.vue:1735
+#: src/component/navigation.vue:463
+#: src/component/navigation.vue:272
+#: src/component/navigation.vue:1982
 msgid "Login"
 msgstr ""
 
-#: src/component/navigation.vue:503
-#: src/component/navigation.vue:1845
-#: src/component/navigation.vue:1876
+#: src/component/navigation.vue:510
+#: src/component/navigation.vue:245
+#: src/component/navigation.vue:2092
+#: src/component/navigation.vue:2123
 msgid "Logout"
 msgstr ""
 
+#: src/component/navigation.vue:289
 #: src/pages/library.vue:55
 #: src/pages/settings/general.vue:426
 msgid "Logs"
@@ -1452,7 +1480,7 @@ msgstr ""
 msgid "Message sent"
 msgstr ""
 
-#: src/component/navigation.vue:369
+#: src/component/navigation.vue:616
 msgid "Minimize"
 msgstr ""
 
@@ -1463,13 +1491,13 @@ msgstr ""
 
 #: src/app/routes.js:127
 #: src/app/routes.js:134
-#: src/component/navigation.vue:257
-#: src/component/navigation.vue:1054
+#: src/component/navigation.vue:264
+#: src/component/navigation.vue:1301
 #: src/pages/settings/general.vue:360
 msgid "Moments"
 msgstr ""
 
-#: src/component/navigation.vue:102
+#: src/component/navigation.vue:109
 msgid "Monochrome"
 msgstr ""
 
@@ -1694,8 +1722,8 @@ msgstr ""
 msgid "Nothing to see here yet. Be patient."
 msgstr ""
 
-#: src/component/navigation.vue:472
-#: src/component/navigation.vue:1780
+#: src/component/navigation.vue:479
+#: src/component/navigation.vue:2027
 #: src/options/options.js:259
 msgid "Offline"
 msgstr ""
@@ -1778,7 +1806,7 @@ msgstr ""
 msgid "Original Name"
 msgstr ""
 
-#: src/component/navigation.vue:375
+#: src/component/navigation.vue:382
 #: src/dialog/account/edit.vue:104
 #: src/model/file.js:194
 #: src/pages/library/files.vue:6
@@ -1802,7 +1830,7 @@ msgstr ""
 msgid "Panorama"
 msgstr ""
 
-#: src/component/navigation.vue:110
+#: src/component/navigation.vue:117
 msgid "Panoramas"
 msgstr ""
 
@@ -1820,8 +1848,8 @@ msgstr ""
 
 #: src/app/routes.js:278
 #: src/app/routes.js:298
-#: src/component/navigation.vue:231
-#: src/component/navigation.vue:966
+#: src/component/navigation.vue:238
+#: src/component/navigation.vue:1213
 #: src/dialog/photo/edit.vue:52
 #: src/dialog/photo/edit.vue:6
 #: src/dialog/photo/edit.vue:266
@@ -1873,10 +1901,10 @@ msgstr ""
 #: src/app/routes.js:234
 #: src/app/routes.js:240
 #: src/app/routes.js:247
-#: src/component/navigation.vue:283
-#: src/component/navigation.vue:293
+#: src/component/navigation.vue:290
+#: src/component/navigation.vue:300
 #: src/component/navigation.vue:4
-#: src/component/navigation.vue:1144
+#: src/component/navigation.vue:1391
 #: src/pages/settings/general.vue:108
 #: src/pages/settings/general.vue:450
 msgid "Places"
@@ -1930,8 +1958,8 @@ msgid "Primary"
 msgstr ""
 
 #: src/app/routes.js:214
-#: src/component/navigation.vue:343
-#: src/component/navigation.vue:1352
+#: src/component/navigation.vue:350
+#: src/component/navigation.vue:1599
 #: src/dialog/photo/info.vue:102
 #: src/pages/settings/general.vue:272
 msgid "Private"
@@ -1983,6 +2011,10 @@ msgstr ""
 msgid "Re-index all originals, including already indexed and unchanged files."
 msgstr ""
 
+#: src/pages/about/about.vue:51
+msgid "Read the Docs"
+msgstr ""
+
 #: src/pages/settings/advanced.vue:99
 msgid "Read-Only Mode"
 msgstr ""
@@ -2018,6 +2050,7 @@ msgid "Red"
 msgstr ""
 
 #: src/component/album/toolbar.vue:54
+#: src/component/navigation.vue:258
 #: src/component/photo/toolbar.vue:60
 #: src/dialog/reload.vue:15
 #: src/pages/albums.vue:141
@@ -2084,7 +2117,7 @@ msgid "Retype Password"
 msgstr ""
 
 #: src/app/routes.js:207
-#: src/component/navigation.vue:142
+#: src/component/navigation.vue:149
 msgid "Review"
 msgstr ""
 
@@ -2098,14 +2131,16 @@ msgstr ""
 msgid "Scan"
 msgstr ""
 
-#: src/component/navigation.vue:134
+#: src/component/navigation.vue:141
 msgid "Scans"
 msgstr ""
 
-#: src/component/navigation.vue:82
-#: src/component/navigation.vue:92
+#: src/component/navigation.vue:28
+#: src/component/navigation.vue:89
+#: src/component/navigation.vue:99
+#: src/component/navigation.vue:26
 #: src/component/navigation.vue:4
-#: src/component/navigation.vue:448
+#: src/component/navigation.vue:695
 #: src/component/photo/toolbar.vue:50
 #: src/pages/albums.vue:114
 #: src/pages/labels.vue:81
@@ -2174,12 +2209,13 @@ msgstr ""
 #: src/app/routes.js:350
 #: src/app/routes.js:362
 #: src/app/routes.js:374
-#: src/component/navigation.vue:407
-#: src/component/navigation.vue:417
+#: src/component/navigation.vue:414
+#: src/component/navigation.vue:424
 #: src/component/navigation.vue:8
 #: src/component/navigation.vue:18
 #: src/component/navigation.vue:4
-#: src/component/navigation.vue:1573
+#: src/component/navigation.vue:306
+#: src/component/navigation.vue:1820
 msgid "Settings"
 msgstr ""
 
@@ -2309,7 +2345,7 @@ msgstr ""
 msgid "Stackable"
 msgstr ""
 
-#: src/component/navigation.vue:126
+#: src/component/navigation.vue:133
 #: src/pages/settings/library.vue:34
 msgid "Stacks"
 msgstr ""
@@ -2326,7 +2362,7 @@ msgstr ""
 msgid "Start/Stop Slideshow"
 msgstr ""
 
-#: src/component/navigation.vue:303
+#: src/component/navigation.vue:310
 msgid "States"
 msgstr ""
 
@@ -2511,7 +2547,7 @@ msgid "Unknown"
 msgstr ""
 
 #: src/app/routes.js:179
-#: src/component/navigation.vue:184
+#: src/component/navigation.vue:191
 msgid "Unsorted"
 msgstr ""
 
@@ -2547,6 +2583,7 @@ msgid "Updating stacks"
 msgstr ""
 
 #: src/component/album/toolbar.vue:176
+#: src/component/navigation.vue:323
 #: src/component/photo/toolbar.vue:128
 #: src/dialog/share/upload.vue:35
 #: src/dialog/upload.vue:8
@@ -2604,6 +2641,12 @@ msgstr ""
 msgid "User"
 msgstr ""
 
+#: src/component/navigation.vue:34
+#: src/component/navigation.vue:32
+#: src/pages/about/about.vue:45
+msgid "User Guide"
+msgstr ""
+
 #: src/pages/settings/general.vue:6
 msgid "User Interface"
 msgstr ""
@@ -2634,10 +2677,10 @@ msgid "Video"
 msgstr ""
 
 #: src/app/routes.js:200
-#: src/component/navigation.vue:197
-#: src/component/navigation.vue:207
+#: src/component/navigation.vue:204
+#: src/component/navigation.vue:214
 #: src/component/navigation.vue:4
-#: src/component/navigation.vue:850
+#: src/component/navigation.vue:1097
 msgid "Videos"
 msgstr ""
 
diff --git a/frontend/src/pages/about/about.vue b/frontend/src/pages/about/about.vue
index 4daad78ef..981b2d47e 100644
--- a/frontend/src/pages/about/about.vue
+++ b/frontend/src/pages/about/about.vue
@@ -31,7 +31,7 @@
       <div v-if="!sponsor">
         <p class="text-xs-center my-4">
           <v-btn
-              href="https://photoprism.app/membership"
+              href="https://link.photoprism.app/membership"
               target="_blank"
               color="primary-button"
               class="white--text px-3 py-2 action-sponsor"
@@ -49,17 +49,17 @@
         </p>
       </div>
 
-      <h3 class="subheading py-2">User Guide</h3>
+      <h3 class="subheading py-2"><translate>User Guide</translate></h3>
       <p class="text-selectable">
         <translate>Visit docs.photoprism.app/user-guide to learn how to sync, organize, and share your pictures.</translate>
         <translate>Our User Guide also covers many advanced topics, such as migrating from Google Photos and thumbnail quality settings.</translate>
         <translate>Common issues can be quickly diagnosed and solved using the troubleshooting checklists we provide.</translate>
       </p>
-      <p><a href="https://docs.photoprism.app/user-guide/" class="text-link" target="_blank">Read the docs ›</a></p>
+      <p><a href="https://link.photoprism.app/docs" class="text-link" target="_blank"><translate>Read the Docs</translate> ›</a></p>
 
-      <h3 class="subheading py-2">Knowledge Base</h3>
+      <h3 class="subheading py-2"><translate>Knowledge Base</translate></h3>
       <p class="text-selectable"><translate>Browse the Knowledge Base for detailed information on specific product features, services, and related resources.</translate></p>
-      <p><a href="https://photoprism.app/kb" class="text-link" target="_blank">Learn more ›</a></p>
+      <p><a href="https://photoprism.app/kb" class="text-link" target="_blank"><translate>Learn more</translate> ›</a></p>
 
       <h3 class="subheading py-2">
         <translate>Getting Support</translate>
diff --git a/frontend/src/pages/auth/connect.vue b/frontend/src/pages/auth/connect.vue
index 09e19b027..b892b620d 100644
--- a/frontend/src/pages/auth/connect.vue
+++ b/frontend/src/pages/auth/connect.vue
@@ -2,7 +2,7 @@
   <div class="p-page p-page-connect">
     <v-toolbar flat color="secondary" :dense="$vuetify.breakpoint.smAndDown">
       <v-toolbar-title>
-        <a href="https://photoprism.app/membership" target="_blank">Membership</a> <v-icon>navigate_next</v-icon>
+        <a href="https://link.photoprism.app/membership" target="_blank">Membership</a> <v-icon>navigate_next</v-icon>
         <span v-if="busy">
           <translate>Busy, please wait…</translate>
         </span>
diff --git a/frontend/src/pages/auth/login.vue b/frontend/src/pages/auth/login.vue
index 2dee71bdb..80d7e15a6 100644
--- a/frontend/src/pages/auth/login.vue
+++ b/frontend/src/pages/auth/login.vue
@@ -79,7 +79,7 @@
         </v-flex>
         <v-flex xs12 sm6 class="pa-0 body-2 text-xs-center text-sm-right white--text">
           <v-btn
-              href="https://photoprism.app/membership"
+              href="https://link.photoprism.app/membership"
               target="_blank"
               color="transparent"
               class="white--text px-3 py-2 ma-0 action-sponsor"
diff --git a/frontend/tests/acceptance/acceptance-public/settings/about.js b/frontend/tests/acceptance/acceptance-public/settings/about.js
index fcce608b3..5e84ad09e 100644
--- a/frontend/tests/acceptance/acceptance-public/settings/about.js
+++ b/frontend/tests/acceptance/acceptance-public/settings/about.js
@@ -13,7 +13,7 @@ test.meta("testID", "about-001").meta({ mode: "public" })(
     await t
       .expect(Selector('a[href="https://photoprism.app/"]').visible)
       .ok()
-      .expect(Selector('a[href="https://photoprism.app/membership"]').visible)
+      .expect(Selector('a[href="https://link.photoprism.app/membership"]').visible)
       .ok();
   }
 );