Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – NextJs open and close side drawer with app router

I have created a NextJs app router to achieve the routes as follows:

  • /chat/conversation_id -> /chat/new or /chat = Open in full main layout
  • /chat/conversation_id/history -> /chat/new/history or /chat/id/history = Open in the – side drawer along with chat
  • /chat/conversation_id/files -> /chat/new/files or /chat/id/files = Open in the side drawer along with chat
  • /chat/conversation_id/<etc> = Open such routes in the side drawer along with chat
  • /settings = Open in full main layout

In the app router added the chat section as a slot and history and files as routable through the children in layout. With this when navigated to /chat/conversation_id/history the side drawer is opening. On soft navigating back to /chat/conversation_id the side drawer still shows the content of history. but on the hard navigation history drawer closes.

The new chat layout
enter image description here
enter image description here
enter image description here

The layout file code: chat/[conversationId]/layout.tsx

export default function ChatLayout({
  children,
  chatbot
}: Readonly<{
  children: React.ReactNode
  chatbot: React.ReactNode
}>) {
  // console.log("children", children)
  return (
    <div className="flex h-full flex-row">
      {children}
      <div className="flex-1">{chatbot}</div>
    </div>
  )
}

Even have tried to hide children as chat/[conversationId]/default.tsx return null

Questions:

  1. Can something like this be achievable in an app router, If achievable please share samples or do I have to do a side drawer in the chat page and toggle the side drawer with query params?
  2. Can new chat be routed to /chat instead of /chat/new. This I was doing because I can`t have empty before the history path /chat/<empty>/history?
  3. At the start of the chat I am trying to replace the path with /chat/id but if did so the page redirects or renders. Can we do a soft change of the URL without redirecting or re-rendering?
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I was able to get this working.

    Answers:

    1. I have updated the chat/[conversationId]/layout.tsx to check the pathname if history or files are not in the path name hiding the children. Code:
    'use client'

import { usePathname } from 'next/navigation'

export default function ChatLayout({
  children,
  chatbot
}: Readonly<{
  children: React.ReactNode
  chatbot: React.ReactNode
}>) {
  const pathname = usePathname()

  const showDrawer = pathname.includes('history') || pathname.includes('files')
  return (
    <div className="flex h-full flex-row">
      {showDrawer && <div>{children}</div>}
      <div className="flex-1">{chatbot}</div>
    </div>
  )
}
    1. This can be done by having the same routes under /chat as well as /chat/[conversationId]. But I am skipping this, I do conditional rendering with /chat/new and /chat/id
    2. I am using browser native API window.history.pushState to do shallow routing. NextJS doc reference

  2. 0

    you can use (history) in the directory because then the app will not understand your router
    =>

    --- chat
--------[convesationId]
------------ ...
------------ (history)
----------------page.tsx

    ….
    enter link description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search