CODEWITHSUNDEEP
reactjsnext.js
tilen arm
tilen arm

Reputation: 31

NextJS persistent nested layout for tabs

I am trying to implement a persistent layout for a profile page. What I have currently is a persistent layout for the header and the rest of the content, which was no issue to implement. But with the profile view I am having some issues.

Layout components:

enter image description here

The difference is that I would like to load the orange content (persistent profile page elements) once, only the tabs (yellow) should be loaded dynamically.

In other words, header has to be always persistent, but the orange elements have to be persistent between profile pages (/profile/index, /profile/content, /profile/about-me, ...). Obviously there are other pages, besides /profile/*, which only consists of header and the rest of the page's contents.

Website structure:

I have tried doing this with wrapper layout, but the issue is that I have to obtain data for the profile page from else where. I also need this data to be sync and NOT loaded client-side.

Upvotes: 4

Views: 2696

Answers (3)

Ankush Chauhan
Ankush Chauhan

Reputation: 1603

Let's say you have Layout.tsx as your main layout with your persistent header inside it.

Now you need to create a ProfileLayout.tsx component containing your persistent User profile info and persistent sidebar(for the matter any component you want to be persistent throughout the Profile pages) which will be wrapped by the Layout component like this:

//ProfileLayout.tsx

const ProfileLayout: FC = ({ children }) => {
  return (
    <Layout>
        .
        .
        // Persistent profile info
        .
        .
    </Layout>
  )
}

export default ProfileLayout

Now you just need to use this ProfileLayout as the layout of each of your Profile page like this:

// content.tsx
  
const Content = () => {
  return 'Content'
}

Content.Layout = ProfileLayout

export default Content

Upvotes: 1

user16435030
user16435030

Reputation:

In nextjs you can create an _app.tsx file which is the parent page component for all pages. Inside that you can apply logic on how to style components.

// /pages/_app.tsx

import router from 'next/router'

import Header from './header'
import Sidebar from './sidebar'

const UI = ({Component, pageProps}: AppProps) => {
  const router = useRouter()

  return <div id='ui'>
    // you can also apply logic here using router.pathname === '/path'
    // if you want to control which pages is showing header/sidebar
    <Header/>
    <div id='page'>
      <Sidebar/>
      <div id='content'>
        <Component {...pageProps}/> // nextjs pages
      </div>
    </div>
    <style jsx>{`
      #ui {
        position: relative;
        flex: 1 1 auto;
        display: flex;
        flex-flow: column nowrap;
      }

      #header {
        min-height: 20vh;
      }

      #page {
        flex: 1 1 auto; // so that page will fill the screen
        display: flex;
        flex-flow: row wrap;
      }

      #sidebar {
        min-width: 280px;
      }

      #content {
        flex: 1 1 auto; // so that content will fill the screen
      }
    `}</style>
  </div>
}

Upvotes: 0

Kimya Khakzad
Kimya Khakzad

Reputation: 223

There are some way in next.js where you can have shared layout across your app. I recommend following this article

you can use option 1 in the article for always rendering your header component

One way to add a persistent layout component to your site is to create a custom App component, and always render your site layout above the current page component in the component tree.

Upvotes: 0

Related Questions