Skip to content

Commit 1459801

Browse files
soy0kasoy0ka
authored
feat: 네비게이션 바 UI 개선 (#679)
feat: 네비게이션 바 UI 개선
2 parents 6fad2e1 + e3e407a commit 1459801

File tree

6 files changed

+56
-59
lines changed

6 files changed

+56
-59
lines changed

‎components/Navbar.tsx‎

Lines changed: 22 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,10 @@
22
/* eslint-disable jsx-a11y/no-noninteractive-tabindex */
33
/* eslint-disable jsx-a11y/no-static-element-interactions */
44
import dynamic from 'next/dynamic'
5+
import Image from 'next/image'
56
import Link from 'next/link'
67
import { useRouter } from 'next/router'
8+
import Logo from 'public/logo-transparent.png'
79
import { useEffect, useState } from 'react'
810

911
import { Nullable, User, UserCache } from '@types'
@@ -49,9 +51,12 @@ const Navbar: React.FC<NavbarProps> = ({ token }) => {
4951
setUserCache(null)
5052
}
5153
}, [token])
54+
5255
return (
53-
<>
54-
<nav className='fixed top-0 z-40 flex w-full flex-wrap items-center justify-between bg-discord-blurple px-2 py-3 text-gray-100 dark:bg-discord-black'>
56+
<div className='fixed top-0 left-0 right-0 z-50'>
57+
<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 ${
58+
dev ? 'bg-discord-blurple dark:bg-discord-black' : 'bg-discord-blurple/30 dark:bg-discord-black/30'
59+
} lg:absolute`}>
5560
<div className='container mx-auto flex flex-wrap items-center justify-between px-4'>
5661
<div className='relative flex w-full justify-between lg:w-auto lg:justify-start'>
5762
<Link
@@ -60,13 +65,19 @@ const Navbar: React.FC<NavbarProps> = ({ token }) => {
6065
dev ? 'dark:text-koreanbots-blue ' : ''
6166
}logofont text-large whitespace-no-wrap mr-4 inline-block py-2 font-semibold uppercase leading-relaxed hover:text-gray-300 sm:text-2xl`}
6267
>
63-
{dev ? (
64-
<>
65-
<i className='fas fa-tools mr-1' /> DEVELOPERS
66-
</>
67-
) : (
68-
'KOREANLIST'
69-
)}
68+
{dev ? (
69+
<>
70+
<i className='fas fa-tools mr-1' /> DEVELOPERS
71+
</>
72+
) : (
73+
<Image
74+
src={Logo}
75+
alt='Koreanbots'
76+
width={100}
77+
height={100}
78+
className='h-10 w-10'
79+
/>
80+
)}
7081
</Link>
7182
<button
7283
className='block cursor-pointer rounded border border-solid border-transparent bg-transparent px-3 py-1 text-xl leading-none outline-none focus:outline-none dark:text-gray-200 lg:hidden'
@@ -160,7 +171,7 @@ const Navbar: React.FC<NavbarProps> = ({ token }) => {
160171
</li>
161172
</ul>
162173
</div>
163-
<div className='hidden grow items-center bg-white lg:flex lg:bg-transparent lg:shadow-none'>
174+
<div className='hidden lg:flex lg:items-center lg:bg-transparent lg:shadow-none'>
164175
<ul className='flex list-none flex-col lg:ml-auto lg:flex-row'>
165176
<li
166177
className='flex items-center outline-none'
@@ -368,7 +379,7 @@ const Navbar: React.FC<NavbarProps> = ({ token }) => {
368379
)}
369380
</div>
370381
</div>
371-
</>
382+
</div>
372383
)
373384
}
374385

‎components/Search.tsx‎

Lines changed: 22 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,22 @@
1-
import { useEffect, useRef, useState } from 'react'
2-
import { useRouter } from 'next/router'
3-
import Link from 'next/link'
4-
import dynamic from 'next/dynamic'
5-
import { makeBotURL, makeServerURL, redirectTo } from '@utils/Tools'
1+
import { Bot, ResponseProps, Server } from '@types'
62
import Fetch from '@utils/Fetch'
7-
import { Bot, Server, ResponseProps } from '@types'
3+
import { makeBotURL, makeServerURL, redirectTo } from '@utils/Tools'
4+
import dynamic from 'next/dynamic'
5+
import Link from 'next/link'
6+
import { useRouter } from 'next/router'
7+
import { useEffect, useRef, useState } from 'react'
88

99
import Day from '@utils/Day'
1010
import useOutsideClick from '@utils/useOutsideClick'
1111

1212
const DiscordAvatar = dynamic(() => import('@components/DiscordAvatar'))
1313
const ServerIcon = dynamic(() => import('@components/ServerIcon'))
1414

15-
const Search: React.FC = () => {
15+
interface SearchProps {
16+
compact?: boolean
17+
}
18+
19+
const Search: React.FC<SearchProps> = ({ compact = false }) => {
1620
const router = useRouter()
1721
const ref = useRef()
1822
const [query, setQuery] = useState('')
@@ -101,12 +105,13 @@ const Search: React.FC = () => {
101105
}
102106

103107
return (
104-
<div onFocus={() => setHidden(false)} ref={ref}>
105-
<div className='relative z-10 mt-5 flex w-full rounded-lg bg-white text-black dark:bg-very-black dark:text-gray-100'>
108+
<div className={`relative w-full z-10 ${compact ? '' : 'mt-5'}`}>
109+
<div onFocus={() => setHidden(false)} ref={ref}>
110+
<div className={`relative z-10 flex w-full items-center bg-white text-black dark:bg-very-black dark:text-gray-100 ${compact ? 'h-10 px-3 rounded-md' : 'rounded-lg'}`}>
106111
<input
107112
type='search'
108113
maxLength={50}
109-
className='h-16 grow border-0 border-none bg-transparent px-7 py-3 pr-20 text-xl shadow outline-none'
114+
className={`grow border-0 border-none bg-transparent pr-20 shadow outline-none ${compact ? 'h-10 text-sm' : 'h-16 px-7 py-3 text-xl'}`}
110115
placeholder='검색...'
111116
value={query}
112117
onChange={(e) => {
@@ -119,14 +124,14 @@ const Search: React.FC = () => {
119124
}}
120125
/>
121126
<button
122-
className='cusor-pointer absolute right-0 top-0 mr-5 mt-5 outline-none'
127+
className='absolute right-4 top-1/2 -translate-y-1/2 outline-none'
123128
onClick={onSubmit}
124129
>
125-
<i className='fas fa-search text-2xl text-gray-600 hover:text-gray-700' />
130+
<i className={`fas fa-search text-gray-600 hover:text-gray-700 ${compact ? 'text-sm' : 'text-2xl'}`} />
126131
</button>
127132
</div>
128133
<div className={`relative ${hidden ? 'hidden' : 'block'} z-50`}>
129-
<div className='pin-t pin-l absolute my-2 h-60 w-full overflow-y-scroll rounded bg-white text-black shadow-md dark:bg-very-black dark:text-gray-100 md:h-80'>
134+
<div className='absolute top-full mt-2 max-h-60 w-full overflow-y-auto rounded bg-white text-black shadow-md dark:bg-very-black dark:text-gray-100 md:h-80'>
130135
<ul>
131136
{data && data.code === 200 ? (
132137
<div className='grid lg:grid-cols-2'>
@@ -172,7 +177,7 @@ const Search: React.FC = () => {
172177
<li className='px-3 py-3.5'>검색중입니다...</li>
173178
</ul>
174179
) : (
175-
<ul>
180+
<ul className='px-3 py-3.5'>
176181
{query && data ? (
177182
data.message?.includes('문법') ? (
178183
<li className='px-3 py-3.5'>
@@ -194,10 +199,10 @@ const Search: React.FC = () => {
194199
)
195200
) : query.length === 0 ? (
196201
!recentSearch || !Array.isArray(recentSearch) || recentSearch.length === 0 ? (
197-
<li className='px-3 py-3.5'>최근 검색 기록이 없습니다.</li>
202+
<li >최근 검색 기록이 없습니다.</li>
198203
) : (
199204
<>
200-
<li className='h-15 cursor-pointer px-3 py-2 font-semibold'>
205+
<li className='h-15 cursor-pointer font-semibold'>
201206
최근 검색어
202207
<button
203208
className='absolute right-0 pr-10 text-sm text-red-500 hover:opacity-90'
@@ -236,6 +241,7 @@ const Search: React.FC = () => {
236241
</div>
237242
</div>
238243
</div>
244+
</div>
239245
)
240246
}
241247

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,6 @@
3232
"difflib": "0.2.4",
3333
"discord.js": "^14.12.1",
3434
"emoji-mart": "3.0.1",
35-
"erlpack": "0.1.4",
3635
"express-rate-limit": "^5.3.0",
3736
"firebase": "^11.2.0",
3837
"firebase-admin": "^13.0.2",
@@ -101,5 +100,6 @@
101100
"resolutions": {
102101
"@types/react": "^17.0.15"
103102
},
104-
"license": "AGPL-3.0"
103+
"license": "AGPL-3.0",
104+
"packageManager": "[email protected]+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
105105
}

‎pages/_app.tsx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,28 @@
1-
import Head from 'next/head'
1+
import { DefaultSeo } from 'next-seo'
22
import App, { AppContext, AppProps } from 'next/app'
33
import dynamic from 'next/dynamic'
4+
import Head from 'next/head'
45
import { Router, useRouter } from 'next/router'
6+
import NProgress from 'nprogress'
57
import { useEffect, useState } from 'react'
6-
import { DefaultSeo } from 'next-seo'
8+
import ReactGA from 'react-ga'
79
import { GlobalHotKeys } from 'react-hotkeys'
8-
import NProgress from 'nprogress'
910
import Package from '../package.json'
10-
import ReactGA from 'react-ga'
1111

12+
import { Theme } from '@types'
13+
import { DESCRIPTION, shortcutKeyMap, THEME_COLOR, TITLE } from '@utils/Constants'
1214
import Logger from '@utils/Logger'
1315
import { handlePWA, parseCookie, parseDockerhubTag, systemTheme } from '@utils/Tools'
14-
import { DESCRIPTION, shortcutKeyMap, THEME_COLOR, TITLE } from '@utils/Constants'
15-
import { Theme } from '@types'
1616

1717
const Footer = dynamic(() => import('@components/Footer'))
1818
const Navbar = dynamic(() => import('@components/Navbar'))
1919
const Modal = dynamic(() => import('@components/Modal'))
2020

21+
import PlatformDisplay from '@components/PlatformDisplay'
22+
import '@fortawesome/fontawesome-free/css/all.css'
23+
import 'rc-tooltip/assets/bootstrap_white.css'
2124
import '../app.css'
2225
import '../github-markdown.css'
23-
import 'rc-tooltip/assets/bootstrap_white.css'
24-
import '@fortawesome/fontawesome-free/css/all.css'
25-
import PlatformDisplay from '@components/PlatformDisplay'
2626

2727
// Progress Bar
2828
NProgress.configure({ showSpinner: false })

‎public/logo-transparent.png‎

80 KB
Loading

‎yarn.lock‎

Lines changed: 1 addition & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -4613,13 +4613,6 @@ binary-extensions@^2.0.0:
46134613
resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.2.0.tgz#75f502eeaf9ffde42fc98829645be4ea76bd9e2d"
46144614
integrity sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==
46154615

4616-
bindings@^1.5.0:
4617-
version "1.5.0"
4618-
resolved "https://registry.yarnpkg.com/bindings/-/bindings-1.5.0.tgz#10353c9e945334bc0511a6d90b38fbc7c9c504df"
4619-
integrity sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==
4620-
dependencies:
4621-
file-uri-to-path "1.0.0"
4622-
46234616
body-scroll-lock@^3.1.5:
46244617
version "3.1.5"
46254618
resolved "https://registry.yarnpkg.com/body-scroll-lock/-/body-scroll-lock-3.1.5.tgz#c1392d9217ed2c3e237fee1e910f6cdd80b7aaec"
@@ -5547,14 +5540,6 @@ env-paths@^2.2.0:
55475540
resolved "https://registry.yarnpkg.com/env-paths/-/env-paths-2.2.1.tgz#420399d416ce1fbe9bc0a07c62fa68d67fd0f8f2"
55485541
integrity sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==
55495542

5550-
[email protected]:
5551-
version "0.1.4"
5552-
resolved "https://registry.yarnpkg.com/erlpack/-/erlpack-0.1.4.tgz#018758a53206b8e9ba1f6c58a6766e3ba261a113"
5553-
integrity sha512-CJYbkEvsB5FqCCu2tLxF1eYKi28PvemC12oqzJ9oO6mDFrFO9G9G7nNJUHhiAyyL9zfXTOJx/tOcrQk+ncD65w==
5554-
dependencies:
5555-
bindings "^1.5.0"
5556-
nan "^2.15.0"
5557-
55585543
err-code@^2.0.2:
55595544
version "2.0.3"
55605545
resolved "https://registry.yarnpkg.com/err-code/-/err-code-2.0.3.tgz#23c2f3b756ffdfc608d30e27c9a941024807e7f9"
@@ -6062,11 +6047,6 @@ file-entry-cache@^6.0.1:
60626047
dependencies:
60636048
flat-cache "^3.0.4"
60646049

6065-
[email protected]:
6066-
version "1.0.0"
6067-
resolved "https://registry.yarnpkg.com/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz#553a7b8446ff6f684359c445f1e37a05dacc33dd"
6068-
integrity sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==
6069-
60706050
filelist@^1.0.4:
60716051
version "1.0.4"
60726052
resolved "https://registry.yarnpkg.com/filelist/-/filelist-1.0.4.tgz#f78978a1e944775ff9e62e744424f215e58352b5"
@@ -8321,7 +8301,7 @@ mz@^2.7.0:
83218301
object-assign "^4.0.1"
83228302
thenify-all "^1.0.0"
83238303

8324-
nan@^2.15.0, nan@^2.17.0:
8304+
nan@^2.17.0:
83258305
version "2.17.0"
83268306
resolved "https://registry.yarnpkg.com/nan/-/nan-2.17.0.tgz#c0150a2368a182f033e9aa5195ec76ea41a199cb"
83278307
integrity sha512-2ZTgtl0nJsO0KQCjEpxcIr5D+Yv90plTitZt9JBfQvVJDS5seMl3FOvsh3+9CoYWXf/1l5OaZzzF6nDm4cagaQ==

0 commit comments

Comments
 (0)