How can I remove the navbar from React-Admin?

user_13495668 0
Viewed 463

I'm having some issues trying to delete/remove the default navbar from react-admin.

enter image description here

As you can see, my original Navbar is at the bottom of the react-admin navbar which if I inspect and remove it, it will look something like this:

enter image description here The Post, Account, and the profile icon get pushed down. This was only when I removed the whole class of the blue navbar. What you see here is what I actually want to achieve.

This is my code so far: dashboard.js

import React, { useState, useEffect } from 'react';
import { requireAuth } from 'util/auth.js';
import users from '../users';
import posts from '../posts';

// Initialize the dataProvider before rendering react-admin resources.
import { Admin, Resource } from 'react-admin';

function DashboardPage(props) {

  return (
    <Admin dataProvider={dataProvider}>
      <Resource name="Post" {...posts} />
      <Resource name="User" {...users} />
    </Admin>
  );
}

export default requireAuth(DashboardPage);

And this is my _app.js

import React from "react";
import Navbar from "components/Navbar";
import Footer from "components/Footer";
import { AuthProvider } from "util/auth.js";
import { ThemeProvider } from "util/theme.js";
import { QueryClientProvider } from "util/db.js";

function MyApp({ Component, pageProps }) {
  return (
    <QueryClientProvider>
      <ThemeProvider>
        <AuthProvider>
          <>
            <Navbar
              color="default"
              logo="https://images.squarespace-cdn.com/content/v1/someRandomLogo"
            />

            <Component {...pageProps} />

            <Footer
              bgColor="light"
              size="normal"
              bgImage=""
              bgImageOpacity={1}
              description="Footer admin"
              sticky={true}
            />
          </>
        </AuthProvider>
      </ThemeProvider>
    </QueryClientProvider>
  );
}

export default MyApp;

I've been trying to add display:none; but this does not work, because logging in and out makes the blue navbar appears, which I don't want. I'll appreciate your help!

react-redux react-admin material-ui next.js reactjs
1 Answers

The Admin component has the layout property so it is possible to override existing layout including existing navigation.

 <Admin layout={CustomLayout} dataProvider={dataProvider}>
  <Resource name="Post" {...posts} />
  <Resource name="User" {...users} />
</Admin>

import { Layout } from 'react-admin';

const CustomLayout = (props) => <Layout
{...props}
appBar={null}

/>;

For example, if you don't want to display existing navigation you can pass null as value of the prop called appBar. On the other side if you want to create your custom navigation then you just need to assign your custom navigation(component) as the value of appBar prop.

I hope it suggestion could be helpful.

user_168606630
Related