components/Navbar.tsx

@@ -51,12 +51,20 @@ const Navbar: React.FC<NavbarProps> = ({ token }) => {
 			setUserCache(null)
 		}
 	}, [token])
+	const [scrolled, setScrolled] = useState(false)
+	
+	useEffect(() => {
+    const handleScroll = () => setScrolled(window.scrollY > 160)
+    window.addEventListener('scroll', handleScroll)
+    return () => window.removeEventListener('scroll', handleScroll)
+	}, [])
 	
 	return (
 		<div className='fixed top-0 left-0 right-0 z-50'>
 			<nav className={`fixed top-0 z-40 flex w-full flex-wrap items-center justify-between px-2 py-2 text-gray-100 transition-colors duration-300 backdrop-blur-sm ${
-    dev ? 'bg-discord-blurple dark:bg-discord-black' : 'bg-discord-blurple/30 dark:bg-discord-black/30'
+    scrolled || dev ? 'bg-discord-blurple dark:bg-discord-black' : 'bg-discord-blurple/30 dark:bg-discord-black/30'
   } lg:absolute`}>
+    
 				<div className='container mx-auto flex flex-wrap items-center justify-between px-4'>
 					<div className='relative flex w-full justify-between lg:w-auto lg:justify-start'>
 						<Link

pages/bots/[id]/report.tsx

@@ -1,7 +1,7 @@
-import { Field, Form, Formik } from 'formik'
 import { NextPage } from 'next'
-import dynamic from 'next/dynamic'
 import Link from 'next/link'
+import dynamic from 'next/dynamic'
+import { Field, Form, Formik } from 'formik'
 
 import { Bot, CsrfContext, ResponseProps, User } from '@types'
 import { get } from '@utils/Query'
@@ -9,15 +9,15 @@ import { makeBotURL, parseCookie } from '@utils/Tools'
 
 import { ParsedUrlQuery } from 'querystring'
 
-import { DMCA, TextField } from '@components/ReportTemplate'
+import NotFound from 'pages/404'
-import { reportCats } from '@utils/Constants'
 import { getToken } from '@utils/Csrf'
+import { DMCA, TextField } from '@components/ReportTemplate'
+import { useState } from 'react'
 import Fetch from '@utils/Fetch'
 import { ReportSchema } from '@utils/Yup'
 import { getJosaPicker } from 'josa'
+import { reportCats } from '@utils/Constants'
 import { NextSeo } from 'next-seo'
-import NotFound from 'pages/404'
-import { useState } from 'react'
 
 const Container = dynamic(() => import('@components/Container'))
 const Message = dynamic(() => import('@components/Message'))

pages/bots/[id]/vote.tsx

@@ -1,24 +1,24 @@
 import { NextPage } from 'next'
-import dynamic from 'next/dynamic'
 import Link from 'next/link'
+import dynamic from 'next/dynamic'
 import { useRouter } from 'next/router'
 
 import { Bot, CsrfContext, ResponseProps, Theme, User } from '@types'
 import { get } from '@utils/Query'
-import { checkBotFlag, makeBotURL, parseCookie } from '@utils/Tools'
+import { makeBotURL, parseCookie, checkBotFlag } from '@utils/Tools'
 
 import { ParsedUrlQuery } from 'querystring'
 
-import Captcha from '@components/Captcha'
-import SetNotification, { getFCMToken } from '@components/FCM'
-import { KoreanbotsEndPoints } from '@utils/Constants'
-import { getToken } from '@utils/Csrf'
-import Day from '@utils/Day'
-import Fetch from '@utils/Fetch'
-import { getJosaPicker } from 'josa'
-import { NextSeo } from 'next-seo'
 import NotFound from 'pages/404'
+import { getToken } from '@utils/Csrf'
+import Captcha from '@components/Captcha'
 import { useEffect, useRef, useState } from 'react'
+import Fetch from '@utils/Fetch'
+import Day from '@utils/Day'
+import { getJosaPicker } from 'josa'
+import { KoreanbotsEndPoints } from '@utils/Constants'
+import { NextSeo } from 'next-seo'
+import SetNotification, { getFCMToken } from '@components/FCM'
 
 const Container = dynamic(() => import('@components/Container'))
 const DiscordAvatar = dynamic(() => import('@components/DiscordAvatar'))

pages/servers/[id]/report.tsx

@@ -1,23 +1,23 @@
-import { Field, Form, Formik } from 'formik'
 import { NextPage } from 'next'
-import dynamic from 'next/dynamic'
 import Link from 'next/link'
+import dynamic from 'next/dynamic'
+import { Field, Form, Formik } from 'formik'
 
-import { CsrfContext, ResponseProps, Server, User } from '@types'
+import { Server, CsrfContext, ResponseProps, User } from '@types'
 import { get } from '@utils/Query'
 import { makeServerURL, parseCookie } from '@utils/Tools'
 
 import { ParsedUrlQuery } from 'querystring'
 
-import { DMCA, TextField } from '@components/ReportTemplate'
+import NotFound from 'pages/404'
-import { serverReportCats } from '@utils/Constants'
 import { getToken } from '@utils/Csrf'
+import { DMCA, TextField } from '@components/ReportTemplate'
+import { useState } from 'react'
 import Fetch from '@utils/Fetch'
 import { ReportSchema } from '@utils/Yup'
 import { getJosaPicker } from 'josa'
+import { serverReportCats } from '@utils/Constants'
 import { NextSeo } from 'next-seo'
-import NotFound from 'pages/404'
-import { useState } from 'react'
 
 const Container = dynamic(() => import('@components/Container'))
 const Message = dynamic(() => import('@components/Message'))

pages/servers/[id]/vote.tsx

@@ -1,24 +1,24 @@
 import { NextPage } from 'next'
-import dynamic from 'next/dynamic'
 import Link from 'next/link'
+import dynamic from 'next/dynamic'
 import { useRouter } from 'next/router'
 
 import { CsrfContext, ResponseProps, Server, Theme, User } from '@types'
 import { get } from '@utils/Query'
-import { checkServerFlag, makeServerURL, parseCookie } from '@utils/Tools'
+import { parseCookie, checkServerFlag, makeServerURL } from '@utils/Tools'
 
 import { ParsedUrlQuery } from 'querystring'
 
-import Captcha from '@components/Captcha'
-import SetNotification, { getFCMToken } from '@components/FCM'
-import { KoreanbotsEndPoints } from '@utils/Constants'
-import { getToken } from '@utils/Csrf'
-import Day from '@utils/Day'
-import Fetch from '@utils/Fetch'
-import { getJosaPicker } from 'josa'
-import { NextSeo } from 'next-seo'
 import NotFound from 'pages/404'
+import { getToken } from '@utils/Csrf'
+import Captcha from '@components/Captcha'
 import { useEffect, useRef, useState } from 'react'
+import Fetch from '@utils/Fetch'
+import Day from '@utils/Day'
+import { getJosaPicker } from 'josa'
+import { KoreanbotsEndPoints } from '@utils/Constants'
+import { NextSeo } from 'next-seo'
+import SetNotification, { getFCMToken } from '@components/FCM'
 
 const Container = dynamic(() => import('@components/Container'))
 const ServerIcon = dynamic(() => import('@components/ServerIcon'))

pages/users/[id]/report.tsx

@@ -1,7 +1,7 @@
-import { Field, Form, Formik } from 'formik'
 import { NextPage } from 'next'
-import dynamic from 'next/dynamic'
 import Link from 'next/link'
+import dynamic from 'next/dynamic'
+import { Field, Form, Formik } from 'formik'
 
 import { CsrfContext, ResponseProps, User } from '@types'
 import { get } from '@utils/Query'
@@ -9,15 +9,15 @@ import { makeUserURL, parseCookie } from '@utils/Tools'
 
 import { ParsedUrlQuery } from 'querystring'
 
-import { DMCA, TextField } from '@components/ReportTemplate'
+import NotFound from 'pages/404'
-import { reportCats } from '@utils/Constants'
 import { getToken } from '@utils/Csrf'
+import { DMCA, TextField } from '@components/ReportTemplate'
+import { useState } from 'react'
 import Fetch from '@utils/Fetch'
 import { ReportSchema } from '@utils/Yup'
 import { getJosaPicker } from 'josa'
+import { reportCats } from '@utils/Constants'
 import { NextSeo } from 'next-seo'
-import NotFound from 'pages/404'
-import { useState } from 'react'
 
 const Container = dynamic(() => import('@components/Container'))
 const Message = dynamic(() => import('@components/Message'))