miteruzo/btrc-hub
1
0
フォーク 0
コード イシュー 58 プルリクエスト リリース Wiki アクティビティ

#424

ソースを参照
このコミットが含まれているのは:
みてるぞ
2026-10-12 15:16:58 +09:00
親 4813a3a09e
コミット 1a4cbe36fb
13個のファイルの変更、451行の追加、225行の削除
Patchファイルをダウンロード Diffファイルをダウンロード すべてのファイルを展開 すべてのファイルを折り畳む
frontend/src/components/TopNav.tsx
+19 -18
ファイルの表示
@@ -219,18 +219,19 @@ const TopNav: FC<Props> = ({ user }) => {
return (
<>
<nav className="top-nav-root px-3 flex justify-between items-center w-full">
<div className="flex items-center gap-2 h-12">
<nav className="top-nav-root px-3 flex flex-wrap justify-between items-center w-full">
<div className="flex shrink-0 items-center gap-2 h-12">
<PrefetchLink
to="/posts"
className="top-nav-brand-link mx-4 text-xl font-bold"
className="top-nav-brand-link shrink-0 whitespace-nowrap mx-2 text-base
xl:mx-4 xl:text-xl font-bold"
onClick={() => {
scroll (0, 0)
}}>
ぼざクリ タグ広場
</PrefetchLink>
<div ref={navRef} className="relative hidden md:flex h-12 items-center">
<div ref={navRef} className="relative hidden xl:flex shrink-0 h-12 items-center">
<div aria-hidden
className={cn ('absolute inset-y-0 h-12',
'top-nav-highlight',
@@ -242,6 +243,7 @@ const TopNav: FC<Props> = ({ user }) => {
{visibleMenu.map ((item, i) => (
<motion.div
key={item.to}
className="shrink-0 whitespace-nowrap"
{...(animationsOff
? { }
: { layoutId: `menu-${ item.name }` })}
@@ -271,6 +273,7 @@ const TopNav: FC<Props> = ({ user }) => {
measure (-1)
}}
className={cn ('top-nav-menu-link relative z-10 flex h-full items-center px-5',
'shrink-0 whitespace-nowrap',
(openItemIdx < 0 || moreVsbl) && 'font-bold')}>
その他 &raquo;
</PrefetchLink>
@@ -281,7 +284,8 @@ const TopNav: FC<Props> = ({ user }) => {
<button
type="button"
className="top-nav-mobile-toggle md:hidden ml-auto border-0 bg-transparent pr-4"
className="top-nav-mobile-toggle xl:hidden shrink-0 whitespace-nowrap
ml-auto border-0 bg-transparent pr-4"
onClick={() => {
setMenuOpen (!(menuOpen))
}}>
@@ -294,7 +298,7 @@ const TopNav: FC<Props> = ({ user }) => {
key="submenu-shell"
{...(animationsOff ? { }
: { layout: true })}
className="relative z-20 hidden md:block overflow-hidden top-nav-submenu"
className="relative z-20 hidden xl:block shrink-0 overflow-hidden top-nav-submenu"
animate={{ height: submenuHeight }}
onMouseLeave={() => {
if (moreVsbl)
@@ -308,7 +312,8 @@ const TopNav: FC<Props> = ({ user }) => {
? (
moreMenu.map ((item, i) => (
<div key={i} className="relative h-[40px]">
<div className="absolute inset-0 flex items-center px-3">
<div className="absolute inset-0 flex items-center px-3
overflow-x-auto whitespace-nowrap">
<motion.div
transition={topNavTransition}
{...(animationsOff
@@ -318,7 +323,7 @@ const TopNav: FC<Props> = ({ user }) => {
: { initial: { x: 40, y: -40, opacity: 0 },
animate: { x: 0, y: 0, opacity: 1 },
exit: { x: 40, y: -40, opacity: 0 } }))}
className="z-10 h-full flex items-center px-3 font-bold w-28">
className="z-10 h-full flex shrink-0 items-center px-3 font-bold w-28">
<h2>{item.name}</h2>
</motion.div>
{item.subMenu
@@ -366,7 +371,8 @@ const TopNav: FC<Props> = ({ user }) => {
<div className="relative h-[40px]">
{animationsOff
? (
<div className="absolute inset-0 flex items-center px-3">
<div className="absolute inset-0 flex items-center px-3
overflow-x-auto whitespace-nowrap">
{(visibleMenu[activeIdx]?.subMenu ?? [])
.filter (item => item.visible ?? true)
.map ((item, i) => (
@@ -395,7 +401,8 @@ const TopNav: FC<Props> = ({ user }) => {
variants={{ enter: (d: -1 | 1) => ({ y: d * 24, opacity: 0 }),
centre: { y: 0, opacity: 1 },
exit: (d: -1 | 1) => ({ y: (-d) * 24, opacity: 0 }) }}
className="absolute inset-0 flex items-center px-3"
className="absolute inset-0 flex items-center px-3
overflow-x-auto whitespace-nowrap"
initial="enter"
animate="centre"
exit="exit"
@@ -435,7 +442,7 @@ const TopNav: FC<Props> = ({ user }) => {
? (
menuOpen && (
<div
className={cn ('top-nav-root top-nav-mobile-menu flex flex-col md:hidden',
className={cn ('top-nav-root top-nav-mobile-menu flex flex-col xl:hidden',
'items-start')}>
<Separator/>
{visibleMenu.map ((item, i) => (
@@ -479,9 +486,6 @@ const TopNav: FC<Props> = ({ user }) => {
</Fragment>))}
<PrefetchLink
to="/more"
ref={(el: (HTMLAnchorElement | null)) => {
itemsRef.current[visibleMenu.length] = el
}}
className={cn ('top-nav-mobile-row w-full min-h-[40px] flex items-center pl-8',
((openItemIdx < 0)
&& 'top-nav-mobile-active font-bold'))}>
@@ -495,7 +499,7 @@ const TopNav: FC<Props> = ({ user }) => {
{menuOpen && (
<motion.div
key="spmenu"
className={cn ('top-nav-root top-nav-mobile-menu flex flex-col md:hidden',
className={cn ('top-nav-root top-nav-mobile-menu flex flex-col xl:hidden',
'items-start')}
variants={{ closed: { clipPath: 'inset(0 0 100% 0)',
height: 0 },
@@ -561,9 +565,6 @@ const TopNav: FC<Props> = ({ user }) => {
</Fragment>))}
<PrefetchLink
to="/more"
ref={(el: (HTMLAnchorElement | null)) => {
itemsRef.current[visibleMenu.length] = el
}}
className={cn ('top-nav-mobile-row w-full min-h-[40px] flex items-center pl-8',
((openItemIdx < 0)
&& 'top-nav-mobile-active font-bold'))}>