# FAQ

<details>

<summary>How I can remove the Customizer(Setting) button?</summary>

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.

</details>

<details>

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

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

1. 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**
2. Remove all unrelated routes from the **src/page/index.js** file. (Only for CRA)
3. Remove all unrelated files/directory from **src/page/** directory.  (Only for CRA)
4. If you are using nextjs version you need to remove from **src/modules/** directory and routes from **src/pages** directory

</details>

<details>

<summary>Which icon package is used for the sidebar menu icons?</summary>

We are using **react-icons** for the sidebar menu. you can check out these here: <https://react-icons.github.io/react-icons/>&#x20;

</details>

<details>

<summary>How easy is it to extract the Mail App into my own project?</summary>

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

1. Copy Mail folder into your project from apps
2. 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.)
3. Copy AppsContainer from the core components
4. Copy 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 you API Please link your API to mail)
6. Please make sure you initialize APIs in your demo version.

</details>

<details>

<summary>How I can remove the default login email and password?</summary>

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.<br>

{% code title="src/modules/auth/Signin/SigninFirebase.js." %}

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

{% endcode %}

</details>

<details>

<summary>Where I can found the Nextjs Document?</summary>

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](https://docs.cremawork.com/v-3/next-js)

</details>

<details>

<summary>Where I can found the TypeScript Document?</summary>

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.

</details>

<details>

<summary>Where I can change the initial URL of the theme?</summary>

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

</details>

<details>

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

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.**

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

</details>

<details>

<summary>How I change the menu text in existing version?</summary>

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

{% code title="src/pages/routesConfig.tsx" %}

```
messageId: "sidebar.apps.wall",
```

{% endcode %}

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

{% code title="src/shared/localization/locales/en\_US.json" %}

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

{% endcode %}

</details>

<details>

<summary>How I can rid-off from the locale(Multilingual)?</summary>

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

{% code title="src/App.tsx" %}

```javascript
<AppLocaleProvider>// remove this 
...
</AppLocaleProvider>
```

{% endcode %}

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

{% code title="src/@crema/core/AppLayout/components/VerticalNav/VerticalItem/index.tsx" %}

```javascript
// 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" }}
  />
```

{% endcode %}

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

</details>

<details>

<summary>Is the Crema use nextjs default routing or its use next-router?</summary>

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

</details>

<details>

<summary>Where I can change the logo of Crema?</summary>

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./

{% code title="src/@crema/core/AppLayout/components/AppLogo/index.js" %}

```javascript
//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>
      
      
```

{% endcode %}

</details>

<details>

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

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

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

```javascript
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

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

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

</details>

<details>

<summary>How can I change the current font ?</summary>

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

\
**1.** Go to the file **public/index.html** \
&#x20;   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">\\](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**\
&#x20;     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**\
&#x20;    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**\
&#x20;    and replace the current font family '**Poppins**' to the your current font in this file.

</details>

<details>

<summary>How to remove "No routes matched location' warning?</summary>

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

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

   <pre class="language-javascript"><code class="lang-javascript">  const routes = useRoutes(
       generateRoutes({
         isAuthenticated: isAuthenticated,
         userRole: user?.role,
         unAuthorizedStructure,
         authorizedStructure,
         anonymousStructure,
       })
     );
   <strong>
   </strong><strong>&#x3C;AppSuspense>
   </strong>  &#x3C;AppErrorBoundary>
       {routes}
       &#x3C;Routes> // remove this  tag
         &#x3C;Route path="/" element={&#x3C;Navigate to={initialUrl} />} />
       &#x3C;/Routes>
     &#x3C;/AppErrorBoundary>
   &#x3C;/AppSuspense>

   //this should be like below 
    &#x3C;AppSuspense>
       &#x3C;AppErrorBoundary>{routes}&#x3C;/AppErrorBoundary>
     &#x3C;/AppSuspense>
   </code></pre>
2. &#x20;Go to file `src/pages/index.tsx` and add the default route in the path<br>

   ```javascript

   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" />,
       },
     ]),
   };

   ```

</details>

{% hint style="info" %} <mark style="color:blue;">Please let us know if you missed anything in the docs. We will add that asap.</mark>
{% endhint %}