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 libs/components/src/lib/AppLayout/DefaultLayout/index.js file, and to remove the customizer button, I need to remove <AppThemeSetting/> Tag.

In case you are using another layout go to the libs/components/src/lib/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 a few menus from the template then you can follow the following steps
1.Go to the apps/source/src/core/AppRoutes/routeConfig.js file and remove the object that you don't want to use in your left sidebar. In the Next.js version please modify the  apps/source/src/core/AppRoutes/routeConfig.js
2.Remove all unrelated routes from the src/page/index.js file. (Only for CRA)
3.Remove all unrelated files/modules from the apps/source/src/modules directory. And remove the unrelated routes (Only for CRA)
4.If you are using the Next.js version you need to remove from the apps/source/src/modules/ directory and routes from the apps/source/src/pages/ directory
Which icon package is used for the sidebar menu icons?
We are using react-icons for the sidebar menu. you can check out these here: https://react-icons.github.io/react-icons/ 
How easy is it to extract the Mail App into my own project?
There are a few simple steps to move apps into a separate project.
1.Copy the Mail folder into your project from the apps
2.Add the Mail app's route into your project and link it to your navigation(You can update the base path 'apps/mail' to as your project need.)
3.Copy AppsContainer from the core components
4.Copy the MailApp action and reducer file from the redux and link it to your app redux.
5.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 your API Please link your API to mail)
6.Please make sure you initialize APIs in your demo version.
How I can remove the default login email and password?
If you are using the CRA version then go to libs/modules/src/lib/auth/Signin/SigninFirebase.js and remove the initialValues and follow a similar way for other types of authentication.

libs/modules/src/lib/auth/Signin/SigninFirebase.js
initialValues={{// remove this attribute of Formik
 email: '[email protected]', 
  password: '[email protected][email protected]',
}}
Where I can found the Nextjs Document?
If you are using the Next.js  Version of Crema. You should follow the same doc for the Next.js version.
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 code style are the 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 NX_INITIAL_URL value in the apps/source/.env file
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 your URL in the apps/source/src/core/AppRoutes/index.js file and assign it to the path: '/',.

const anonymousStructure = {
  routes: errorPagesConfigs.concat([
    {
      path: '/',
      element: <Navigate to={initialUrl} />,
    },
    {
      path: '*',
      element: <Navigate to="/error-pages/error-404" />,
    },
  ]),
};
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 looks like this "sidebar.apps.wall"  in the below message
apps/source/src/core/AppRoutes/routeConfig.js
messageId: "sidebar.apps.wall",
Search it in your locale file in the src/shared/localization/locales/{locale}.json file and replace its value according to you.
libs/services/localization/src/locales/en_US.json
 "sidebar.apps.wall": "Wall App",
How I can rid-off from the locale(Multilingual)?
Go to the .env file and set NX_MULTILINGUAL to false.
Is the Crema use nextjs default routing or its use next-router?
Crema uses the default routing method in Next.js. 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 libs/components/src/lib/AppLayout/components/AppLogo/index.js. You can modify this file according to your requirement.
import React from 'react';
import { Box } from '@mui/material';
import { useThemeContext } from '@crema/context/ThemeContextProvider';
import { alpha } from '@mui/material/styles';
import { ReactComponent as Logo } from '../../../../assets/icon/logo.svg';
import { ReactComponent as LogoText } from '../../../../assets/icon/logo_text.svg';
​
const AppLogo = () => {
  const { theme } = useThemeContext();
  return (
    <Box
      sx={{
        height: { xs: 56, sm: 70 },
        padding: 2.5,
        display: 'flex',
        flexDirection: 'row',
        cursor: 'pointer',
        alignItems: 'center',
        justifyContent: 'center',
        '& svg': {
          height: { xs: 40, sm: 45 },
        },
      }}
      className="app-logo"
    >
      <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>
  );
};
​
export default AppLogo;
How I can fix the 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.
1.Go to the file libs/components/src/lib/AppLayout/components/VerticalNav/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 apps/source/src/index.html and Replace the current Poppins font with your current font <link    href="https://fonts.googleapis.com/css2?family=Poppins:[email protected];200;300;400;500;600&display=swap"rel="stylesheet">

2.  Go to the file libs/constants/src/defaultConfig.js
      and replace the font family the in the Typography
export const defaultTheme = {
  theme: {
  ...
    typography: {
      fontFamily: ['Poppins', 'sans-serif'].join(','),
    },
    ...
};
3. Go to the file libs/constants/src/AppEnums.js
     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 apps/source/src/assets/styles/base.css
     and replace the current font family 'Poppins' with your current font in this file
Please let us know if you missed anything in the docs. We will add that asap.
Last modified 15d ago