fix: topbar scrolling and external link icon

consolelabs · Dec 18, 2023 · cd32424 · cd32424
1 parent e919e66
commit cd32424
Show file tree

Hide file tree

Showing 6 changed files with 314 additions and 288 deletions.
diff --git a/components/layout/Footer.tsx b/components/layout/Footer.tsx
@@ -10,6 +10,7 @@ import {
   NekoShop,
   WagmiConics,
 } from '@configs/links'
+import ArrowLink from '@components/icons/ArrowLink'
 
 export default function Footer() {
   return (
@@ -48,22 +49,42 @@ export default function Footer() {
           links: [
             {
               href: NekoNFT,
-              text: 'NFT',
+              // @ts-ignore
+              text: (
+                <div className="flex items-center justify-start">
+                  NFT <ArrowLink className="h-4 w-4" />
+                </div>
+              ),
               newTab: true,
             },
             {
               href: '#',
-              text: 'Wallet',
+              // @ts-ignore
+              text: (
+                <div className="flex items-center justify-start">
+                  Wallet <ArrowLink className="h-4 w-4" />
+                </div>
+              ),
               newTab: true,
             },
             {
               href: NekoShop,
-              text: 'Shop',
               newTab: true,
+              // @ts-ignore
+              text: (
+                <div className="flex items-center justify-start">
+                  Shop <ArrowLink className="h-4 w-4" />
+                </div>
+              ),
             },
             {
               href: WagmiConics,
-              text: 'Comic',
+              // @ts-ignore
+              text: (
+                <div className="flex items-center justify-start">
+                  Comic <ArrowLink className="h-4 w-4" />
+                </div>
+              ),
               newTab: true,
             },
           ],

diff --git a/components/layout/Navbar.tsx b/components/layout/Navbar.tsx
@@ -1,4 +1,5 @@
 import InstallButton, { installContentMenus } from '@components/InstallButton'
+import ArrowLink from '@components/icons/ArrowLink'
 import { NekoNFT, NekoShop } from '@configs/links'
 import {
   Accordion,
@@ -23,7 +24,7 @@ const shareItems = [
     href={NekoNFT}
     target="_blank"
   >
-    NFT
+    NFT <ArrowLink className="h-4 w-4" />
   </Button>,
   <Button
     variant="ghost"
@@ -34,7 +35,7 @@ const shareItems = [
     href="#"
     target="_blank"
   >
-    Wallet
+    Wallet <ArrowLink className="h-4 w-4" />
   </Button>,
   <Button
     variant="ghost"
@@ -45,7 +46,7 @@ const shareItems = [
     href={NekoShop}
     target="_blank"
   >
-    Shop
+    Shop <ArrowLink className="h-4 w-4" />
   </Button>,
   <Button
     as="a"

diff --git a/package.json b/package.json
@@ -20,11 +20,11 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@types/node": "^20.10.4",
+    "@types/node": "^20.10.5",
     "@types/react": "^18.2.45",
-    "@types/react-dom": "^18.2.17",
+    "@types/react-dom": "^18.2.18",
     "autoprefixer": "^10.4.16",
-    "eslint": "^8.55.0",
+    "eslint": "^8.56.0",
     "eslint-config-next": "14.0.4",
     "postcss": "^8.4.32",
     "prettier": "^3.1.1",

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -13,8 +13,10 @@ export default function App({ Component, pageProps }: AppProps) {
   return (
     <main className={clsx(inter.className, 'relative pt-14 lg:pt-0')}>
       <Navbar />
-      <Component {...pageProps} />
-      <Footer />
+      <div className="h-[calc(100vh-57px)] overflow-scroll relative z-0">
+        <Component {...pageProps} />
+        <Footer />
+      </div>
     </main>
   )
 }