Ynex Laravel Admin Template

https://laravelui.spruko.com/documentation/ynex
Admin
Ynex is a premium, modern, and minimal Bootstrap 5 Admin Template for Laravel, offering a flexible,...
Tokens:7,849
Snippets:38
Trust Score:9.1
Update:1 year ago
Show doc for...
Tokens:
Raw
### Run Laravel Development Server

Source: https://laravelui.spruko.com/documentation/ynex/index

After successfully installing Laravel, this command starts the built-in development server, allowing you to view your application in the browser.

```bash
php artisan serve
```

--------------------------------

### Running Laravel Project Locally

Source: https://laravelui.spruko.com/documentation/ynex/index

Instructions for setting up and running a Laravel project on a local development environment using XAMPP. It covers Composer installation, project extraction, dependency installation via npm, and starting the development server.

```Shell
php artisan serve
```

```Shell
npm install
```

```Shell
npm run build
```

--------------------------------

### Composer Installation for Laravel

Source: https://laravelui.spruko.com/documentation/ynex/index

Provides initial steps for installing Composer, a dependency manager for PHP, which is crucial for running Laravel projects.

```Markdown
In order to run Laravel we need to install composer by the following steps
```

--------------------------------

### Install and Build Plugins with npm

Source: https://laravelui.spruko.com/documentation/ynex/index

Instructions for managing project plugins using npm. To add new plugins, install them via npm and then run the 'npm run build' command to integrate them into the project.

```bash
npm install <plugin-name>
npm run build
```

--------------------------------

### Install Laravel with Composer

Source: https://laravelui.spruko.com/documentation/ynex/index

This snippet shows the command to create a new Laravel project using Composer. It assumes you have Composer and PHP installed and are in the desired directory (e.g., XAMPP htdocs).

```bash
composer create-project laravel/laravel my-project
```

--------------------------------

### Install Node Modules for Laravel Vite

Source: https://laravelui.spruko.com/documentation/ynex/index

This command installs all the necessary Node.js dependencies required for Laravel Vite to function correctly, as defined in the package.json file.

```bash
npm install
```

--------------------------------

### Remove Switcher from master.blade.php

Source: https://laravelui.spruko.com/documentation/ynex/index

Guides on how to remove the theme switcher component from the master Blade layout by modifying header includes and removing the switcher include.

```blade
To remove the switcher:

In resources/views/layouts/master.blade.php:

Change:
<!-- HEADER -->
@include('layouts.components.header')
<!-- HEADER -->

To:
<!-- HEADER1 -->
@include('layouts.components.header1')
<!-- HEADER1 -->

Remove the following block:
<!-- SWITCHER -->
@include('layouts.components.switcher')
<!-- SWITCHER -->
```

--------------------------------

### Replace Menu Icons (Boxicons to Feather Icons)

Source: https://laravelui.spruko.com/documentation/ynex/index

Update menu icons by locating the `sidebar.blade.php` file and replacing the `<i>` tag content with the desired icon class. This example shows switching from Boxicons to Feather Icons.

```Blade
<li class="slide has-sub">
						<a href="javascript:void(0);" class="side-menu__item">
							<i class="bx bx-home side-menu__icon"></i>
							<span class="side-menu__label">Dashboards<span class="badge bg-warning-transparent ms-2">12</span></span>
							<i class="fe fe-chevron-right side-menu__angle"></i>
						</a>
					
				
			
				
					
						<li class="slide has-sub">
						<a href="javascript:void(0);" class="side-menu__item">
							<i class="fe fe-bell side-menu__icon"></i>
							<span class="side-menu__label">Dashboards<span class="badge bg-warning-transparent ms-2">12</span></span>
							<i class="fe fe-chevron-right side-menu__angle"></i>
						</a>
					
				
			
				
				
			
```

--------------------------------

### Remove Switcher from landing-jobs-master.blade.php

Source: https://laravelui.spruko.com/documentation/ynex/index

Guides on removing the switcher from the landing jobs page master Blade layout by updating jobs-header and jobs-sidebar includes and removing the switcher include.

```blade
In resources/views/layouts/landing-jobs-master.blade.php:

Change jobs-header:
Before:
<!-- LANDING JOBS-HEADER -->
@include('layouts.components.landing.jobs-header')
<!-- END LANDING JOBS-HEADER -->
After:
<!-- LANDING JOBS-HEADER1 -->
@include('layouts.components.landing.jobs-header1')
<!-- END LANDING JOBS-HEADER1 -->

Change jobs-sidebar:
Before:
<!-- LANDING JOBS-SIDEBAR -->
@include('layouts.components.landing.jobs-sidebar')
<!-- END LANDING JOBS-SIDEBAR -->
After:
<!-- LANDING JOBS-SIDEBAR1 -->
@include('layouts.components.landing.jobs-sidebar1')
<!-- END LANDING JOBS-SIDEBAR1 -->

Remove the switcher path below the body tag in pages/landing-jobs.php:
Before:
<body class="landing-body jobs-landing">

<!-- LANDING-SWITCHER -->
@include('layouts.components.landing.switcher')

<!-- END LANDING-SWITCHER -->
After:
<body class="landing-body jobs-landing">
(Removed Switcher Link)
```

--------------------------------

### Laravel Project Structure Overview

Source: https://laravelui.spruko.com/documentation/ynex/index

This outlines the typical directory and file structure of a new Laravel project, highlighting key folders and configuration files.

```bash
├── app
├── bootstrap
├── config
├── database
├── public
├── resources
├── routes
├── storage
├── tests
├── vendor
├── .editorconfig
├── .env
├── .env.example
├── .gitattributes
├── .gitignore
├── .htaccess
├── artisan
├── composer.json
├── composer.lock
├── package-lock.json
├── package.json
├── phpunit.xml
├── README.md
├── server.php
└── vite.config.js
```

--------------------------------

### FTP Uploading Process

Source: https://laravelui.spruko.com/documentation/ynex/index

Provides guidance on uploading project files to a web server using FTP. It details accessing the FTP server, extracting the project, and uploading the files to the appropriate directory (e.g., public_html).

```Shell
Upload project in Path: public_html/ directory in your FTP server.
```

--------------------------------

### Compile Assets with Laravel Vite (Production)

Source: https://laravelui.spruko.com/documentation/ynex/index

This command builds your project's assets for production, optimizing them for deployment and ensuring efficient loading in a live environment.

```bash
npm run build
```

--------------------------------

### Project Plugin Sources (npm Packages)

Source: https://laravelui.spruko.com/documentation/ynex/index

A list of plugins used in the Ynex project, including their versions and npm package URLs. These plugins cover various functionalities like UI components, date pickers, charts, and maps.

```html
<!-- Example of how a plugin might be listed in the project's package.json or a similar manifest -->
<!-- Plugin: Bootstrap, Version: v5.3.2, URL: https://www.npmjs.com/package/bootstrap -->
<!-- Plugin: Choices Js, Version: v10.1.0, URL: https://www.npmjs.com/package/choices.js -->
<!-- Plugin: Swiper, Version: v8.4.4, URL: https://www.npmjs.com/package/swiper -->
<!-- Plugin: Sweet alerts, Version: v11.4.19, URL: https://www.npmjs.com/package/sweetalert2 -->
<!-- Plugin: nouislider, Version: v15.6.0, URL: https://www.npmjs.com/package/nouislider -->
<!-- Plugin: flatpickr, Version: v4.6.13, URL: https://www.npmjs.com/package/flatpickr -->
<!-- Plugin: @simonwep/pickr(ColorPicker), Version: v1.8.2, URL: https://www.npmjs.com/package/@simonwep/pickr -->
<!-- Plugin: GLightbox(Gallery), Version: v3.2.0, URL: https://www.npmjs.com/package/glightbox -->
<!-- Plugin: Full Calendar, Version: v5.11.4, URL: https://www.npmjs.com/package/fullcalendar -->
<!-- Plugin: Leaflet Maps, Version: v1.8.0, URL: https://www.npmjs.com/package/leaflet -->
<!-- Plugin: jsvectormap, Version: v1.4.5, URL: https://www.npmjs.com/package/jsvectormap -->
<!-- Plugin: gmaps.js, Version: v0.4.25, URL: https://www.npmjs.com/package/gmaps -->
<!-- Plugin: apexcharts, Version: v3.37.0, URL: https://www.npmjs.com/package/apexcharts -->
<!-- Plugin: chart.js, Version: v3.8.0, URL: https://www.npmjs.com/package/chart.js?activeTab=readme -->
<!-- Plugin: Echarts, Version: v5.3.3, URL: https://www.npmjs.com/package/echarts -->
<!-- Plugin: simplebar js, Version: v5.3.8, URL: https://www.npmjs.com/package/simplebar -->
<!-- Plugin: masonry, Version: v4.2.2, URL: https://www.npmjs.com/package/masonry-layout -->
<!-- Plugin: select2 dropdown, Version: v8.4.4, URL: https://www.npmjs.com/package/select2 -->
<!-- Plugin: cleave.js, Version: v1.6.0, URL: https://www.npmjs.com/package/cleave.js?activeTab=readme -->
<!-- Plugin: quill, Version: v1.3.7, URL: https://www.npmjs.com/package/quill -->
<!-- Plugin: filepond, Version: v4.30.4, URL: https://www.npmjs.com/package/filepond -->
<!-- Plugin: dropzone, Version: v6.0.0-beta.2, URL: https://www.npmjs.com/package/dropzone -->
<!-- Plugin: gridjs, Version: v5.1.0, URL: https://www.npmjs.com/package/gridjs -->
<!-- Plugin: rater-js, Version: v1.0.1, URL: https://www.npmjs.com/package/rater-js -->
```

--------------------------------

### Ynex Minimum Requirements

Source: https://laravelui.spruko.com/documentation/ynex/index

Specifies the minimum software requirements for running the Ynex Laravel template, including PHP and Laravel framework versions, and essential PHP extensions.

```Markdown
PHP >= 8.1 or Newer 
Laravel/Framework >= 10 or Newer 
BCMath PHP Extension
Ctype PHP Extension
DOM PHP Extension
OpenSSL PHP Extension
Fileinfo PHP extension
PDO PHP Extension
Mbstring PHP Extension
Tokenizer PHP Extension
XML PHP Extension
JSON PHP Extension
```

--------------------------------

### Ynex Template Features Overview

Source: https://laravelui.spruko.com/documentation/ynex/index

Lists the key features of the Ynex Laravel Bootstrap 5 Admin & Dashboard Template, highlighting its modern design, responsiveness, and extensive page count.

```Markdown
No Jquery | Dark Layout  | RTL Ready  
12 Different Dashboards | Authentication Pages | Error Pages  
170+ blade.php Pages | Easy to Customize | Bootstrap 5 Responsive Framework  
Form Elements | Draggable Cards | Ratings  
Grid JS Tables | Data Tables | Gallery  
Apex Charts | Chartjs Charts | Echarts  
Full Calendar | Sweet Alerts | Swiper JS  
Blog Pages | Mail | Chat  
File Manager | Invoice | Landing  
Pricing | Profile | Notifications  
24 * 7 Professional Company Support | Ecommerce Pages | Under Construction Page  
Color Theme Support (Primary and Background) | Neat, clean and simple design | W3C Validated
```

--------------------------------

### Laravel Project Folder Structure

Source: https://laravelui.spruko.com/documentation/ynex/index

Provides a detailed breakdown of the directory and file structure for a typical Laravel project, including core directories like app, public, resources, and routes, along with common configuration and asset files.

```tree
├── app
|   ├── Console
|   ├── Exceptions
|   ├── Http
|   |   ├── Controllers					
|   |   ├── Middleware
|   |   └── Kernel.php
|   ├── Models
|   └── Providers
├── bootstrap
├── config
├── database
├── public
|   ├── build
|   |   ├── assets
|   |   |   ├── icon-fonts
|   |   |   ├── images
|   |   |   ├── libs
|   |   |   └── video
|   |   └── manifest.json
|   ├── .htaccess
|   ├── favicon.ico
|   └── robots.txt
├── resources
|   ├── assets
|   ├── css
|   ├── js
|   ├── sass
|   └── views
|   ├── layouts
|   |   ├── components
|   |   |   ├── landing
|   |   |   |   ├── footer.blade.php
|   |   |   |   ├── header.blade.php
|   |   |   |   ├── header1.blade.php
|   |   |   |   ├── jobs-footer.blade.php
|   |   |   |   ├── jobs-header.blade.php
|   |   |   |   ├── jobs-header1.blade.php
|   |   |   |   ├── jobs-sidebar.blade.php
|   |   |   |   ├── jobs-sidebar1.blade.php
|   |   |   |   ├── scripts.blade.php
|   |   |   |   ├── sidebar.blade.php
|   |   |   |   ├── sidebar1.blade.php
|   |   |   |   ├── styles.blade.php
|   |   |   |   └── switcher.blade.php
|   |   |   ├── footer.blade.php
|   |   |   ├── header.blade.php
|   |   |   ├── header1.blade.php
|   |   |   ├── scripts.blade.php
|   |   |   ├── search-modal.blade.php
|   |   |   ├── sidebar.blade.php
|   |   |   └── switcher.blade.php
|   |   ├── custom-master.blade.php
|   |   ├── landing-jobs-master.blade.php
|   |   ├── landing-master.blade.php
|   |   └── master.blade.php   
|   └── pages/ (170+ blade.php files) 
├── routes
|   ├── api.php
|   ├── channels.php
|   ├── console.php
|   └── web.php
├── storage
├── tests
├── vendor
├── .editorconfig
├── .env
├── .env.example
├── .gitattributes
├── .gitignore
├── .htaccess
├── artisan.php
├── composer.json
├── composer.lock					
├── package-lock.json
├── package.json
├── phpunit.xml
├── README.md
├── server.php
└── vite.config.js
```

--------------------------------

### Image Sources

Source: https://laravelui.spruko.com/documentation/ynex/index

Links to image resource providers utilized in the project, such as Vecteezy, Iconscount, and Unsplash.

```html
<!-- Vecteezy: https://www.vecteezy.com/ -->
<!-- Iconscount: https://iconscout.com/ -->
<!-- Unsplash: https://unsplash.com/ -->
```

--------------------------------

### cPanel File Upload and Extraction

Source: https://laravelui.spruko.com/documentation/ynex/index

Steps to upload project files to cPanel's public_html directory via File Manager, including uploading a zipped folder and extracting its contents.

```bash
1. Login to your cPanel server.
2. Navigate to File Manager.
3. Open public_html and click Upload.
4. Upload your zipped project folder.
5. Go back to public_html, select the zipped folder, and extract it.
6. Access your domain (e.g., www.example.com).
```

--------------------------------

### Compile Assets with Laravel Vite (Development)

Source: https://laravelui.spruko.com/documentation/ynex/index

This command compiles your project's assets (CSS, JavaScript) using Vite in development mode, enabling hot module replacement and faster feedback during development.

```bash
npm run dev
```

--------------------------------

### Recompile Assets Command

Source: https://laravelui.spruko.com/documentation/ynex/index

The command to run after making changes to SCSS files or other assets to recompile them for the development environment.

```bash
npm run dev
```

--------------------------------

### Upgrade Laravel Version with Composer

Source: https://laravelui.spruko.com/documentation/ynex/index

Instructions for upgrading a Laravel project's version by modifying the composer.json file, deleting the vendor directory, and running composer update.

```bash
1. Update dependency versions in composer.json (e.g., php, guzzlehttp/guzzle, laravel/framework).
2. Delete the vendor folder.
3. Run 'composer update' in the project's root directory.
```

--------------------------------

### Laravel UI Spruko Ynex Folder Structure

Source: https://laravelui.spruko.com/documentation/ynex/index

Provides a comprehensive overview of the project's directory layout, highlighting key folders such as app, public, resources, and routes. This structure is typical for Laravel projects, facilitating organization and maintainability.

```tree
├── app
│   ├── Console
│   ├── Exceptions
│   ├── Http
│   │   ├── Controllers
│   │   ├── Middleware
│   │   └── Kernel.php
│   ├── Models
│   └── Providers
├── bootstrap
├── config
├── database
├── public
│   ├── build
│   │   ├── assets
│   │   │   ├── icon-fonts
│   │   │   ├── images
│   │   │   ├── libs
│   │   │   └── video
│   │   └── manifest.json
│   ├── .htaccess
│   ├── favicon.ico
│   └── robots.txt
├── resources
│   ├── assets
│   ├── css
│   ├── js
│   ├── sass
│   └── views
│   ├── layouts
│   |   ├── components
│   |   |   ├── footer.blade.php
│   |   |   ├── header.blade.php
│   |   |   ├── header1.blade.php
│   |   |   ├── scripts.blade.php
│   |   |   ├── search-modal.blade.php
│   |   |   ├── sidebar.blade.php
│   |   |   ├── styles.blade.php
│   |   |   └── switcher.blade.php
│   |   └── master.blade.php
│   └── pages/ (blade.php files)
├── routes
│   ├── api.php
│   ├── channels.php
│   ├── console.php
│   └── web.php
├── storage
├── tests
├── vendor
├── .editorconfig
├── .env
├── .env.example
├── .gitattributes
├── .gitignore
├── .htaccess
├── artisan.php
├── composer.json
├── composer.lock
├── package-lock.json
├── package.json
├── phpunit.xml
├── README.md
├── server.php
└── vite.config.js
```

--------------------------------

### Blade Templating Engine Usage

Source: https://laravelui.spruko.com/documentation/ynex/index

Demonstrates the basic usage of Laravel's Blade templating engine, including extending master layouts and defining sections for content and scripts. Blade provides a clean syntax for creating views.

```Blade
@extends('layouts.master')
```

```Blade
@section('styles')
@endsection
```

```Blade
@section('content')
@endsection
```

```Blade
@section('scripts')
@endsection
```

--------------------------------

### Laravel Vite Dependencies in package.json

Source: https://laravelui.spruko.com/documentation/ynex/index

This lists the essential Node.js dependencies required for Laravel Vite, including the vite plugin, axios, lodash, and other build tools.

```json
"axios": "^1.1.2",
"copy": "^0.3.2",
"laravel-vite-plugin": "^0.7.5",
"lodash": "^4.17.21",
"postcss": "^8.4.27",
"sass": "^1.65.1",
"vite": "^4.0.0",
"vite-plugin-static-copy": "^0.17.0"
```

--------------------------------

### Ynex Swither Features - Theme Styles

Source: https://laravelui.spruko.com/documentation/ynex/index

Details the various theme style customization options available in the Ynex template's switcher, including light/dark modes, LTR/RTL support, and navigation styles.

```Markdown
Light & Dark Themes 
LTR & RTL 
Vertical & Horizontal Navigation Styles 
Menu Click & Hover Styles 
Icon Click & Hover Styles 
Page Regular, Classic & Modern Styles 
Layout Full Width & Boxed 
Menu Fixed & Scrollable 
Header Fixed & Scrollable 
Sidemenu Closed 
Icon Text Menu 
Icon Overlay 
Detached 
Double Menu
```

--------------------------------

### Icon References

Source: https://laravelui.spruko.com/documentation/ynex/index

A collection of links to various icon libraries used for project assets. This includes Bootstrap Icons, Remix Icons, Feather Icons, Tabler Icons, Line Awesome Icons, Boxicons, and Material Icons.

```html
<!-- Bootstrap Icons: https://icons.getbootstrap.com/ -->
<!-- Remix Icons: https://remixicon.com/ -->
<!-- Feather Icons: https://feathericons.com/ -->
<!-- Tabler Icons: https://tabler-icons.io/ -->
<!-- Line Awesome Icons: https://icons8.com/line-awesome -->
<!-- Boxicons: https://boxicons.com/ -->
<!-- Material Icons: https://fonts.google.com/icons?icon.set=Material+Icons -->
```

--------------------------------

### HTML Attribute Reference for Theme Customization

Source: https://laravelui.spruko.com/documentation/ynex/index

A reference table detailing the HTML attributes used to customize various aspects of the Ynex Laravel Admin Template, including theme mode, direction, layout, styles, width, and positions.

```APIDOC
Attribute | Description
--|--
`data-theme-mode="light"` | To set the **light theme**
`data-theme-mode="dark"` | To set the **Dark theme**
`dir="ltr"` | To set **LTR** version default
`dir="rtl"` | To set **LTR** version to **RTL** version
`data-nav-layout="vertical"` | To set menu layout to **vertical**
`data-nav-layout="horizontal" data-nav-style="menu-click"` | To set menu layout to **horizontal**
`data-nav-style="menu-click"` | To set navigation style to **menu click** - *Works same for both vertical and horizontal
`data-nav-style="menu-hover"` | To set navigation style to **menu hover** - *Works same for both vertical and horizontal
`data-nav-style="icon-click"` | To set navigation style to **icon click** - *Works same for both vertical and horizontal
`data-nav-style="icon-hover"` | To set navigation style to **icon hover** - *Works same for both vertical and horizontal
`data-page-style="regular"` | To set page style to **Default**
`data-page-style="classic"` | To set page style to **Classic**
`data-page-style="modern"` | To set page style to **modern**
`data-width="fullwidth"` | To set page width to **Full Width**
`data-width="boxed"` | To set page width to **Boxed**
`data-menu-position="fixed"` | To set menu position **Fixed**
`data-menu-position="scrollable"` | To set menu position **Scrollable**
`data-header-position="fixed"` | To set header position **Fixed**
`data-header-position="scrollable"` | To set header position **Scrollable**
`data-header-position="scrollable"` | To set header position **Scrollable**
`data-vertical-style="closed"` | To set sidemenu layout style **Closed** - *Does not work for horizontal
`data-vertical-style="icontext"` | To set sidemenu layout style **Icon Text** - *Does not work for horizontal
`data-vertical-style="overlay"` | To set sidemenu layout style **Icon Overlay** - *Does not work for horizontal
`data-vertical-style="detached"` | To set sidemenu layout style **Detached** - *Does not work for horizontal
`data-vertical-style="doublemenu"` | To set sidemenu layout style **Double Menu** - *Does not work for horizontal
`loader="enable"` | To enable loader by default
```

--------------------------------

### Ynex Swither Features - Theme Colors

Source: https://laravelui.spruko.com/documentation/ynex/index

Outlines the color customization options provided by the Ynex template's switcher, covering menu, header, primary, and background color settings, including gradient and transparent options.

```Markdown
Menu Light 
Menu Dark 
Menu Color 
Menu Gradient 
Menu Transparent 
Header Light 
Header Dark 
Header Color 
Header Gradient 
Header Transparent 
Theme Primary 
Theme Background 
Menu With Background Images
```

--------------------------------

### Sidemenu Icons Reference

Source: https://laravelui.spruko.com/documentation/ynex/index

Specific reference for sidemenu icons, pointing to Boxicons.

```html
<!-- Boxicons: https://boxicons.com/ -->
```

--------------------------------

### Apply Theme Styles via HTML Attributes

Source: https://laravelui.spruko.com/documentation/ynex/index

Customize the theme's appearance by adding specific data attributes to the `<html>` tag in the `master.blade.php` file. These attributes control layout, color modes, header and menu styles, page styles, width, menu position, header position, and sidemenu layout.

```HTML
<html lang="en" dir="ltr" data-nav-layout="vertical" data-theme-mode="light" data-header-styles="light" data-menu-styles="dark" data-toggled="close">
		
	
	

```

--------------------------------

### HTML Theme Customization Attributes

Source: https://laravelui.spruko.com/documentation/ynex/index

Demonstrates how to apply various attributes to the html tag for customizing theme appearance, including navigation layout, theme mode, header styles, and menu styles.

```html
<html lang="en" dir="ltr" data-nav-layout="vertical" data-theme-mode="light" data-header-styles="light" data-menu-styles="dark" data-toggled="close">
			
		
	
```
```

--------------------------------

### Theme Style Attributes

Source: https://laravelui.spruko.com/documentation/ynex/index

Lists and explains the attributes used to control theme styles, such as menu styles (light, dark, color, gradient, transparent) and header styles (light, dark, color, gradient, transparent).

```html
Attribute  | Description  
---|---
`data-menu-styles="light"` |  To set the menu style to **light**  
`data-menu-styles="dark"` |  To set the menu style to **dark**  
`data-menu-styles="color"` |  To set the menu style to **color**  
`data-menu-styles="gradient"` |  To set the menu style to **gradient**  
`data-menu-styles="transparent"` |  To set the menu style to **transparent**  
`data-header-styles="light"` |  To set the header style to **light**  
`data-header-styles="dark"` |  To set the header style to **dark**  
`data-header-styles="color"` |  To set the header style to **color**  
`data-header-styles="gradient"` |  To set the header style to **gradient**  
`data-header-styles="transparent"` |  To set the header style to **transparent**  
`data-bg-img="bgimg1"` |  To set menu background **image1**  
`data-bg-img="bgimg2"` |  To set menu background **image2**  
`data-bg-img="bgimg3"` |  To set menu background **image3**  
`data-bg-img="bgimg4"` |  To set menu background **image4**  
`data-bg-img="bgimg5"` |  To set menu background **image5**
```

--------------------------------

### SCSS Variables for Theme Colors

Source: https://laravelui.spruko.com/documentation/ynex/index

Illustrates how to modify SCSS variables in `_variables.scss` to change primary and dark theme colors. Requires recompilation using `npm run dev`.

```scss
// Example for primary color change (in _variables.scss)
// $primary-color: #your-new-color;

// Example for dark theme body color (in _variables.scss)
// [data-theme-mode="dark"] {
//   --light-rgb: ...;
//   --form-control-bg: ...;
//   --input-border: ...;
// }
```

--------------------------------

### Font References

Source: https://laravelui.spruko.com/documentation/ynex/index

Reference to Google Fonts for font assets used in the project.

```html
<!-- Google Fonts: https://fonts.google.com/ -->
```

--------------------------------

### Remove Main JS Link

Source: https://laravelui.spruko.com/documentation/ynex/index

Shows how to remove the link to `main.js` from the `master.blade.php` file to completely disable local storage saving.

```html

			<script src="{{asset('build/assets/main.js')}}"></script>

			

```

--------------------------------

### Clear Local Storage Functions

Source: https://laravelui.spruko.com/documentation/ynex/index

Provides JavaScript code snippets for clearing local storage by removing specific functions and localStorage calls from `custom-switcher.js`.

```javascript
function localStorageBackup2(){
				
				
			}
		
		

```

```javascript
				localStorage.setItem( );
				localStorage.removeItem( );
				localStorage.getItem( )
				localStorage.clear();
				localStorageBackup2();
		

```

--------------------------------

### Remove Switcher from landing-master.blade.php

Source: https://laravelui.spruko.com/documentation/ynex/index

Instructions for removing the switcher from the landing page master Blade layout by updating header and sidebar includes and removing the switcher include.

```blade
In resources/views/layouts/landing-master.blade.php:

Change header:
Before:
<!-- LANDING HEADER -->
@include('layouts.components.landing.header')
<!-- END LANDING HEADER -->
After:
<!-- LANDING HEADER1 -->
@include('layouts.components.landing.header1')
<!-- END LANDING HEADER1 -->

Change sidebar:
Before:
<!-- LANDING SIDEBAR -->
@include('layouts.components.landing.sidebar')
<!-- END LANDING SIDEBAR -->
After:
<!-- LANDING SIDEBAR1 -->
@include('layouts.components.landing.sidebar1')
<!-- END LANDING SIDEBAR1 -->

Remove the switcher path below the body tag:
Before:
<body class="landing-body">

<!-- LANDING-SWITCHER -->
@include('layouts.components.landing.switcher')

<!-- END LANDING-SWITCHER -->
After:
<body class="landing-body">
(Removed Switcher Link)
```

--------------------------------

### Change Default Font Family

Source: https://laravelui.spruko.com/documentation/ynex/index

Modify the default font family by updating the SCSS variables. After changing the font, recompile the assets using `npm run dev`.

```SCSS
--default-font-family:    							'Inter', sans-serif;
```
Tokens:
Raw