Is there an option to hide the sidebar and feedback feature on dynamic routes?

[shaikahmadnawaz]

Is there an option to hide the sidebar and feedback feature on dynamic routes?

For example, on the route /events/:id, I would like to hide the sidebar and the feedback option.

How can I achieve this?

Here is the _meta.json for /events:

{
  "index": "Events"
}

And the _meta.json for /:id:

{
  "index": "Event Details"
}

[87xie]

Not sure if this is exactly what you need, but I hope it helps!

In the pages/events/_meta.json configure the fallbacks setting:

{
  "*":{
    "theme":{
      "sidebar":false
    }
  }
}

In theme.config.tsx, feedback.content can be a component, and you can use information from the router to determine whether it should be displayed:

import { useRouter } from "next/router";
import type { DocsThemeConfig } from "nextra-theme-docs";

const config: DocsThemeConfig = {
  feedback: {
    content: function FeedbackContent() {
      const router = useRouter();
      if (router.pathname.startsWith("/events/")) {
        return null;
      }
      return 'Question? Give us feedback →';
    },
  },
};

[shaikahmadnawaz]

Not sure if this is exactly what you need, but I hope it helps!

In the pages/events/_meta.json configure the fallbacks setting:

{
  "*":{
    "theme":{
      "sidebar":false
    }
  }
}

In theme.config.tsx, feedback.content can be a component, and you can use information from the router to determine whether it should be displayed:

import { useRouter } from "next/router";
import type { DocsThemeConfig } from "nextra-theme-docs";

const config: DocsThemeConfig = {
  feedback: {
    content: function FeedbackContent() {
      const router = useRouter();
      if (router.pathname.startsWith("/events/")) {
        return null;
      }
      return 'Question? Give us feedback →';
    },
  },
};

I made the changes you mentioned. The sidebar component is still visible, while the feedback component is now invisible but still exists :(

[SchoolyB]

@shaikahmadnawaz I found another site that is using Nextra. Seems like they were able to remove it HERE

Edit: Disable feedback link

Or put this in you them.config.jsx file

feedback: {
    content:null
  },

[shaikahmadnawaz]

@shaikahmadnawaz I found another site that is using Nextra. Seems like they were able to remove it HERE

Edit: Disable feedback link

Or put this in you them.config.jsx file

feedback: {
    content:null
  },

When I added content: null the feedback link is disabled in entire application.

[87xie]

I made the changes you mentioned. The sidebar component is still visible, while the feedback component is now invisible but still exists :(

It seems that the theme option in _meta.json does not support dynamic routes. Here's another approach using frontmatter: https://codesandbox.io/p/devbox/laughing-leftpad-n6vdjk?file=%2Fpages%2Fevents%2F%5Bslug%5D.mdx%3A2%2C15

To avoid rendering the default feedback under /events/:id, disabling the feedback option and implementing alternative in toc.extraContent might be more suitable for you

const config: DocsThemeConfig = {
  feedback: {
    content: null,
  },
  toc: {
    extraContent: function ExtraContent() {
      // ...
    },
  },
};

[SchoolyB]

@87xie @shaikahmadnawaz This is my theme.config.jsx file. You both seem to have much more in your projects going on than I do. Adding the feedback and editLink objects and then setting their respective members to a null value removed that annoying sidebar for me. Hope it helps

export default {
  logo: <span>My Cool Logo</span>,
  project: {
    link: 'https://github.com/Link/To/Project'
  },
  feedback: {
    content:null
  },
  editLink:
  {
    component: null    
  },

  footer: {
    text: (
      <span>
          <a href="foobar" target="_blank">
           &copy; 2024 Foobar LLC. All rights reserved.
          </a>
      </span>
    )
  }
}

[87xie]

The issue description seems more like disabling the feedback on the /events/:id route rather than disabling it entirely.

[dimaMachina]

// _meta.js
export default {
  'my-page': {
    theme: {
      sidebar: false,
      toc: false
    }
  }
}

[yansusanto]

// _meta.js
export default {
  'my-page': {
    theme: {
      sidebar: false,
      toc: false
    }
  }
}

What is the proper way to make the <main> content section full-width when both sidebar and toc are false?

[dimaMachina]

theme: { layout: 'full' }