Azea TypeScript - React-18 Admin & Dashboard Template

FAQS
General Style

How to Change Font Style ?

Step 1:

Go To style.scss (src/assets/scss/styles.scss )

if you want to change another font-family Go to the site Google Fonts And Select One font Family and import in to styles.scss file

How to Select font Family

Example:

Step 2:

And paste Your Selected font-family in style.scss

Example:

Step 3:

And add the Your Selected font-family in _customs.scss(src/assets/scss/custom/_customs.scss)

Example:

body {
	font-size: 1rem;
	font-family: "Roboto", sans-serif;
	font-weight: 400;
	color: #{$color};
	background-color: #{$background};
	line-height: 1.5;
	text-align: start;
	overflow-x: clip;
	padding: 0;
	margin: 0;
}

How to change Menu icons ?

Note: Here we are using Svg icon as a default icon,

If you want to change the icon follow the steps as below

Step 1 :

Refer to the below given example we are attaching the svg in "icons: "

Step 2 :

If you want to change the icon visit the path follows src/layout/Sidebar/SidebarData.tsx and replace the existing icon with a new icon to change the menu icon in the sidebar


Note : here we changed it in to Fontawsome icon
{
menutitle: "MAIN",
id: 1,
Items: [
     {
       path: `${import.meta.env.BASE_URL}dashboard`,
       icon: (<i className="side-menu__icon fa fa-home" aria-hidden="true"></i>),   Replace the existing icon with a new icon.
       type: 'link',
       active: false,
       selected: false,
       title: 'Dashboard'
      },
   ]
},

How to Change Logo ?

For changing the logo in your template follow the below step to make the necessary changes.

step: 1

go to sidebar.tsx and change the images in the following path as mentioned below
How to Enable RTL Version

How to Enable RTL Version?

Please follow the below steps to enable RTL Version
Step 1 :

To enable RTL Version you have to open SwitcherData.tsx which is located at (src/layout/Switcher/Data/SwitcherData.tsx)open file and paste the code rtl as shown in below



	   // RTL add class 
	document.querySelector('body')?.classList.add("rtl");
     
	// RTL remove class
	document.querySelector('body')?.classList.remove('ltr');
Dark Theme Style

How to Enable Dark Theme?

Please follow the below steps to enable Dark Theme

To enable Dark Theme you have to open SwitcherData.tsx which is located at (src/layout/Switcher/Data/SwitcherData.tsx)open file and paste the code as shown in below


     /*Dark-mode adding class*/
	    document.querySelector('body')?.classList.add('dark-mode');
     /* Dark mode remove Class */
        document.querySelector('body')?.classList.remove('light-mode');
        document.querySelector('body')?.classList.remove('light-menu');
        document.querySelector('body')?.classList.remove('color-menu'); 
        document.querySelector('body')?.classList.remove('dark-menu');
        document.querySelector('body')?.classList.remove('light-header');
        document.querySelector('body')?.classList.remove('color-header');
        document.querySelector('body')?.classList.remove('dark-header');
Primary Color

How to Enable Primary Color?

Please follow the below steps to enable Dark Theme
Step 1 :

To enable Primary Color you have to open SwitcherData.tsx which is located at (src/layout/Switcher/Data/SwitcherData.tsx)open file and paste the code as shown in below


export const ThemePrimaryColor = () => {
	const [state, updateState] = useState("#664dc9");
	const handleInput = (e) => {
	  let { r, g, b }: any = hexToRgb(e.target.value);
	  updateState(e.target.value);
	  const rgbaValue = `rgba(${r}, ${g}, ${b})`;
	  const rgbaValue005 = `rgba(${r}, ${g}, ${b}, 0.05)`;
	  const rgbaValue1 = `rgba(${r}, ${g}, ${b}, 0.1)`;
	  const rgbaValue2 = `rgba(${r}, ${g}, ${b}, 0.2)`;
	  const rgbaValue3 = `rgba(${r}, ${g}, ${b}, 0.3)`;
	  const rgbaValue4 = `rgba(${r}, ${g}, ${b}, 0.4)`;
	  const rgbaValue5 = `rgba(${r}, ${g}, ${b}, 0.5)`;
	  const rgbaValue6 = `rgba(${r}, ${g}, ${b}, 0.6)`;
	  const rgbaValue7 = `rgba(${r}, ${g}, ${b}, 0.7)`;
	  const rgbaValue8 = `rgba(${r}, ${g}, ${b}, 0.8)`;
	  const rgbaValue9 = `rgba(${r}, ${g}, ${b}, 0.9)`;
	  const rgbaValue10 = `rgba(${r}, ${g}, ${b}, 0.58)`;
	  const rgbaValue11 = `rgba(${r}, ${g}, ${b}, 1)`;
  
	  document.documentElement.style.setProperty("--primary-bg-color", rgbaValue);
	  document.documentElement.style.setProperty("--primary005", rgbaValue005);
	  document.documentElement.style.setProperty("--primary01", rgbaValue1);
	  document.documentElement.style.setProperty("--primary02", rgbaValue2);
	  document.documentElement.style.setProperty("--primary03", rgbaValue3);
	  document.documentElement.style.setProperty("--primary04", rgbaValue4);
	  document.documentElement.style.setProperty("--primary05", rgbaValue5);
	  document.documentElement.style.setProperty("--primary06", rgbaValue6);
	  document.documentElement.style.setProperty("--primary07", rgbaValue7);
	  document.documentElement.style.setProperty("--primary08", rgbaValue8);
	  document.documentElement.style.setProperty("--primary09", rgbaValue9);
	  document.documentElement.style.setProperty("--primary-bg-color", rgbaValue11);
	  document.documentElement.style.setProperty("--primary-bg-hover", rgbaValue10);
	  document.documentElement.style.setProperty("--primary-bg-border", rgbaValue11);
  
	  localStorage.setItem("Azeaprimarybordercolor", rgbaValue11);
	  localStorage.setItem("Azeaprimarycolor", rgbaValue11);
	  localStorage.setItem("Azeaprimaryhovercolor", rgbaValue10);
	  localStorage.setItem("AzealightMode", "true");
	  
	};														  
return (
  <div className="ThemePrimaryColor">
  <ColorPicker onChange={handleInput} value={state} />
  <div className="my-bootstrap-component" style={{ backgroundColor: 'var rgba(--primary-color)' }}>
														  
  </div>
  </div>
);
 };
Step 2 :

To enable Primary Color you have to open Switcher.tsx which is located at (src/layout/Switcher/Switcher.tsx) file and paste the code as shown in below


        import * as SwitcherData from './Data/SwitcherData';

			<SwitcherData.ThemePrimaryColor />
Background Color

How to Enable Background Color?

Please follow the below steps to enable Dark Theme
Step 1 :

To enable Background Color you have to open SwitcherData.tsx which is located at (src/layout/Switcher/Data/SwitcherData.tsx)open file and paste the code as shown in below


     export const Backgroundcolor = () => {
     	const [state, updateState] = useState("#1a1c32");
     	const handleInput = (e) => {
     	  let { r, g, b }: any = hexToRgb(e.target.value);
     	  updateState(e.target.value);
     	  const rgbaValue = `rgba(${r}, ${g}, ${b})`;
     	  const rgbaValue10 = `rgba(${r}, ${g}, ${b}, 0.87)`;
     	  const rgbaValue11 = `rgba(${r}, ${g}, ${b},1)`;
     	  const rgbaValue005 = `rgba(${r}, ${g}, ${b}, 0.05)`;
     	  const rgbaValue1 = `rgba(${r}, ${g}, ${b}, 0.1)`;
     	  const rgbaValue2 = `rgba(${r}, ${g}, ${b}, 0.2)`;
     	  const rgbaValue3 = `rgba(${r}, ${g}, ${b}, 0.3)`;
     	  const rgbaValue4 = `rgba(${r}, ${g}, ${b}, 0.4)`;
     	  const rgbaValue5 = `rgba(${r}, ${g}, ${b}, 0.5)`;
     	  const rgbaValue6 = `rgba(${r}, ${g}, ${b}, 0.6)`;
     	  const rgbaValue7 = `rgba(${r}, ${g}, ${b}, 0.7)`;
     	  const rgbaValue8 = `rgba(${r}, ${g}, ${b}, 0.8)`;
     	  const rgbaValue9 = `rgba(${r}, ${g}, ${b}, 0.9)`;
     	  document.documentElement.style.setProperty("--dark-body", rgbaValue10);
     	  document.documentElement.style.setProperty("--dark-theme", rgbaValue11);
     	  document.documentElement.style.setProperty("--primary01", rgbaValue1);
     	  document.documentElement.style.setProperty("--primary02", rgbaValue2);
     	  document.documentElement.style.setProperty("--primary03", rgbaValue3);
     	  document.documentElement.style.setProperty("--primary04", rgbaValue4);
     	  document.documentElement.style.setProperty("--primary05", rgbaValue5);
     	  document.documentElement.style.setProperty("--primary06", rgbaValue6);
     	  document.documentElement.style.setProperty("--primary07", rgbaValue7);
     	  document.documentElement.style.setProperty("--primary08", rgbaValue8);
     	  document.documentElement.style.setProperty("--primary09", rgbaValue9);
     	  document.documentElement.style.setProperty("--primary005", rgbaValue005);
     	  localStorage.setItem("Azeabgcolor", rgbaValue10);
     	  localStorage.setItem("Azeathemecolor", rgbaValue11);
     	  localStorage.setItem("AzeadarkMode", "true");
     	  document.querySelector('body')?.classList.add('dark-mode');
     	  document.querySelector('body')?.classList.remove('light-mode');
     	  document.querySelector('body')?.classList.remove('light-menu');
     	  document.querySelector('body')?.classList.remove('color-menu');
     	  document.querySelector('body')?.classList.remove('dark-menu');
     	  document.querySelector('body')?.classList.remove('light-header');
     	  document.querySelector('body')?.classList.remove('color-header');
     	  document.querySelector('body')?.classList.remove('dark-header');
     	  localStorage.removeItem('AzealightMode');
     	  localStorage.removeItem('Azealightheader');
     	  localStorage.removeItem('Azealighmenu');
     	 
     	};
     	return (
     	  <div className="ThemePrimaryColor">
     		<ColorPicker onChange={handleInput} value={state} />
     		<div className="my-bootstrap-component" style={{ backgroundColor: 'var rgba(--primary-color)' }}>
     		  {/* Content of the Bootstrap component */}
     		</div>
     	  </div>
     	);
       };
Step 2 :

To enable Primary Color you have to open Switcher.tsx which is located at (src/layout/Switcher/Switcher.tsx) file and paste the code as shown in below


        import * as SwitcherData from './Data/SwitcherData';

			<SwitcherData.BackgroundColor />
How to Enable Color Header Style

How to Enable Color Header?

Please follow the below steps to enable Color Header

To enable Color Header you have to open SwitcherData.tsx which is loacted at (src/layout/Switcher/Data/SwitcherData.tsx)open file and paste the code as shown in below


              
		      //Color Header adding class
		        document.querySelector("body")?.classList.add("default-menu", "color-header");

		       //Color Header remove class
			   document.querySelector("body")?.classList.remove("dark-header");
			   document.querySelector("body")?.classList.remove("light-header");
			   document.querySelector("body")?.classList.remove("gradient-header");
How to Enable Dark Header Style

How to Enable Dark Header?

Please follow the below steps to enable Dark Header

To enable Dark Header you have to open SwitcherData.tsx which is loacted at (src/layout/Switcher/Data/SwitcherData.tsx)open file and paste the code as shown in below


              
		      //Dark Header adding class
			  document.querySelector("body")?.classList.add("default-menu", "dark-header");
	  
		       //Dark Header remove class
			   document.querySelector("body")?.classList.remove("light-header");
			   document.querySelector("body")?.classList.remove("color-header");
			   document.querySelector("body")?.classList.remove("gradient-header");
How to Enable Gradient Header Style

How to Enable Gradient Header?

Please follow the below steps to enable Gradient Header

To enable Gradient Header you have to open SwitcherData.tsx which is loacted at (src/layout/Switcher/Data/SwitcherData.tsx)open file and paste the code as shown in below


              
		      //Gradient Header adding class
			  document.querySelector("body")?.classList.add("default-menu", "gradient-header");
	  
		       //Gradient Header remove class
			   document.querySelector("body")?.classList.remove("dark-header");
			   document.querySelector("body")?.classList.remove("color-header");
			   document.querySelector("body")?.classList.remove("light-header");
How to Enable Color Menu Style

How to Enable Color Menu?

Please follow the below steps to enable Color Menu

To enable Color Menu you have to open SwitcherData.tsx which is loacted at (src/layout/Switcher/Data/SwitcherData.tsx)open file and paste the code as shown in below


              
		      //Color Menu adding class
			  document.querySelector("body")?.classList.add("color-menu");
	  
		       //Color Menu remove class
			   document.querySelector("body")?.classList.remove("dark-menu");
			   document.querySelector("body")?.classList.remove("light-menu");
			   document.querySelector("body")?.classList.remove("gradient-menu");
How to Enable Dark Menu Style

How to Enable Dark Menu?

Please follow the below steps to enable Dark Menu

To enable Dark Menu you have to open SwitcherData.tsx which is loacted at (src/layout/Switcher/Data/SwitcherData.tsx)open file and paste the code as shown in below


              
		      //Dark Menu adding class
			  document.querySelector("body")?.classList.add("dark-menu");
	  
		       //Dark Menu remove class
			   document.querySelector("body")?.classList.remove("color-menu");
			   document.querySelector("body")?.classList.remove("light-menu");
			   document.querySelector("body")?.classList.remove("gradient-menu");
How to Enable Gradient Menu Style

How to Enable Gradient Menu?

Please follow the below steps to enable Gradient Menu

To enable Gradient Menu you have to open SwitcherData.tsx which is loacted at (src/layout/Switcher/Data/SwitcherData.tsx)open file and paste the code as shown in below


              
		      //Gradient Menu adding class
			  document.querySelector("body")?.classList.add("gradient-menu");
	  
		       //Gradient Menu remove class
			   document.querySelector("body")?.classList.remove("dark-menu");
			   document.querySelector("body")?.classList.remove("light-menu");
			   document.querySelector("body")?.classList.remove("color-menu");
How to Enable Boxed Version

How to Enable Boxed Version?

Please follow the below steps to enable Boxed Version

To enable Boxed Version you have to open SwitcherData.tsx which is located at (src/layout/Switcher/Data/SwitcherData.tsx)open file and paste the code as shown in below



      /*Boxed layout styles adding class*/
	     document.querySelector('body')?.classList.add('layout-boxed');

	   /*Boxed layout styles remove class*/
	document.querySelector('body')?.classList.remove('layout-fullwidth');
How to Enable Scrollable Version

How to Enable Scrollable Version?

Please follow the below steps to enable Scrollable Version

To enable Scrollable Version you have to open SwitcherData.tsx which is located at (src/layout/Switcher/Data/SwitcherData.tsx)open file and paste the code as shown in below




      /*Scrollable layout positions adding class*/
	  document.querySelector("body")?.classList.add("scrollable-layout");
	
	  /*Scrollable layout positions remove class*/
	  document.querySelector("body")?.classList.remove("fixed-layout");
	  document.querySelector("body")?.classList.remove("layout-fullwidth");
Others

How to remove the switcher

Please follow the below steps to remove Switcher

Step: 1

To remove Switcher you have to open Header.tsx (src/layouts/header/header.tsx) file and there itself you can remove or comments for switcher code as shown in below 


			
										{/* Switcher Open */}
			
			<className="d-flex" onClick={() => SwitcherIcon()}>
			<svg xmlns="http://www.w3.org/2000/svg" className="header-icon fa-spin" width="24"
			height="24" viewBox="0 0 24 24"></svg>
			</code>

										{/* Switcher Close */}

Step: 2

After remove Switcher codein the same page you have to remove or comments for switcherMenu function code as shown in below


			
		const SwitcherIcon = () => {
		document.querySelector(".demo_changer")?.classList.add("active");
		let demoChanger = document.querySelector(".demo_changer") as HTMLInputElement
		demoChanger.style.right = "0px";
		 }

Step: 3

At last you have to open app.tsx (src/layouts/app.tsx) and remove or comments the Switcher tag as well as the comments the imports also as shown in below


			
			import Switcher from './../layouts/switcher/switcher';
			
			<Switcher />