feat(core): add sign in to not found page (#6496)

close AFF-211

packages/frontend/component/src/components/affine-other-page-layout/index.css.ts

@@ -17,11 +17,12 @@ export const topNav = style({
   left: 0,
   right: 0,
   display: 'flex',
+  position: 'fixed',
   alignItems: 'center',
   justifyContent: 'space-between',
   padding: '16px 120px',
-  selectors: {
-    '&.mobile': {
+  '@media': {
+    'screen and (max-width: 1024px)': {
       padding: '16px 20px',
     },
   },
@@ -29,6 +30,11 @@ export const topNav = style({
 export const topNavLinks = style({
   display: 'flex',
   columnGap: 4,
+  '@media': {
+    'screen and (max-width: 1024px)': {
+      display: 'none',
+    },
+  },
 });
 export const topNavLink = style({
   color: cssVar('textPrimaryColor'),
@@ -46,6 +52,21 @@ export const iconButton = style({
     },
   },
 });
+export const hideInWideScreen = style({
+  '@media': {
+    'screen and (min-width: 1024px)': {
+      display: 'none',
+      position: 'absolute',
+    },
+  },
+});
+export const hideInSmallScreen = style({
+  '@media': {
+    'screen and (max-width: 1024px)': {
+      display: 'none',
+    },
+  },
+});
 export const menu = style({
   width: '100vw',
   height: '100vh',

packages/frontend/component/src/components/affine-other-page-layout/layout.tsx

@@ -1,7 +1,6 @@
 import { Button } from '@affine/component/ui/button';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { Logo1Icon } from '@blocksuite/icons';
-import clsx from 'clsx';
 import { useCallback } from 'react';
 
 import { DesktopNavbar } from './desktop-navbar';
@@ -9,10 +8,8 @@ import * as styles from './index.css';
 import { MobileNavbar } from './mobile-navbar';
 
 export const AffineOtherPageLayout = ({
-  isSmallScreen,
   children,
 }: {
-  isSmallScreen: boolean;
   children: React.ReactNode;
 }) => {
   const t = useAFFiNEI18N();
@@ -23,25 +20,22 @@ export const AffineOtherPageLayout = ({
 
   return (
     <div className={styles.root}>
-      <div
-        className={clsx(styles.topNav, {
-          mobile: isSmallScreen,
-        })}
-      >
-        <a href="/" rel="noreferrer" className={styles.affineLogo}>
-          <Logo1Icon width={24} height={24} />
-        </a>
-        {isSmallScreen ? (
+      {environment.isDesktop ? null : (
+        <div className={styles.topNav}>
+          <a href="/" rel="noreferrer" className={styles.affineLogo}>
+            <Logo1Icon width={24} height={24} />
+          </a>
+
+          <DesktopNavbar />
+          <Button
+            onClick={openDownloadLink}
+            className={styles.hideInSmallScreen}
+          >
+            {t['com.affine.auth.open.affine.download-app']()}
+          </Button>
           <MobileNavbar />
-        ) : (
-          <>
-            <DesktopNavbar />
-            <Button onClick={openDownloadLink}>
-              {t['com.affine.auth.open.affine.download-app']()}
-            </Button>
-          </>
-        )}
-      </div>
+        </div>
+      )}
 
       {children}
     </div>

packages/frontend/component/src/components/affine-other-page-layout/mobile-navbar.tsx

@@ -29,7 +29,7 @@ export const MobileNavbar = () => {
   );
 
   return (
-    <div>
+    <div className={styles.hideInWideScreen}>
       <Menu
         items={menuItems}
         contentOptions={{