Synto - Tailwind Angular Admin Template

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 tailwind config file inplace of old font

Example:

fontFamily: {
	inter: ["Inter", "sans-serif"], //place your font here
},
	

Step 4:

And add the Your Selected font-family to body that is font-inter in custom.scss file (rootpath :- assets/scss/tailwind/_custom.scss) file inplace of old font

Example:

body {
 @apply bg-bodybg h-full text-gray-600 dark:text-white m-0 font-inter font-normal text-sm relative;
}
	

In your Angular project, you can easily add menus to the sidebar by modifying the MENUITEMS array in the navservice.ts (src\app\shared\services\navservice.ts) file. The sidebar will dynamically display the menus based on the contents of this array.

Step 1 :

To add the parent Menu Items:

Inside the MENUITEMS array, you can add your menu items using the following format:

{
		title: 'Your Menu Title',
		icon: 'icon-name',
		type: 'link', // or 'sub', 'mega-menu', 'external', 'empty'
		path: '/path-to-route', // Specify the route path for link type
		active: false,
		Menusub: true,
		badgeClass: 'badge-class', // (optional) Add a badge to the menu item
		badgeValue: 'Badge Text', // (optional) Text to display in the badge
	 }

To add the children Menu Items:

Inside the MENUITEMS array, you can add your menu items using the following format:

{
	title: 'Your Menu Title',
	icon: 'icon-name',
	type: 'link', // or 'sub', 'mega-menu', 'external', 'empty'
	active: false,
	badgeClass: 'badge-class', // (optional) Add a badge to the menu item
	badgeValue: 'Badge Text', // (optional) Text to display in the badge
	children: [
	 // (optional) Define child items for sub-menu or mega-menu type
	 {
	   path: '/child-path',
	   title: 'Child Menu Title',
	   type: 'link',
	 },
	 // Add more child items if needed
   ],
 }

• title: The display name of the menu.
• icon: The icon to display next to the menu.
• type: Specify the type of the menu item (link, sub, mega-menu, external, empty).
• path: Specify the route path for link type menu.
• Menusub: Set to true for sub-menu or mega-menu types.
• active: Set to true to mark this menu as active.
• badgeClass (optional): CSS class for the badge.
• badgeValue (optional): Text to display in the badge.
• children: Define an array of child menu items for sub-menu or mega-menu type.

3 . Save the Changes:

After adding your menu items, save the changes made to the nav.service.ts (src\app\shared\services\navservice.ts) file.

4 . View Sidebar Changes:

he sidebar will now automatically display the added menu items based on the modifications you made in the MENUITEMS array.

Go To "src/assets/img/brand-logos" folder and replace your logo with Previous Logos within in image size. note: Please don't increase logo sizes. Replace your logo within given image size. otherwise the logo will not fit in particular place it disturbs the template design.