Fix headline select-none + padding prevent link hover/click, remove AppWrapper.hideNavigation

src/components/AppWrapper.tsx

@@ -36,73 +36,6 @@ const AppWrapper: FunctionComponent<WrapperProps> = ({
         className,
       )}
     >
-      {!hideNavigation ? (
-        <Disclosure as="nav">
-          {({ open }) => (
-            <>
-              <div className="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
-                <div className="relative flex h-16 items-center justify-between">
-                  <div className="absolute inset-y-0 left-0 flex items-center sm:hidden">
-                    {/* Mobile menu button*/}
-                    <Disclosure.Button className="inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-zinc-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white">
-                      <span className="sr-only">Open main menu</span>
-                      {open ? (
-                        <HiXMark className="block h-6 w-6" aria-hidden="true" />
-                      ) : (
-                        <HiBars3 className="block h-6 w-6" aria-hidden="true" />
-                      )}
-                    </Disclosure.Button>
-                  </div>
-                  <div className="flex flex-1 items-center justify-center sm:items-stretch sm:justify-start">
-                    <div className="hidden sm:ml-6 sm:block">
-                      <div className="flex space-x-4 font-roboto text-lg">
-                        {navigation.map((item) => (
-                          <Link
-                            key={item.name}
-                            href={item.href}
-                            className={classNames(
-                              item.id == current
-                                ? "bg-zinc-900 text-white"
-                                : "text-gray-300 hover:bg-zinc-800/60 hover:text-white",
-                              "rounded-md px-2.5 py-1",
-                            )}
-                            aria-current={
-                              item.id == current ? "page" : undefined
-                            }
-                          >
-                            {item.name}
-                          </Link>
-                        ))}
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-
-              <Disclosure.Panel className="sm:hidden">
-                <div className="space-y-1 px-2 pb-3 pt-2">
-                  {navigation.map((item) => (
-                    <Link key={item.name} href={item.href}>
-                      <Disclosure.Button
-                        as="a"
-                        className={classNames(
-                          item.id == current
-                            ? "bg-zinc-900 text-white"
-                            : "text-gray-300 hover:bg-zinc-700 hover:text-white",
-                          "block rounded-md px-3 py-2 text-base font-medium",
-                        )}
-                        aria-current={item.id == current ? "page" : undefined}
-                      >
-                        {item.name}
-                      </Disclosure.Button>
-                    </Link>
-                  ))}
-                </div>
-              </Disclosure.Panel>
-            </>
-          )}
-        </Disclosure>
-      ) : null}
       <DotsDynamic />
       {children}
     </main>

src/pages/index.tsx

@@ -60,7 +60,7 @@ const Home: NextPage<IndexProps> = ({
         <meta name="description" content="My personal website." />
         <link rel="icon" href="/favicon.ico" />
       </Head>
-      <AppWrapper hideNavigation={true} className="overflow-x-hidden">
+      <AppWrapper className="overflow-x-hidden">
         <div className="flex h-screen w-screen items-center justify-center overflow-hidden">
           <div className="flex w-full flex-col items-center justify-start">
             <nav className="animate-fade-in">
@@ -77,20 +77,12 @@ const Home: NextPage<IndexProps> = ({
               </ul>
             </nav>
             <div className="hidden w-screen h-px animate-glow md:block animate-fade-left bg-gradient-to-r from-zinc-300/0 via-zinc-300/50 to-zinc-300/0" />
-            <h1 className="font-hanken uppercase select-none py-3.5 px-0.5 z-10 text-transparent duration-1000 bg-white cursor-default text-edge-outline animate-title font-display text-5xl sm:text-6xl md:text-9xl lg:text-10xl whitespace-nowrap bg-clip-text drop-shadow-extreme">
+            <h1 className="font-hanken uppercase select-none my-3.5 z-10 text-transparent duration-1000 bg-white text-edge-outline animate-title font-display text-5xl sm:text-6xl md:text-9xl lg:text-10xl whitespace-nowrap bg-clip-text drop-shadow-extreme">
               Xevion
             </h1>
             <div className="hidden w-screen h-px animate-glow md:block animate-fade-right bg-gradient-to-r from-zinc-300/0 via-zinc-300/50 to-zinc-300/0" />
-      {/* <div className="sm:text-9x cursor-default select-none py-10 font-hanken text-6xl font-black uppercase tracking-widest min-[300px]:text-7xl min-[500px]:text-8xl lg:text-10xl">
-              Xevion
-            </div> */}
             <div className="max-w-screen-sm text-center text-sm  sm:text-base animate-fade-in text-zinc-500">
               <Balancer>{tagline}</Balancer>
-            </div>
-            {/* <div className="max-w-screen-sm px-4 text-center text-base text-zinc-500 sm:text-sm">
-              <Balancer>{tagline}</Balancer>
-            </div>
-          </div> */}
           </div>
         </div>
         <div
@@ -107,6 +99,7 @@ const Home: NextPage<IndexProps> = ({
             </div>
           </div>
         </div>
+</div>
       </AppWrapper>
     </>
   );