chore: tweak navigation styles

web/src/components/Navigation.tsx

@@ -15,7 +15,11 @@ interface NavLinkItem {
   icon: React.ReactNode;
 }
 
-const Navigation = () => {
+interface Props {
+  className?: string;
+}
+
+const Navigation = (props: Props) => {
   const t = useTranslate();
   const user = useCurrentUser();
   const inboxStore = useInboxStore();
@@ -110,7 +114,12 @@ const Navigation = () => {
     : [exploreNavLink, signInNavLink, aboutNavLink];
 
   return (
-    <header className="w-full h-full overflow-auto flex flex-col justify-start items-start py-4 md:pt-6 z-30">
+    <header
+      className={classNames(
+        "w-full h-full overflow-auto flex flex-col justify-start items-start py-4 md:pt-6 z-30 hide-scrollbar",
+        props.className
+      )}
+    >
       <UserBanner />
       <div className="w-full px-1 py-2 flex flex-col justify-start items-start shrink-0 space-y-2">
         {navLinks.map((navLink) => (

web/src/components/UserBanner.tsx

@@ -23,7 +23,7 @@ const UserBanner = () => {
       <Dropdown
         className="w-auto inline-flex"
         trigger={
-          <div className="px-3 py-2 max-w-full flex flex-row justify-start items-center cursor-pointer rounded-2xl hover:shadow hover:bg-white dark:hover:bg-zinc-700">
+          <div className="px-3 py-2 max-w-full flex flex-row justify-start items-center cursor-pointer rounded-2xl border border-transparent text-gray-800 dark:text-gray-300 hover:bg-white hover:border-gray-200 dark:hover:border-zinc-700 dark:hover:bg-zinc-800">
             <UserAvatar className="shadow shrink-0 mr-2" avatarUrl={user?.avatarUrl} />
             <span className="text-lg font-medium text-slate-800 dark:text-gray-200 shrink truncate">{title}</span>
           </div>

web/src/layouts/Root.tsx

@@ -11,8 +11,8 @@ function Root() {
     <div className="w-full min-h-full">
       <div className="w-full sm:pl-56 md:pl-64 mx-auto flex flex-row justify-center items-start">
         {sm && (
-          <div className="hidden sm:block fixed top-0 left-0 w-56 md:w-64 px-4 border-r dark:border-zinc-800 h-full bg-zinc-50 dark:bg-zinc-800 dark:bg-opacity-40 transition-all hover:shadow-xl z-2">
-            <Navigation />
+          <div className="hidden sm:block fixed top-0 left-0 w-56 md:w-64 border-r dark:border-zinc-800 h-full bg-zinc-50 dark:bg-zinc-800 dark:bg-opacity-40 transition-all hover:shadow-xl z-2">
+            <Navigation className="px-4" />
           </div>
         )}
         <main className="w-full h-auto flex-grow shrink flex flex-col justify-start items-center">

web/src/pages/About.tsx

@@ -8,22 +8,24 @@ const About = () => {
       <MobileHeader />
       <div className="w-full px-4 sm:px-6">
         <div className="w-full shadow flex flex-col justify-start items-start px-4 py-3 rounded-xl bg-white dark:bg-zinc-800 text-black dark:text-gray-300">
-          <img className="w-auto h-12" src="https://www.usememos.com/full-logo-landscape.png" alt="" />
+          <a href="https://www.usememos.com" target="_blank">
+            <img className="w-auto h-12" src="https://www.usememos.com/full-logo-landscape.png" alt="memos" />
+          </a>
           <p className="text-base">A privacy-first, lightweight note-taking service. Easily capture and share your great thoughts.</p>
           <div className="mt-1 flex flex-row items-center flex-wrap">
-            <Link underline="always" href="https://github.com/usememos/memos">
+            <Link underline="always" href="https://www.github.com/usememos/memos" target="_blank">
               GitHub Repo
             </Link>
             <Icon.Dot className="w-4 h-auto opacity-60" />
-            <Link underline="always" href="https://www.usememos.com/">
+            <Link underline="always" href="https://www.usememos.com/" target="_blank">
               Offical Website
             </Link>
             <Icon.Dot className="w-4 h-auto opacity-60" />
-            <Link underline="always" href="https://www.usememos.com/blog">
+            <Link underline="always" href="https://www.usememos.com/blog" target="_blank">
               Blogs
             </Link>
             <Icon.Dot className="w-4 h-auto opacity-60" />
-            <Link underline="always" href="https://www.usememos.com/blog">
+            <Link underline="always" href="https://www.usememos.com/docs" target="_blank">
               Documents
             </Link>
           </div>