fix(pocket): add active links / test static locale

Author: collectedmind

ui/components/nav-top-account-profile/index.tsx

@@ -26,6 +26,7 @@ import { useState } from 'react'
 import { SettingTheme } from '../setting-theme'
 
 import { useUserInfo } from '@common/state/user-info'
+import Link from 'next/link'
 
 /**
  * NavTopAccountProfile
@@ -110,28 +111,27 @@ function ProfilePanel() {
         <div className={style.email}>{email}</div>
       </div>
       <hr />
-      <button className={`menu ${style.menuTop}`} type="button">
+      <Link href="/" className={`button menu ${style.menuTop}`} type="button">
         <HomeIcon /> {t('profile:home', 'Home')}
-      </button>
-      <button className="menu" type="button">
+      </Link>
+      <Link href="/saves" className="button menu" type="button">
         <SaveIcon /> {t('profile:saves', 'Saves')}
-      </button>
-      <button className="menu" type="button">
+      </Link>
+      <Link href="/collections" className="button menu" type="button">
         <CollectionsIcon /> {t('profile:collections', 'Collections')}
-      </button>
+      </Link>
+      <Link href="/settings" className="button menu" type="button">
+        <SettingsIcon /> {t('profile:settings', 'Settings')}
+      </Link>
       <button className="menu" type="button">
         <AddCircledIcon /> {t('profile:add', 'Add')}
       </button>
-      <button className="menu" type="button">
-        <SettingsIcon /> {t('profile:settings', 'Settings')}
-      </button>
       <hr />
       <div className={style.themeSelect}>
         <SettingTheme buttonClass={style.themeButton} />
       </div>
-
       <hr />
-      <button className="menu" type="button" onClick={logout}>
+      <button className="button menu" type="button" onClick={logout}>
         <LockIcon /> {t('profile:log-out', 'Log Out')}
       </button>
     </div>

ui/components/nav-top-account-profile/style.module.css

@@ -21,15 +21,16 @@
   box-shadow: var(--shadow-medium);
   min-width: 200px;
   z-index: var(--z-index-menu);
-  button {
+  button,
+  a {
     font-size: 0.9375rem;
-    &:last-of-type {
-      border-radius: 0 0 10px 10px;
-    }
     svg {
       margin-right: 0.5rem;
     }
   }
+  button:last-of-type {
+    border-radius: 0 0 10px 10px;
+  }
 
   .themeButton {
     padding: 0.5rem;

ui/styles/pocket/global.css

@@ -136,6 +136,8 @@ html{scroll-padding-top:90px}
 
 /* LAYOUT STYLES --------------------------------------------- */
 
+html{scrollbar-gutter:stable}
+
 body{background-color:var(--color-surface-base);color:var(--color-text-base);font-family:var(--font-sans-serif);font-size:1rem;font-weight:400;line-height:1.5;margin:0;text-align:left}
 
 .page-container{box-sizing:content-box;margin:0 auto;max-width:var(--container-clamp);padding-left:2.5rem;padding-right:2.5rem}

ui/styles/pocket/layout.css

@@ -1,3 +1,7 @@
+html {
+  scrollbar-gutter: stable;
+}
+
 body {
   margin: 0;
   font-family: var(--font-sans-serif);