new nav layout

src/components/Header.jsx

@@ -1,16 +1,17 @@
-import React from 'react'
 import clsx from 'clsx'
 import Link from 'next/link'
-import { useEffect, useState } from 'react'
+import React, { useEffect, useState } from 'react'
 
 import { MobileNavigation } from '@/components/MobileNavigation'
 import { Search } from '@/components/Search'
 import { ThemeSelector } from '@/components/ThemeSelector'
+import {
+  categoryToColor,
+  IconWithName,
+} from '@/components/products/IconWithName'
 import { Sections } from '@/components/products/Sections'
 import { SwitcherDialog } from '@/components/products/SwitcherDialog'
-import { IconWithName } from '@/components/products/IconWithName'
 import NavList from './NavList'
-import { categoryToColor } from '@/components/products/IconWithName'
 import { Logo } from './products/global/Logo'
 
 export function Header({ page }) {
@@ -49,8 +50,6 @@ export function Header({ page }) {
                 ),
                 className: 'h-8 w-8 sm:hidden',
               })}
-              {/* <IconWithName product={page.product} className="hidden sm:flex" /> */}
-              {/* {console.log(page.product)} */}
               <div className="flex">
                 <Logo className="h-8 w-8" />
                 <div className="ml-4 flex flex-1 flex-col justify-center text-left">
@@ -65,33 +64,18 @@ export function Header({ page }) {
             </Link>
           </div>
           <div className="flex flex-col lg:hidden">
-            <SwitcherDialog>
-              {({ setIsOpen }) => (
-                <button
-                  onClick={() => setIsOpen(true)}
-                  className="-mx-4 -my-2 rounded-lg px-4 py-2"
-                >
-                  {React.cloneElement(page.product.icon, {
-                    color: categoryToColor.get(
-                      page.product.navigationMenuCatergory
-                    ),
-                    className: 'h-8 w-8 sm:hidden',
-                  })}
-                  <IconWithName
-                    product={page.product}
-                    className="hidden sm:flex"
-                    description={true}
-                  />
-                </button>
-              )}
-            </SwitcherDialog>
+            <IconWithName
+              product={page.product}
+              className="flex"
+              description={false}
+            />
           </div>
         </div>
 
         <NavList />
 
         <div className="relative flex basis-0 items-center justify-end gap-6 sm:gap-8 lg:flex-grow">
-          <div className="-my-5 mr-6 sm:mr-8 lg:mr-0">
+          <div className="-my-5">
             <Search />
           </div>
           <ThemeSelector className="relative z-10" />
@@ -103,20 +87,36 @@ export function Header({ page }) {
           >
             <GitHubIcon className="h-6 w-6 fill-slate-400 group-hover:fill-slate-500 dark:group-hover:fill-slate-300" />
           </Link>
+          <Link
+            href={'https://discord.com/invite/metaplex'}
+            className="group"
+            aria-label="Discord"
+            target="_blank"
+          >
+            <DiscordIcon className="h-6 w-6 fill-slate-400 group-hover:fill-slate-500 dark:group-hover:fill-slate-300" />
+          </Link>
+          <Link
+            href={'https://x.com/metaplex'}
+            className="group"
+            aria-label="X"
+            target="_blank"
+          >
+            <XIcon className="h-6 w-6 fill-slate-400 group-hover:fill-slate-500 dark:group-hover:fill-slate-300" />
+          </Link>
         </div>
       </div>
 
       {!page.product.isJsxPage &&
         page.product.sections &&
         page.product.sections.length > 1 && (
-          <div className="flex justify-center px-8 py-2">
+          <div className="hidden justify-center px-8 py-2 md:flex">
             <IconWithName
               product={page.product}
-              className="flex items-center sm:flex"
+              className="hidden items-center lg:flex"
             />
 
             <Sections
-              className="hidden gap-6 px-2 py-2 text-sm sm:px-4 lg:flex lg:px-6 "
+              className="flex gap-6 px-2 py-2 text-sm sm:px-4 lg:px-6 "
               sections={page.product.sections}
               activeSectionId={page.activeSection?.id}
             />
@@ -133,3 +133,19 @@ function GitHubIcon(props) {
     </svg>
   )
 }
+
+function DiscordIcon(props) {
+  return (
+    <svg aria-hidden="true" viewBox="0 0 16 16" {...props}>
+      <path d="M13.545 2.907a13.2 13.2 0 0 0-3.257-1.011.05.05 0 0 0-.052.025c-.141.25-.297.577-.406.833a12.2 12.2 0 0 0-3.658 0 8 8 0 0 0-.412-.833.05.05 0 0 0-.052-.025c-1.125.194-2.22.534-3.257 1.011a.04.04 0 0 0-.021.018C.356 6.024-.213 9.047.066 12.032q.003.022.021.037a13.3 13.3 0 0 0 3.995 2.02.05.05 0 0 0 .056-.019q.463-.63.818-1.329a.05.05 0 0 0-.01-.059l-.018-.011a9 9 0 0 1-1.248-.595.05.05 0 0 1-.02-.066l.015-.019q.127-.095.248-.195a.05.05 0 0 1 .051-.007c2.619 1.196 5.454 1.196 8.041 0a.05.05 0 0 1 .053.007q.121.1.248.195a.05.05 0 0 1-.004.085 8 8 0 0 1-1.249.594.05.05 0 0 0-.03.03.05.05 0 0 0 .003.041c.24.465.515.909.817 1.329a.05.05 0 0 0 .056.019 13.2 13.2 0 0 0 4.001-2.02.05.05 0 0 0 .021-.037c.334-3.451-.559-6.449-2.366-9.106a.03.03 0 0 0-.02-.019m-8.198 7.307c-.789 0-1.438-.724-1.438-1.612s.637-1.613 1.438-1.613c.807 0 1.45.73 1.438 1.613 0 .888-.637 1.612-1.438 1.612m5.316 0c-.788 0-1.438-.724-1.438-1.612s.637-1.613 1.438-1.613c.807 0 1.451.73 1.438 1.613 0 .888-.631 1.612-1.438 1.612" />
+    </svg>
+  )
+}
+
+function XIcon(props) {
+  return (
+    <svg {...props} viewBox="0 0 16 16" aria-hidden="true">
+      <path d="M12.6.75h2.454l-5.36 6.142L16 15.25h-4.937l-3.867-5.07-4.425 5.07H.316l5.733-6.57L0 .75h5.063l3.495 4.633L12.601.75Zm-.86 13.028h1.36L4.323 2.145H2.865z" />
+    </svg>
+  )
+}

src/components/MobileNavigation.jsx

@@ -1,11 +1,11 @@
-import { useEffect, useState } from 'react'
+import { Dialog } from '@headlessui/react'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
-import { Dialog } from '@headlessui/react'
+import { useEffect, useState } from 'react'
 
 import { Navigation } from '@/components/Navigation'
 import { Sections } from '@/components/products/Sections'
-import { ComputerDesktopIcon } from '@heroicons/react/24/outline'
+import { ChevronLeftIcon, HomeIcon } from '@heroicons/react/20/solid'
 import { IconWithName } from './products/IconWithName'
 
 function MenuIcon(props) {
@@ -87,16 +87,25 @@ export function MobileNavigation({ page }) {
               <IconWithName product={page.product} />
             </Link>
           </div>
+          <Link
+                href="/"
+                className="mt-12 flex items-center gap-2 text-slate-900 dark:text-white"
+              >
+                <HomeIcon height={20} /> Home
+              </Link>
           {page.product.name != 'Metaplex' && (
             <>
               <Link
                 href="/programs-and-tools"
-                className="mt-12 flex items-center gap-2 text-slate-900 dark:text-white"
+                className="mt-4 flex items-center gap-2 text-slate-900 dark:text-white"
               >
-                <ComputerDesktopIcon height={20} /> Programs and Tools
+                <ChevronLeftIcon height={20} /> Programs and Tools
               </Link>
             </>
           )}
+
+          <div className="text-black dark:text-white mt-8 text-2xl font-bold">{page.product.name}</div>
+
           {page.product.sections && page.product.sections.length > 1 && (
             <Sections
               className="-ml-2 mt-6 flex flex-col gap-2"

src/components/NavList.jsx

@@ -1,23 +1,28 @@
 'use client'
 
 import { Popover } from '@headlessui/react'
-import { useState } from 'react'
+import Link from 'next/link'
 import { SwitcherPopover } from './products/SwitcherPopover'
 import { productCategories } from './products/index'
-import { useRouter } from 'next/router'
-import Link from 'next/link'
 
 const NavList = () => {
-
   return (
     <div className="hidden cursor-pointer  gap-8 lg:flex">
       {productCategories.map((item, index) => {
+        if (item === 'Aura') {
+          return (
+            <Link href="/aura" key={index}>
+              <div className="-mx-4 -my-2 rounded-lg px-4 py-2 text-black dark:text-white">
+                Aura
+              </div>
+            </Link>
+          )
+        }
+
         return (
           <div className="hidden flex-col lg:flex" key={index}>
             <SwitcherPopover menuItem={productCategories[index]}>
-              <Popover.Button
-                className="-mx-4 -my-2 rounded-lg px-4 py-2 text-black dark:text-white"
-              >
+              <Popover.Button className="-mx-4 -my-2 rounded-lg px-4 py-2 text-black dark:text-white">
                 {item}
               </Popover.Button>
             </SwitcherPopover>
@@ -26,9 +31,9 @@ const NavList = () => {
       })}
       <div className="hidden flex-col lg:flex">
         <Link href="/guides">
-        <div className="-mx-4 -my-2 rounded-lg px-4 py-2 text-black dark:text-white">
-          Guides
-        </div>
+          <div className="-mx-4 -my-2 rounded-lg px-4 py-2 text-black dark:text-white">
+            Guides
+          </div>
         </Link>
       </div>
     </div>

src/components/Navigation.jsx

@@ -1,6 +1,6 @@
+import clsx from 'clsx'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
-import clsx from 'clsx'
 import Badge from './products/Badge'
 
 export function Navigation({ product, navigation, className }) {

src/components/Search.jsx

@@ -1,8 +1,8 @@
-import { useCallback, useEffect, useState } from 'react'
-import { createPortal } from 'react-dom'
+import { DocSearchModal, useDocSearchKeyboardEvents } from '@docsearch/react'
 import Link from 'next/link'
 import Router from 'next/router'
-import { DocSearchModal, useDocSearchKeyboardEvents } from '@docsearch/react'
+import { useCallback, useEffect, useState } from 'react'
+import { createPortal } from 'react-dom'
 
 const docSearchConfig = {
   appId: process.env.NEXT_PUBLIC_DOCSEARCH_APP_ID,
@@ -46,14 +46,14 @@ export function Search({iconOnly}) {
     <>
       <button
         type="button"
-        className={`flex ${iconOnly ? "": "border border-neutral-300 dark:border-neutral-800 rounded-lg p-2 max-w-4xl w-full justify-start items-center "}`}
+        className={`flex ${iconOnly ? "": "p-2 max-w-4xl w-full justify-start items-center "}`}
         onClick={onOpen}
       >
         <SearchIcon className="h-7 w-7 flex-none fill-slate-400 group-hover:fill-slate-500 dark:fill-slate-500 lg:group-hover:fill-slate-400" />
         
-        <span className="sr-only lg:not-sr-only lg:ml-2 lg:text-slate-500 lg:dark:text-slate-400">
+        {/* <span className="sr-only lg:not-sr-only lg:ml-2 lg:text-slate-500 lg:dark:text-slate-400">
           Search docs
-        </span>
+        </span> */}
         {/* {modifierKey && (
           <kbd className="ml-auto hidden font-medium text-slate-400 dark:text-slate-500 lg:block">
             <kbd className="font-sans">{modifierKey}</kbd>

src/components/products/Grid.jsx

@@ -1,20 +1,19 @@
+import Link from 'next/link'
 import { IconWithName } from './IconWithName'
 import { products as allProducts } from './index'
-import Link from 'next/link'
 
 export function Grid({
   onClick,
   withoutFallback,
   menuItem,
-  numCols = 'grid-cols-3',
+  numCols,
   ...props
 }) {
-  
   const products = allProducts.filter(
     (product) => menuItem === product.navigationMenuCatergory
   )
 
-  let className = `relative grid ${numCols} gap-3`
+  let className = `relative grid sm:grid-cols-2 grid-cols-1`
 
   return (
     <ul className={className} {...props}>
@@ -25,7 +24,7 @@ export function Grid({
             className="block content-start rounded-lg p-3 hover:bg-slate-50 hover:dark:bg-slate-700"
             onClick={onClick}
           >
-            {IconWithName({ product, description: true})}
+            {IconWithName({ product, description: true })}
           </Link>
         </li>
       ))}

src/components/products/GridAllProducts.jsx

@@ -1,12 +1,15 @@
-import clsx from 'clsx'
-import { products as allProducts, productCategories } from './index'
-import Link from 'next/link'
 import { Grid } from './Grid'
+import { productCategories } from './index'
 
 export function MarkdocGrid() {
   return (
     <div className="not-prose">
       {productCategories.map((item, index) => {
+
+        console.log(item)
+
+        if (item === 'Aura') return
+
         return (
           <>
             <h2 key={index} className="mb-4 mt-8 text-2xl font-bold">
@@ -16,6 +19,7 @@ export function MarkdocGrid() {
               key={index}
               withoutFallback
               menuItem={productCategories[index]}
+              
             />
           </>
         )

src/components/products/IconWithName.jsx

@@ -1,9 +1,8 @@
 import React from 'react'
 
 export const categoryToColor = new Map([
-  ['Create', '#BEF264'],
-  ['Commerce', '#F0ABFC'],
-  ['Utility', '#FCE04D'],
+  ['MPL', '#BEF264'],
+  ['Aura', '#F0ABFC'],
   ['Dev Tools', '#7DEDFC'],
 ])
 

src/components/products/amman/index.js

@@ -1,8 +1,8 @@
 import {
   documentationSection
-} from '@/shared/sections';
-import { ServerIcon } from '@heroicons/react/24/solid';
-import { Hero } from './Hero';
+} from '@/shared/sections'
+import { ServerIcon } from '@heroicons/react/24/solid'
+import { Hero } from './Hero'
 
 export const amman = {
   name: 'Amman',

src/components/products/bubblegum/index.js

@@ -2,16 +2,16 @@ import {
   documentationSection,
   guidesSection,
   referencesSection
-} from '@/shared/sections';
-import { ArchiveBoxIcon } from '@heroicons/react/24/solid';
-import { Hero } from './Hero';
+} from '@/shared/sections'
+import { ArchiveBoxIcon } from '@heroicons/react/24/solid'
+import { Hero } from './Hero'
 
 export const bubblegum = {
   name: 'Bubblegum',
   headline: 'Compressed NFTs',
   description: 'NFTs that scale to new orders of magnitude.',
   path: 'bubblegum',
-  navigationMenuCatergory: 'Create',
+  navigationMenuCatergory: 'MPL',
   icon: <ArchiveBoxIcon />,
   github: 'https://github.com/metaplex-foundation/mpl-bubblegum',
   className: 'accent-green',

src/components/products/candyMachine/index.js

@@ -1,18 +1,16 @@
 import {
-  changelogSection,
   documentationSection,
   guidesSection,
-  recipesSection,
   referencesSection
-} from '@/shared/sections';
-import { Square2StackIcon } from '@heroicons/react/24/solid';
-import { Hero } from './Hero';
+} from '@/shared/sections'
+import { Square2StackIcon } from '@heroicons/react/24/solid'
+import { Hero } from './Hero'
 
 export const candyMachine = {
   name: 'Candy Machine',
   headline: 'TM NFT launchpad',
   description: 'Launch your next NFT collection on Solana.',
-  navigationMenuCatergory: 'Commerce',
+  navigationMenuCatergory: 'MPL',
   path: 'candy-machine',
   icon: <Square2StackIcon />,
   github: 'https://github.com/metaplex-foundation/mpl-candy-machine',

src/components/products/core/index.js

@@ -11,7 +11,7 @@ export const core = {
   name: 'Core',
   headline: 'Next gen NFT standard',
   description: 'Next generation Solana NFT standard.',
-  navigationMenuCatergory: 'Create',
+  navigationMenuCatergory: 'MPL',
   path: 'core',
   icon: <StopCircleIcon />,
   github: 'https://github.com/metaplex-foundation/mpl-core',

src/components/products/coreCandyMachine/index.js

@@ -1,16 +1,12 @@
-import {
-  documentationSection,
-  guidesSection,
-  referencesSection,
-} from '@/shared/sections';
-import { Square3Stack3DIcon } from '@heroicons/react/24/solid';
-import { Hero } from './Hero';
+import { documentationSection, guidesSection, referencesSection } from '@/shared/sections'
+import { Square3Stack3DIcon } from '@heroicons/react/24/solid'
+import { Hero } from './Hero'
 
 export const coreCandyMachine = {
   name: 'Core Candy Machine',
   headline: 'Core Asset launchpad',
   description: 'Launch your next MPL Core Asset collection on Solana.',
-  navigationMenuCatergory: 'Commerce',
+  navigationMenuCatergory: 'MPL',
   path: 'core-candy-machine',
   icon: <Square3Stack3DIcon />,
   github: 'https://github.com/metaplex-foundation/mpl-core-candy-machine',

src/components/products/das-api/index.js

@@ -3,9 +3,9 @@ import {
   documentationSection,
   recipesSection,
   referencesSection,
-} from '@/shared/sections';
-import { TableCellsIcon } from '@heroicons/react/24/solid';
-import { Hero } from './Hero';
+} from '@/shared/sections'
+import { TableCellsIcon } from '@heroicons/react/24/solid'
+import { Hero } from './Hero'
 
 export const das = {
   name: 'DAS API',

src/components/products/fusion/index.js

@@ -8,7 +8,7 @@ export const fusion = {
   name: 'Fusion',
   headline: 'NFTs inside NFTs',
   description: 'Create composable NFTs.',
-  navigationMenuCatergory: 'Utility',
+  navigationMenuCatergory: 'MPL',
   path: 'fusion',
   icon: <CircleStackIcon />,
   github: 'https://github.com/metaplex-foundation/mpl-trifle',

src/components/products/global/index.js

@@ -21,6 +21,7 @@ export const global = {
           links: [
             { title: 'Introduction', href: '/' },
             { title: 'Programs and Tools', href: '/programs-and-tools' },
+            { title: 'Metaplex Aura', href: '/aura' },
           ],
         },
         {
@@ -32,7 +33,10 @@ export const global = {
               title: 'Understanding Programs',
               href: '/understanding-programs',
             },
-            {title: "Metaplex Rust SDKs", href: '/guides/rust/metaplex-rust-sdks'},
+            {
+              title: 'Metaplex Rust SDKs',
+              href: '/guides/rust/metaplex-rust-sdks',
+            },
             { title: 'RPC Providers', href: '/rpc-providers' },
             { title: 'Storage Providers', href: '/storage-providers' },
             { title: 'Stability Index', href: '/stability-index' },
@@ -50,4 +54,4 @@ export const global = {
       ],
     },
   ],
-}
+}

src/components/products/hydra/index.js

@@ -1,19 +1,16 @@
 import {
-  changelogSection,
   documentationSection,
-  recipesSection,
-  referencesSection,
+  referencesSection
 } from '@/shared/sections'
-import { Hero } from './Hero'
 import { ArrowsPointingOutIcon } from '@heroicons/react/24/solid'
+import { Hero } from './Hero'
 
 export const hydra = {
   name: 'Hydra',
   headline: 'Fanout wallets',
   description: 'Create shared wallets, split between multiple shareholders.',
-  navigationMenuCatergory: 'Hydra',
   path: 'hydra',
-  navigationMenuCatergory: 'Utility',
+  navigationMenuCatergory: 'MPL',
   icon: <ArrowsPointingOutIcon />,
   github: 'https://github.com/metaplex-foundation/mpl-hydra',
   className: 'accent-amber',

src/components/products/index.js

@@ -17,7 +17,7 @@ import { tokenAuthRules } from './tokenAuthRules'
 import { tokenMetadata } from './tokenMetadata'
 import { umi } from './umi'
 
-export const productCategories = ['Create', 'Commerce', 'Utility', 'Dev Tools']
+export const productCategories = ['MPL', 'Aura', 'Dev Tools']
 
 export const products = [
   global,

src/components/products/inscription/index.js

@@ -2,8 +2,8 @@ import {
   documentationSection,
   referencesSection
 } from '@/shared/sections'
-import { Hero } from './Hero'
 import { PencilSquareIcon } from '@heroicons/react/24/solid'
+import { Hero } from './Hero'
 
 export const inscription = {
   name: 'Inscription',
@@ -11,7 +11,7 @@ export const inscription = {
   description: 'Inscribe Data to Solana state.',
   path: 'inscription',
   icon: <PencilSquareIcon />,
-  navigationMenuCatergory: 'Create',
+  navigationMenuCatergory: 'MPL',
   github: 'https://github.com/metaplex-foundation/mpl-inscription',
   className: 'accent-green',
   heroes: [{ path: '/inscription', component: Hero }],

src/components/products/mpl-hybrid/index.js

@@ -10,7 +10,7 @@ export const mplHybrid = {
   name: 'MPL-Hybrid',
   headline: 'Hybrid Assets',
   description: 'Framework and on-chain protocol for hybrid assets.',
-  navigationMenuCatergory: 'Create',
+  navigationMenuCatergory: 'MPL',
   path: 'mpl-hybrid',
   icon: <ArrowsRightLeftIcon />,
   github: 'https://github.com/metaplex-foundation/mpl-hybrid',

src/components/products/sugar/index.js

@@ -1,11 +1,5 @@
-import {
-  changelogSection,
-  documentationSection,
-  recipesSection,
-  referencesSection,
-} from '@/shared/sections'
-import { Hero } from './Hero'
 import { CommandLineIcon } from '@heroicons/react/24/solid'
+import { Hero } from './Hero'
 
 export const sugar = {
   name: 'Sugar',

src/components/products/tokenAuthRules/index.js

@@ -1,17 +1,15 @@
 import {
-  changelogSection,
   documentationSection,
-  recipesSection,
-  referencesSection,
+  referencesSection
 } from '@/shared/sections'
-import { Hero } from './Hero'
 import { LockOpenIcon } from '@heroicons/react/24/solid'
+import { Hero } from './Hero'
 
 export const tokenAuthRules = {
   name: 'Token Auth Rules',
   headline: 'NFT permissions',
   description: 'Design custom authorization rules for your NFTs.',
-  navigationMenuCatergory: 'Create',
+  navigationMenuCatergory: 'MPL',
   path: 'token-auth-rules',
   icon: <LockOpenIcon />,
   github: 'https://github.com/metaplex-foundation/mpl-token-auth-rules',

src/components/products/tokenMetadata/index.js

@@ -1,5 +1,4 @@
 import {
-  changelogSection,
   documentationSection,
   guidesSection,
   referencesSection
@@ -11,7 +10,7 @@ export const tokenMetadata = {
   name: 'Token Metadata',
   headline: 'Digital ownership standard',
   description: 'The NFT standard on Solana.',
-  navigationMenuCatergory: 'Create',
+  navigationMenuCatergory: 'MPL',
   path: 'token-metadata',
   icon: <EllipsisHorizontalCircleIcon />,
   github: 'https://github.com/metaplex-foundation/mpl-token-metadata',

src/components/products/umi/index.js

@@ -1,12 +1,10 @@
 import {
-  changelogSection,
   documentationSection,
   guidesSection,
-  recipesSection,
-  referencesSection,
-} from '@/shared/sections';
-import { CodeBracketSquareIcon } from '@heroicons/react/24/solid';
-import { Hero } from './Hero';
+  referencesSection
+} from '@/shared/sections'
+import { CodeBracketSquareIcon } from '@heroicons/react/24/solid'
+import { Hero } from './Hero'
 
 export const umi = {
   name: 'Umi',

src/pages/_app.jsx

@@ -1,18 +1,18 @@
 import Head from 'next/head'
 import Script from 'next/script'
 
-import { Layout } from '@/components/Layout'
 import { DialectProvider } from '@/components/DialectContext'
+import { Layout } from '@/components/Layout'
 import { usePage } from '@/shared/usePage'
 
+import '@/styles/extra.css'
 import '@/styles/tailwind.css'
 import 'focus-visible'
 import 'reactflow/dist/base.css'
-import '@/styles/extra.css'
 
 // Add Prism components.
 import { Prism } from 'prism-react-renderer'
-;(typeof global !== 'undefined' ? global : window).Prism = Prism
+(typeof global !== 'undefined' ? global : window).Prism = Prism
 require('prismjs/components/prism-rust')
 
 export default function App({ Component, pageProps }) {

src/pages/_document.jsx

@@ -40,7 +40,7 @@ const themeScript = `
 
 export default function Document() {
   return (
-    <Html className="antialiased [font-feature-settings:'ss01']" lang="en">
+    <Html className="antialiased [font-feature-settings:'ss01'] scrollbar" lang="en">
       <Head>
         <script dangerouslySetInnerHTML={{ __html: themeScript }} />
         <link

src/styles/extra.css

@@ -1,11 +1,16 @@
 .dropShadowLight {
-    -webkit-box-shadow: 11px 11px 22px -3px rgba(255, 255, 255, 0.212); 
-box-shadow: 11px 11px 22px -3px rgba(255, 255, 255, 0.212);
+  -webkit-box-shadow: 11px 11px 22px -3px rgba(255, 255, 255, 0.212);
+  box-shadow: 11px 11px 22px -3px rgba(255, 255, 255, 0.212);
 }
 
 .gradientTextHeader {
-    background: linear-gradient(0.25turn, #cf4fb4, #6186b1, #39ce95);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-  }
+  background: linear-gradient(0.25turn, #cf4fb4, #6186b1, #39ce95);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+html {
+  overflow-y: overlay;
+  scrollbar-gutter: stable;
+}

src/styles/scrollbar.css

@@ -1,5 +1,5 @@
 .scrollbar {
-::-webkit-scrollbar {
+  ::-webkit-scrollbar {
     width: 4px;
     height: 4px;
   }
@@ -12,4 +12,4 @@
     border: 0px none #ffffff;
     border-radius: 50px;
   }
-}
+}