feat(author sidebar): add to author and profile mobile views on top of posts, remove about tab

src/components/author-sidebar/author-sidebar.tsx

@@ -109,11 +109,11 @@ const AuthorSidebar = () => {
           <>
             <div>
               <span className={styles.karma}>{postScore}</span> post karma
-              {isAuthorPage && postScore && ' (estimated)'}
+              {isAuthorPage && postScore ? ' (estimated)' : null}
             </div>
             <div>
               <span className={styles.karma}>{replyScore}</span> comment karma
-              {isAuthorPage && replyScore && ' (estimated)'}
+              {isAuthorPage && replyScore ? ' (estimated)' : null}
             </div>
           </>
         ) : null}

src/components/header/header.tsx

@@ -313,7 +313,7 @@ const Header = () => {
         <div className={`${styles.tabs} ${hasFewTabs ? styles.fewTabs : ''}`}>
           <ul className={styles.tabMenu}>
             <HeaderTabs />
-            {(isSubplebbitPage || isSubplebbitSubmitPage || isPostPage || isProfilePage || isAuthorPage) && <AboutButton />}
+            {(isSubplebbitPage || isSubplebbitSubmitPage || isPostPage) && <AboutButton />}
           </ul>
         </div>
       )}

src/components/sort-dropdown/sort-dropdown.tsx

@@ -2,7 +2,7 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 import styles from './sort-dropdown.module.css';
 
 const SortDropdown = () => {
-  const sortLabels = ['new', 'old']
+  const sortLabels = ['new', 'old'];
 
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
   const dropdownRef = useRef<HTMLDivElement>(null);

src/views/author/author.module.css

@@ -7,7 +7,13 @@ div[data-viewport-type="window"] {
 }
 
 @media (max-width: 768px) {
-  .sidebar {
+  .sidebarDesktop {
     display: none;
   }
+  
+  .sidebarMobile {
+    width: 300px;
+    display: inline-block;
+    padding: 10px 0 0px 5px;
+  }
 }

src/views/author/author.tsx

@@ -20,6 +20,7 @@ const Author = () => {
   const params = useParams();
   const isAuthorCommentsPage = isAuthorCommentsView(location.pathname, params);
   const isAuthorSubmittedPage = isAuthorSubmittedView(location.pathname, params);
+  const isMobile = window.innerWidth < 768;
 
   const { authorComments, lastCommentCid, hasMore, loadMore } = useAuthorComments({ commentCid, authorAddress });
 
@@ -72,7 +73,7 @@ const Author = () => {
 
   return (
     <div className={styles.content}>
-      <div className={styles.sidebar}>
+      <div className={isMobile ? styles.sidebarMobile : styles.sidebarDesktop}>
         <AuthorSidebar />
       </div>
       <SortDropdown />

src/views/profile/profile.module.css

@@ -7,7 +7,13 @@ div[data-viewport-type="window"] {
 }
 
 @media (max-width: 768px) {
-  .sidebar {
+  .sidebarDesktop {
     display: none;
   }
+  
+  .sidebarMobile {
+    width: 300px;
+    display: inline-block;
+    padding: 10px 0 0px 5px;
+  }
 }

src/views/profile/profile.tsx

@@ -22,6 +22,7 @@ const Profile = () => {
   const isDownvotedPage = isDownvotedView(location.pathname);
   const isCommentsPage = isProfileCommentsView(location.pathname);
   const isSubmittedPage = isProfileSubmittedView(location.pathname);
+  const isMobile = window.innerWidth < 768;
 
   const upvotedCommentCids = useMemo(() => accountVotes?.filter((vote) => vote.vote === 1).map((vote) => vote.commentCid) || [], [accountVotes]);
   const downvotedCommentCids = useMemo(() => accountVotes?.filter((vote) => vote.vote === -1).map((vote) => vote.commentCid) || [], [accountVotes]);
@@ -61,7 +62,7 @@ const Profile = () => {
 
   return (
     <div className={styles.content}>
-      <div className={styles.sidebar}>
+      <div className={isMobile ? styles.sidebarMobile : styles.sidebarDesktop}>
         <AuthorSidebar />
       </div>
       <SortDropdown />