Redesign: Navigation link tweaks (#40585)

app/javascript/mastodon/components/menu/styles.module.scss

@@ -76,6 +76,11 @@
     background-color: var(--color-bg-highlight);
   }
 
+  &[aria-current='page'] {
+    font-weight: bold;
+    background-color: var(--color-bg-highlight);
+  }
+
   &:focus {
     // Override overeager global styles
     border-radius: var(--radius-3);

app/javascript/mastodon/features/navigation_panel/redesign/account_card_and_menu.tsx

@@ -113,7 +113,7 @@ export const AccountMenuItems: React.FC<{
     <>
       {context === 'mobile' && <ProfileMenuItem />}
 
-      <MenuItemLink to={accountBasePath} icon={UserIcon}>
+      <MenuItemLink to={accountBasePath} exact icon={UserIcon}>
         <FormattedMessage
           id='account.view_profile'
           defaultMessage='View profile'
@@ -197,7 +197,7 @@ export const AccountMenuItems: React.FC<{
       <MenuItem onClick={confirmLogout} icon={SignOutIcon}>
         <FormattedMessage
           id='navigation_bar.sign_out'
-          defaultMessage='Sign out'
+          defaultMessage='Sign Out'
         />
       </MenuItem>
     </>
@@ -216,7 +216,7 @@ const ProfileMenuItem: React.FC = () => {
   const accountBasePath = `/@${account?.acct}`;
 
   return (
-    <MenuItemLink to={accountBasePath}>
+    <MenuItemLink to={accountBasePath} exact>
       <LockupWrapper
         icon={<Avatar account={account} size={40} />}
         className={classes.profileMenuItem}

app/javascript/mastodon/features/navigation_panel/redesign/footer_links.module.scss

@@ -24,6 +24,11 @@
     color: var(--color-text-secondary);
     text-decoration: underline;
 
+    &[aria-current='page'] {
+      color: var(--color-text-primary);
+      text-decoration: none;
+    }
+
     &:hover,
     &:focus,
     &:active {

app/javascript/mastodon/features/navigation_panel/redesign/footer_links.tsx

@@ -1,42 +1,57 @@
 import { FormattedMessage } from 'react-intl';
 
-import { Link } from 'react-router-dom';
+import { NavLink } from 'react-router-dom';
 
 import { domain, termsOfServiceEnabled } from '@/mastodon/initial_state';
 
 import classes from './footer_links.module.scss';
 
-export const NavigationFooterLinks: React.FC<{ siteName?: string }> = ({
-  siteName = domain,
-}) => {
+export const NavigationFooterLinks: React.FC<{
+  siteName?: string;
+  multiColumn?: boolean;
+}> = ({ siteName = domain, multiColumn }) => {
+  const multiColumnLinkAttrs = multiColumn
+    ? {
+        target: '_blank',
+      }
+    : undefined;
+
   return (
     <div className={classes.root}>
       <h2 className={classes.heading}>{siteName}</h2>
       <ul className={classes.list}>
         <li>
-          <Link to='/about'>
+          <NavLink to='/about' {...multiColumnLinkAttrs}>
             <FormattedMessage
               id='footer.about_this_server'
               defaultMessage='About'
             />
-          </Link>
+          </NavLink>
         </li>
         <li>
-          <Link to='/privacy-policy' rel='privacy-policy'>
+          <NavLink
+            to='/privacy-policy'
+            rel='privacy-policy'
+            {...multiColumnLinkAttrs}
+          >
             <FormattedMessage
               id='footer.privacy_policy_short'
               defaultMessage='Privacy'
             />
-          </Link>
+          </NavLink>
         </li>
         {termsOfServiceEnabled && (
           <li>
-            <Link to='/terms-of-service' rel='terms-of-service'>
+            <NavLink
+              to='/terms-of-service'
+              rel='terms-of-service'
+              {...multiColumnLinkAttrs}
+            >
               <FormattedMessage
                 id='footer.terms_of_service_short'
                 defaultMessage='Terms'
               />
-            </Link>
+            </NavLink>
           </li>
         )}
       </ul>

app/javascript/mastodon/features/navigation_panel/redesign/index.tsx

@@ -83,7 +83,8 @@ export const RedesignNavigationPanel: React.FC<{
    * menu items are hidden and the design is tweaked slightly
    */
   mode?: 'static' | 'slide-out';
-}> = ({ siteName, mode = 'static' }) => {
+  multiColumn?: boolean;
+}> = ({ siteName, mode = 'static', multiColumn }) => {
   const intl = useIntl();
   const dispatch = useAppDispatch();
   const { signedIn } = useIdentity();
@@ -174,7 +175,7 @@ export const RedesignNavigationPanel: React.FC<{
                   <Link to='/lists/new'>
                     <FormattedMessage
                       id='tabs_bar.create_custom_feed'
-                      defaultMessage='Create feed'
+                      defaultMessage='Create Feed'
                     />
                   </Link>
                 </>
@@ -189,7 +190,7 @@ export const RedesignNavigationPanel: React.FC<{
                   >
                     <FormattedMessage
                       id='tabs_bar.create_custom_feed'
-                      defaultMessage='Create feed'
+                      defaultMessage='Create Feed'
                     />
                   </NavigationLink>
                   {customFeeds.map((feed) => (
@@ -271,14 +272,20 @@ export const RedesignNavigationPanel: React.FC<{
                 <NavigationAccountCardAndMenu />
               </>
             )}
-            <NavigationFooterLinks siteName={siteName} />
+            <NavigationFooterLinks
+              multiColumn={multiColumn}
+              siteName={siteName}
+            />
           </footer>
         </>
       )}
       {!signedIn && (
         <footer className={classes.footer} data-stuck={!isScrolledToBottom}>
           <LoggedOutInfo />
-          <NavigationFooterLinks siteName={siteName} />
+          <NavigationFooterLinks
+            multiColumn={multiColumn}
+            siteName={siteName}
+          />
         </footer>
       )}
       {bottomSensor}

app/javascript/mastodon/features/ui/components/columns_area/redesign.tsx

@@ -48,7 +48,7 @@ export const ColumnsAreaRedesign: React.FC<{
   return (
     <main ref={ref} className={multiColClasses.root}>
       <div className={multiColClasses.navigationWrapper}>
-        <RedesignNavigationPanel />
+        <RedesignNavigationPanel multiColumn />
       </div>
       <ComposeRedesignButton />
       <MultiColumnContent>{children}</MultiColumnContent>

app/javascript/mastodon/locales/en.json

@@ -1054,7 +1054,7 @@
   "navigation_bar.saved_posts": "Saved Posts",
   "navigation_bar.search": "Search",
   "navigation_bar.search_trends": "Search / Trending",
-  "navigation_bar.sign_out": "Sign out",
+  "navigation_bar.sign_out": "Sign Out",
   "navigation_panel.collapse_followed_tags": "Collapse followed hashtags menu",
   "navigation_panel.collapse_lists": "Collapse list menu",
   "navigation_panel.expand_followed_tags": "Expand followed hashtags menu",
@@ -1467,7 +1467,7 @@
   "subscribed_languages.target": "Change subscribed languages for {target}",
   "tab_bar.messages": "Messages",
   "tabs_bar.account_settings": "Account settings",
-  "tabs_bar.create_custom_feed": "Create feed",
+  "tabs_bar.create_custom_feed": "Create Feed",
   "tabs_bar.custom_feeds": "Custom Feeds",
   "tabs_bar.custom_feeds_empty": "You have no custom feeds yet.",
   "tabs_bar.explore": "Explore",