FAQ

How I can remove the Customizer(Setting) button?

For example, I want to remove the theme setting button from the default layout. First of all, I need to go to the src/@crema/core/AppLayout/DefaultLayout/index.js file, and to remove the customizer button, I need to remove <AppThemeSetting/> Tag.

In case you are using with the another layout go to the src/@crema/core/AppLayout/{LAYOUT}/index.js and remove the <AppThemeSetting/> Tag.

Is there any way to remove the menus from the left sidebar? what all files do I need to remove it from?

Yes, You can remove the menus from the left sidebar. but we suggest that it would be great if you use the starter_template of your desired version. In case you want to remove few menus from the template then you can follow the following steps

Go to the src/page/routesConfig.js file and remove the object that you don't want to use in your left sidebar. In nextjs version please modify the src/modules/routesConfig.js
Remove all unrelated routes from the src/page/index.js file. (Only for CRA)
Remove all unrelated files/directory from src/page/ directory. (Only for CRA)
If you are using nextjs version you need to remove from src/modules/ directory and routes from src/pages directory

How easy is it to extract the Mail App into my own project?

There are few simple steps to move apps into a separate project.

Copy Mail folder into your project from apps
Add Mail app's route into your project and link it to your navigation(You can update base path 'apps/mail' to as your project need.)
Copy AppsContainer from the core components
Copy MailApp action and reducer file from the redux and link it to your app redux.
In case you want to use a fake API and database, please copy the DB file and mock API into your project(In case you want to integrate it with you API Please link your API to mail)
Please make sure you initialize APIs in your demo version.

How I can remove the default login email and password?

If you are using CRA version then go to src/pages/auth/Signin/SigninFirebase.js and remove the initialValues. if you are using the nextjs version then you need to remove this from src/modules/auth/Signin/SigninFirebase.js. and follow the similar way for other type authentication.

src/modules/auth/Signin/SigninFirebase.js.

initialValues={{// remove this attribute of Formik
 email: 'crema.demo@gmail.com', 
  password: 'Pass@1!@all',
}}

Where I can found the Nextjs Document?

If you are using the Nextjs Version of Crema. You should follow the same doc for the Nextjs version. You can check the nextjs doc here

Where I can found the TypeScript Document?

If you are using the Typescript Version of Crema. You should follow the same doc for the TypeScript version. The folder structure and way of the code style are same for all versions of Crema.

Where I can change the initial URL of the theme?

To change the initial path you need to change the initialUrl in the src/shared/constants/AppConst.js

How I can set dynamic initialUrl instead of static url('/dashboards/crypto')?

If you want to assign the dynamic url then you need to get the your url in the src/@crema/core/AppContentView/index.js file and assign it to fallbackPath.

<AppErrorBoundary>
  {generateRoutes({
    isAuthenticated: isAuthenticated,
    userRole: user?.role,
    unAuthorizedStructure:{
      ...unAuthorizedStructure,
      fallbackPath: initialUrl, //Here is your current url goes
    },
    authorizedStructure,
    anonymousStructure,
  })}
</AppErrorBoundary>

How I change the menu text in existing version?

To change the text of the menu you need to update the locale value to a particular messageId you need to follow the following steps to achieve that.

Copy your messageId. It's looks like this "sidebar.apps.wall" in below message

src/pages/routesConfig.tsx

messageId: "sidebar.apps.wall",

Search it in your locale file in the src/shared/localization/locales/{locale}.json file and replace it's value according to you.

src/shared/localization/locales/en_US.json

 "sidebar.apps.wall": "Wall App",

How I can rid-off from the locale(Multilingual)?

To remove multilingual support from your app you need to follow the following steps. We suggest to you please start with the starter-kit of your desired version

You need to remove <AppLocaleProvider> tag from the src/App.tsx file

src/App.tsx

<AppLocaleProvider>// remove this 
...
</AppLocaleProvider>

Remove the <IntelMessage> tag from the src/@crema/core/AppLayout/components/* directory like below.

src/@crema/core/AppLayout/components/VerticalNav/VerticalItem/index.tsx

// before

  <ListItemText
        className="nav-item-content"
        primary={<IntlMessages id={item.messageId} />}
        classes={{ primary: "nav-item-text" }}
  />

//after 

  <ListItemText
        className="nav-item-content"
        primary={item.title}
        classes={{ primary: "nav-item-text" }}
  />

You need to do same process with all other file in this directory.

Is the Crema use nextjs default routing or its use next-router?

Crema use the default routing method in the nextjs. In this routing method page route is based on the file and directory name.

Where I can change the logo of Crema?

To change the logo you need to go to the file src/@crema/core/AppLayout/components/AppLogo/index.js and replace the Box content with your logo as shown below./

src/@crema/core/AppLayout/components/AppLogo/index.js

//Current Code
  
  <Box sx={{...}}>
    <Logo fill={theme.palette.primary.main} />
      <Box
        sx={{
          mt: 1,
          display: {xs: 'none', md: 'block'},
          '& svg': {
            height: {xs: 25, sm: 30},
          },
        }}
      >
        <LogoText fill={alpha(theme.palette.text.primary, 0.8)} />
      </Box>
  </Box>


//Your Code

   <Box sx={{...}}>
    //Your Logo code goes here... You can use image and svg as you want
   </Box>

How I can fix scrolling of the Navbar jumping back to the top of the menu when clicking on a menu item(NextJs)?

To stop the jump back to the top, you need to follow the following steps.

Go to the file VerticalItem/index.js and add the following code.

const {pathname} = useRouter();

  useEffect(() => {
    if (process.browser) {
      if (pathname === item.url && document.getElementById(pathname)) {
        setTimeout(() => {
          document
            .getElementById(pathname)
            .scrollIntoView({behavior: 'smooth', block: 'center'});
        }, 1);
      }
    }
  }, [pathname]);

2. Replace the following anchor tag in the same file VerticalItem/index.js

// Replace this with 
<a style={{textDecoration: 'none'}}>

// Replace with this
<a style={{textDecoration: 'none'}} id={item.url}>

How can I change the current font ?

To change the Crema Current font you need to follow the following steps.

1. Go to the file public/index.html Replace the current Poppins font to the your current font <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600&display=swap"rel="stylesheet"> 2. Go to the file src/@crema/utility/AppContextProvider/defaultConfig.tsx and replace the font family of the in the Typography

fontFamily: ["Poppins", "sans-serif"].join(","),

3. Go to the file src/shared/constants/AppEnums.ts update the Font weight according to your project.

export enum Fonts {
  LIGHT = "300",
  REGULAR = "400",
  MEDIUM = "500",
  SEMI_BOLD = "600",
  BOLD = "700",
}

4. Go to the file public/assets/styles/base.css and replace the current font family 'Poppins' to the your current font in this file.

How to remove "No routes matched location' warning?

To remove "No routes matched location" warning you need to follow 2 steps.

Go to the file src/@crema/core/AppContentView/index.tsx and need to remove the <Routes> tag from the code

  const routes = useRoutes(
    generateRoutes({
      isAuthenticated: isAuthenticated,
      userRole: user?.role,
      unAuthorizedStructure,
      authorizedStructure,
      anonymousStructure,
    })
  );

<AppSuspense>
  <AppErrorBoundary>
    {routes}
    <Routes> // remove this  tag
      <Route path="/" element={<Navigate to={initialUrl} />} />
    </Routes>
  </AppErrorBoundary>
</AppSuspense>

//this should be like below 
 <AppSuspense>
    <AppErrorBoundary>{routes}</AppErrorBoundary>
  </AppSuspense>

Go to file src/pages/index.tsx and add the default route in the path


const anonymousStructure = {
// add here the default route
  routes: errorPagesConfigs.concat([
    {
      path: "*",
      element: <Error404 />,
    },
  ]),
};

//this should be like below 

const anonymousStructure = {
  routes: errorPagesConfigs.concat([
    {
      path: '/',
      element: <Navigate to={initialUrl} />,
    },
    {
      path: '*',
      element: <Navigate to="/error-pages/error-404" />,
    },
  ]),
};

Please let us know if you missed anything in the docs. We will add that asap.

Last updated 2 years ago

Was this helpful?

<AppErrorBoundary> {generateRoutes({ isAuthenticated: isAuthenticated, userRole: user?.role, unAuthorizedStructure:{ ...unAuthorizedStructure, fallbackPath: initialUrl, //Here is your current url goes }, authorizedStructure, anonymousStructure, })} </AppErrorBoundary>

// before <ListItemText className="nav-item-content" primary={<IntlMessages id={item.messageId} />} classes={{ primary: "nav-item-text" }} /> //after <ListItemText className="nav-item-content" primary={item.title} classes={{ primary: "nav-item-text" }} />

//Current Code <Box sx={{...}}> <Logo fill={theme.palette.primary.main} /> <Box sx={{ mt: 1, display: {xs: 'none', md: 'block'}, '& svg': { height: {xs: 25, sm: 30}, }, }} > <LogoText fill={alpha(theme.palette.text.primary, 0.8)} /> </Box> </Box> //Your Code <Box sx={{...}}> //Your Logo code goes here... You can use image and svg as you want </Box>

const {pathname} = useRouter(); useEffect(() => { if (process.browser) { if (pathname === item.url && document.getElementById(pathname)) { setTimeout(() => { document .getElementById(pathname) .scrollIntoView({behavior: 'smooth', block: 'center'}); }, 1); } } }, [pathname]);

const routes = useRoutes( generateRoutes({ isAuthenticated: isAuthenticated, userRole: user?.role, unAuthorizedStructure, authorizedStructure, anonymousStructure, }) ); <AppSuspense> <AppErrorBoundary> {routes} <Routes> // remove this tag <Route path="/" element={<Navigate to={initialUrl} />} /> </Routes> </AppErrorBoundary> </AppSuspense> //this should be like below <AppSuspense> <AppErrorBoundary>{routes}</AppErrorBoundary> </AppSuspense>

const anonymousStructure = { // add here the default route routes: errorPagesConfigs.concat([ { path: "*", element: <Error404 />, }, ]), }; //this should be like below const anonymousStructure = { routes: errorPagesConfigs.concat([ { path: '/', element: <Navigate to={initialUrl} />, }, { path: '*', element: <Navigate to="/error-pages/error-404" />, }, ]), };