Merge pull request #463 from miurla/feat/unified-header-navigation

miurla · web-flow · commit 9a872fcb3f41 · 2025-03-03T09:44:52.000+09:00
feat: Unify navigation in header for all devices
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,6 +1,5 @@
 import Footer from '@/components/footer'
 import Header from '@/components/header'
-import { Sidebar } from '@/components/sidebar'
 import { ThemeProvider } from '@/components/theme-provider'
 import { Toaster } from '@/components/ui/sonner'
 import { cn } from '@/lib/utils'
@@ -45,8 +44,6 @@ export default function RootLayout({
 }: Readonly<{
   children: React.ReactNode
 }>) {
-  const enableSaveChatHistory =
-    process.env.ENABLE_SAVE_CHAT_HISTORY === 'true'
   return (
     <html lang="en" suppressHydrationWarning>
       <body className={cn('font-sans antialiased', fontSans.variable)}>
@@ -58,7 +55,6 @@ export default function RootLayout({
         >
           <Header />
           {children}
-          {enableSaveChatHistory && <Sidebar />}
           <Footer />
           <Toaster />
         </ThemeProvider>
diff --git a/components/header.tsx b/components/header.tsx
@@ -6,7 +6,7 @@ import { IconLogo } from './ui/icons'
 
 export const Header: React.FC = async () => {
   return (
-    <header className="fixed w-full p-2 flex justify-between items-center z-10 backdrop-blur md:backdrop-blur-none bg-background/80 md:bg-transparent">
+    <header className="fixed w-full p-2 flex justify-between items-center z-10 backdrop-blur lg:backdrop-blur-none bg-background/80 lg:bg-transparent">
       <div>
         <a href="/">
           <IconLogo className={cn('w-5 h-5')} />
@@ -15,7 +15,7 @@ export const Header: React.FC = async () => {
       </div>
       <div className="flex gap-0.5">
         <ModeToggle />
-        <HistoryContainer location="header" />
+        <HistoryContainer />
       </div>
     </header>
   )
diff --git a/components/history-container.tsx b/components/history-container.tsx
@@ -2,24 +2,15 @@ import React from 'react'
 import { History } from './history'
 import { HistoryList } from './history-list'
 
-type HistoryContainerProps = {
-  location: 'sidebar' | 'header'
-}
-
-const HistoryContainer: React.FC<HistoryContainerProps> = async ({
-  location
-}) => {
-  const enableSaveChatHistory =
-    process.env.ENABLE_SAVE_CHAT_HISTORY === 'true'
+const HistoryContainer: React.FC = async () => {
+  const enableSaveChatHistory = process.env.ENABLE_SAVE_CHAT_HISTORY === 'true'
   if (!enableSaveChatHistory) {
     return null
   }
 
   return (
-    <div
-      className={location === 'header' ? 'block lg:hidden' : 'hidden sm:block'}
-    >
-      <History location={location}>
+    <div>
+      <History>
         <HistoryList userId="anonymous" />
       </History>
     </div>
diff --git a/components/history.tsx b/components/history.tsx
@@ -1,27 +1,23 @@
 'use client'
 
-import { useTransition } from 'react'
-import { useRouter } from 'next/navigation'
+import { Button } from '@/components/ui/button'
 import {
   Sheet,
   SheetContent,
   SheetHeader,
   SheetTitle,
   SheetTrigger
 } from '@/components/ui/sheet'
-import { Button } from '@/components/ui/button'
-import { ChevronLeft, Menu } from 'lucide-react'
-import { cn } from '@/lib/utils'
-import { History as HistoryIcon } from 'lucide-react'
-import { Suspense } from 'react'
+import { History as HistoryIcon, Menu } from 'lucide-react'
+import { useRouter } from 'next/navigation'
+import { Suspense, useTransition } from 'react'
 import { HistorySkeleton } from './history-skeleton'
 
 type HistoryProps = {
-  location: 'sidebar' | 'header'
   children?: React.ReactNode
 }
 
-export function History({ location, children }: HistoryProps) {
+export function History({ children }: HistoryProps) {
   const router = useRouter()
   const [isPending, startTransition] = useTransition()
 
@@ -36,14 +32,8 @@ export function History({ location, children }: HistoryProps) {
   return (
     <Sheet onOpenChange={onOpenChange}>
       <SheetTrigger asChild>
-        <Button
-          variant="ghost"
-          size="icon"
-          className={cn({
-            'rounded-full text-foreground/30': location === 'sidebar'
-          })}
-        >
-          {location === 'header' ? <Menu /> : <ChevronLeft size={16} />}
+        <Button variant="ghost" size="icon">
+          <Menu />
         </Button>
       </SheetTrigger>
       <SheetContent className="w-64 rounded-tl-xl rounded-bl-xl">
diff --git a/components/sidebar.tsx b/components/sidebar.tsx
@@ -3,7 +3,7 @@ import HistoryContainer from './history-container'
 export async function Sidebar() {
   return (
     <div className="h-screen p-2 fixed top-0 right-0 flex-col justify-center pb-24 hidden lg:flex">
-      <HistoryContainer location="sidebar" />
+      <HistoryContainer />
     </div>
   )
 }

Original file line number	Diff line number	Diff line change
`@@ -3,7 +3,7 @@ import HistoryContainer from './history-container'`
`3`	`3`	`export async function Sidebar() {`
`4`	`4`	`return (`
`5`	`5`	`<div className="h-screen p-2 fixed top-0 right-0 flex-col justify-center pb-24 hidden lg:flex">`
`6`		`- <HistoryContainer location="sidebar" />`
	`6`	`+ <HistoryContainer />`
`7`	`7`	`</div>`
`8`	`8`	`)`
`9`	`9`	`}`