v5.0

Follow the following step to install the laravel in your localhost
You may refer to their official documentation for how to setup the development environment.
Setup Guide

<!-- run the following command --> 
cd /your-path-url/template_svelte
npm install
npm run dev

<!-- browse the url --> 
http://localhost:5173/

Make sure node.js >= v22.x and npm >= v11.x has been installed on your localhost / server

File structure overview for Svelte Version

hud_svelte_v5.0/
├──template_svelte_startup/      // version without demo pages
└──template_svelte/              // version include all demo pages
    ├── package.json
    ├── README.md
    ├── static/
    ├── src/
    │   ├── app.html
    │   ├── components/
    │   ├── lib/
    │   ├── routes/
    │   ├── scss/
    │   └── stores/
    ├── svelte.config.js
    └── vite.config.js

Below is the code from /routes/+layout.svelte which include the app header, sidebar, content, footer and theme panel. You may remove the component if you are not using it.

<script>
  import '/src/scss/styles.scss';
  import 'bootstrap-icons/font/bootstrap-icons.min.css';
  import '@fortawesome/fontawesome-free/css/all.min.css';
  import 'perfect-scrollbar/css/perfect-scrollbar.css';
  
  import AppHeader from '/src/components/app/AppHeader.svelte';
  import AppSidebar from '/src/components/app/AppSidebar.svelte';
  import AppTopNav from '/src/components/app/AppTopNav.svelte';
  import AppFooter from '/src/components/app/AppFooter.svelte';
  import AppThemePanel from '/src/components/app/AppThemePanel.svelte';
  import { onMount } from 'svelte';
  import { appOptions } from '/src/stores/appOptions.js';
  import { appVariables, generateVariables } from '/src/stores/appVariables.js';
  import { setPageTitle } from '$lib/utils';
  
  onMount(async () => {
    import('bootstrap');
    document.querySelector('body').classList.add('app-init');
    
    $appVariables = generateVariables();
  });
</script>

<div id="app" class="app" 
  class:app-header-menu-search-toggled={$appOptions.appHeaderSearchToggled}
  class:app-sidebar-toggled={$appOptions.appSidebarToggled && !$appOptions.appSidebarHide}
  class:app-sidebar-collapsed={$appOptions.appSidebarCollapsed && !$appOptions.appSidebarHide}
  class:app-sidebar-mobile-toggled={$appOptions.appSidebarMobileToggled}
  class:app-sidebar-mobile-closed={$appOptions.appSidebarMobileClosed}
  class:app-content-full-height={$appOptions.appContentFullHeight}
  class:app-content-full-width={$appOptions.appContentFullWidth}
  class:app-without-sidebar={$appOptions.appSidebarHide}
  class:app-without-header={$appOptions.appHeaderHide}
  class:app-boxed-layout={$appOptions.appBoxedLayout}
  class:app-with-top-nav={$appOptions.appTopNav}
  class:app-footer-fixed={$appOptions.appFooterFixed}
>
  {#if !$appOptions.appHeaderHide}<AppHeader />{/if}
  {#if !$appOptions.appSidebarHide}<AppSidebar />{/if}
  {#if $appOptions.appTopNav}<AppTopNav />{/if}
  <AppThemePanel />
  
  <div id="content" class="app-content{($appOptions.appContentClass) ? ' '+ $appOptions.appContentClass : ''}">
    <slot />
  </div>
  
  {#if $appOptions.appFooter}<AppFooter />{/if}
</div>

List of components inside the components folder

/src/components/
├── app/
│   ├── AppFooter.svelte
│   ├── AppHeader.svelte
│   ├── AppSidebar.svelte
│   ├── AppThemePanel.svelte
│   ├── AppTopNav.svelte
│   └── NavScrollTo.svelte
├── bootstrap/
│   ├── Card.svelte
│   ├── CardBody.svelte
│   ├── CardExpandToggler.svelte
│   ├── CardFooter.svelte
│   ├── CardGroup.svelte
│   ├── CardHeader.svelte
│   └── CardImgOverlay.svelte
└── plugins/
    ├── Apexcharts.svelte
    ├── Chartjs.svelte
    ├── HighlightJs.svelte
    └── PerfectScrollbar.svelte

This template used svelte to create the store and share the states variable between the components. Store files can be found via /src/stores/

/src/stores/
├─ appOptions.js            // global app option states
├─ appSidebarMenus.js       // global app sidebar menu list
├─ appTopNavMenus.js        // global app top nav menu list
└─ appVariables.js          // global app variable (fetched from css / font variables)

You can use the global app option from /stores/apOptions.js

<script>
  import { onMount, onDestroy } from 'svelte';
  import { appOptions } from '/src/stores/appOptions.js';

  onMount(async () => {
    // available app option
    $appOptions.appBoxedLayout = true;
    $appOptions.appSidebarToggled = true;
    $appOptions.appSidebarCollapsed = true;
    $appOptions.appSidebarMobileToggled = true;
    $appOptions.appSidebarMobileClosed = true;
    $appOptions.appSidebarHide = true;
    $appOptions.appHeaderToggled = true;
    $appOptions.appHeaderSearchToggled = true;
    $appOptions.appHeaderHide = true;
    $appOptions.appContentFullHeight = true;
    $appOptions.appContentClass = 'p-0';
    $appOptions.appTopNav = true;
    $appOptions.appFooter = true;
    $appOptions.appFooterFixed = true;
    $appOptions.appThemePanelToggled = true;
  });
  
  onDestroy(() => {
    // set to default before leave the page
    $appOptions.appFooter = false;
  });
</script>

You can use the global app variables (css color / font family) from /stores/appVariables.js

<script>
  import { onMount, onDestroy } from 'svelte';
  import { appVariables } from '/src/stores/appVariables.js';
  
  let chart;
  
  function renderChart(appVariables) {
    // available font
    appVariables.font.bodyFontFamily;
    appVariables.font.bodyFontSize;
    appVariables.font.bodyFontWeight;
    appVariables.font.bodyLineHeight;
    
    // available color
    appVariables.color.theme;
    appVariables.color.themeRgb;
    appVariables.color.themeColor;
    appVariables.color.themeColorRgb;
    
    appVariables.color.default;
    appVariables.color.defaultRgb;
    
    appVariables.color.primary;
    appVariables.color.primaryRgb;
    appVariables.color.primaryBgSubtle;
    appVariables.color.primaryText;
    appVariables.color.primaryBorderSubtle;
    
    appVariables.color.secondary;
    appVariables.color.secondaryRgb;
    appVariables.color.secondaryBgSubtle;
    appVariables.color.secondaryText;
    appVariables.color.secondaryBorderSubtle;
    
    appVariables.color.success;
    appVariables.color.successRgb;
    appVariables.color.successBgSubtle;
    appVariables.color.successText;
    appVariables.color.successBorderSubtle;
    
    appVariables.color.warning;
    appVariables.color.warningRgb;
    appVariables.color.warningBgSubtle;
    appVariables.color.warningText;
    appVariables.color.warningBorderSubtle;
    
    appVariables.color.info;
    appVariables.color.infoRgb;
    appVariables.color.infoBgSubtle;
    appVariables.color.infoText;
    appVariables.color.infoBorderSubtle;
    
    appVariables.color.danger;
    appVariables.color.dangerRgb;
    appVariables.color.dangerBgSubtle;
    appVariables.color.dangerText;
    appVariables.color.dangerBorderSubtle;
    
    appVariables.color.light;
    appVariables.color.lightRgb;
    appVariables.color.lightBgSubtle;
    appVariables.color.lightText;
    appVariables.color.lightBorderSubtle;
    
    appVariables.color.dark;
    appVariables.color.darkRgb;
    appVariables.color.darkBgSubtle;
    appVariables.color.darkText;
    appVariables.color.darkBorderSubtle;
    
    appVariables.color.inverse;
    appVariables.color.inverseRgb;
    
    appVariables.color.white;
    appVariables.color.whiteRgb;
    
    appVariables.color.black;
    appVariables.color.blackRgb;
    
    appVariables.color.teal;
    appVariables.color.tealRgb;
    
    appVariables.color.indigo;
    appVariables.color.indigoRgb;
    
    appVariables.color.purple;
    appVariables.color.purpleRgb;
    
    appVariables.color.yellow;
    appVariables.color.yellowRgb;
    
    appVariables.color.pink;
    appVariables.color.pinkRgb;
    
    appVariables.color.cyan;
    appVariables.color.cyanRgb;
    
    appVariables.color.gray100;
    appVariables.color.gray200;
    appVariables.color.gray300;
    appVariables.color.gray400;
    appVariables.color.gray500;
    appVariables.color.gray600;
    appVariables.color.gray700;
    appVariables.color.gray800;
    appVariables.color.gray900;
    appVariables.color.gray100Rgb;
    appVariables.color.gray200Rgb;
    appVariables.color.gray300Rgb;
    appVariables.color.gray400Rgb;
    appVariables.color.gray500Rgb;
    appVariables.color.gray600Rgb;
    appVariables.color.gray700Rgb;
    appVariables.color.gray800Rgb;
    appVariables.color.gray900Rgb;
    
    appVariables.color.muted;
    appVariables.color.mutedRgb;
    
    appVariables.color.emphasisColor;
    appVariables.color.emphasisColorRgb;
    
    appVariables.color.bodyBg;
    appVariables.color.bodyBgRgb;
    
    appVariables.color.bodyColor;
    appVariables.color.bodyColorRgb;
    
    appVariables.color.headingColor;
    
    appVariables.color.secondaryColor;
    appVariables.color.secondaryColorRgb;
    appVariables.color.secondaryBg;
    appVariables.color.secondaryBgRgb;
      
    appVariables.color.tertiaryColor;
    appVariables.color.tertiaryColorRgb;
    appVariables.color.tertiaryBg;
    appVariables.color.tertiaryBgRgb;
      
    appVariables.color.linkColor;
    appVariables.color.linkColorRgb;
    appVariables.color.linkHoverColor;
    appVariables.color.linkHoverColorRgb;
      
    appVariables.color.borderColor;
    appVariables.color.borderColorTranslucent;
  }

  onMount(async () => {
    unsubscribe = appVariables.subscribe(value => {
      if (value.color) {
        chart = renderChart(value);
      }
    });
  });
  
  onDestroy(() => {
    if (unsubscribe) {
      unsubscribe();
    }
  });
</script>

<!-- html -->
{#if chart}
	// do your thing here
{/if}

Set the app sidebar menu list from from /stores/appSidebarMenus.js

// single level structure
{
  'url': '/',
  'icon': 'bi bi-cpu',
  'text': 'Dashboard'
},

// multi level structure 
{
  'icon': 'bi bi-envelope',
  'text': 'Email',
  'children': [{
    'url': '/email/inbox',
    'action': 'Inbox',
    'text': 'Inbox'
  }, {
    'url': '/email/compose',
    'action': 'Compose',
    'text': 'Compose'
  }, {
    'url': '/email/detail',
    'action': 'Detail',
    'text': 'Detail'
  }]
}

The default theme color is set to the teal color. You may change it from /src/scss/_variables.scss

// LINE 100
$theme:        $teal !default;

Add the 'cover' class to the <html> tag in /src/app.html to change the page cover. You can modify the cover image from /static/img/cover/. Note that both light and dark mode have separate background cover images.

Available Cover Options

<html class="bg-cover-2">
<html class="bg-cover-3">
<html class="bg-cover-4">
<html class="bg-cover-5">
<html class="bg-cover-6">
<html class="bg-cover-7">
<html class="bg-cover-8">
<html class="bg-cover-9">

If you wish to enable the light mode instead, you can easily do so by removing the data-bs-theme="dark" attribute from the HTML tag in in /src/app.html. This will disable the default dark mode and enable the light mode theme.

Please note that once you remove the data-bs-theme="dark" attribute, the light mode theme will persist even if the user refreshes the page or navigates to a different page within the application.

Here's an example:

<!DOCTYPE html>
<html lang="en" data-bs-theme="dark">
</html>

<!DOCTYPE html>
<html lang="en">
</html>

With this example, the data-bs-theme="dark" attribute has been removed from html tag. This will enable the light mode to the entire page.

OR

If you want to apply light / dark mode to a single component only, you can add the data-bs-theme="light|dark" attribute to that component.

<Card data-bs-theme="light">
  <CardBody>
    <!-- your component content here -->
  </CardBody>
</Card>

Add the dir="rtl" attribute to <html> for /src/app.html in order to enable Right-To-Left (RTL) layout direction.

<html dir="rtl">

This will flip the layout direction of the entire page to support RTL languages like Arabic, Hebrew, or Persian.

Global Variables

The /src/scss/_variables.scss file contains the variables that control the styles of your application.

To edit these variables, navigate to the /src/scss/_variables.scss file in your code editor and modify the values of the variables to suit your needs.

<!-- global variable -->
/src/scss/_variables.scss

Dark Mode Variables

The /src/scss/_variables-dark.scss file contains the variables that control the styles for dark mode. These variables are used in conjunction with the variables in the /src/scss/_variables.scss file to provide different values for light and dark modes.

<!-- dark mode variable -->
/src/scss/_variables-dark.scss

We have created the common re-usable card bootstrap component for this template. You may found the card component via /src/components/bootstrap/

//usage 
<Card>
  <CardHeader>...</CardHeader>
  <CardBody>...</CardBody>
  <CardFooter>...</CardFooter>
</Card>

You may use the default bootstrap data attribute like data-bs-toggle="dropdown" OR import the required modules from bootstrap.

// usage example
<script>
  import { onMount } from 'svelte';
  
  onMount(async () => {
    let bootstrap = await import('bootstrap');
    new bootstrap.ScrollSpy(document.body, {
      target: '#sidebar-bootstrap',
      offset: 200
    });
  });
</script>

I've used the following images, icons or other files as listed.

Plugins

1. ApexCharts: https://apexcharts.com/
2. Awesomplete: https://projects.verou.me/awesomplete/
3. Bootstrap: http://getbootstrap.com/
4. Bootstrap Icons: https://icons.getbootstrap.com/
5. Chart.js: https://chartjs.org
6. Datatables: https://datatables.net/
7. FontAwesome: https://fontawesome.com/
8. Fullcalendar: https://fullcalendar.io/
9. Flatpickr: https://flatpickr.js.org/
10. Highlight.js: https://highlightjs.org/
11. Iconify: https://icon-sets.iconify.design/
12. jsvectormap: https://github.com/themustafaomar/jsvectormap
13. lity: https://sorgalla.com/lity/
14. masonry: https://masonry.desandro.com/
15. moment: http://momentjs.com/
16. Perfect Scrollbar: https://perfectscrollbar.com/
17. Picmo: https://picmojs.com/
18. PhotoSwipe: https://photoswipe.com/
19. Popper.js: https://popper.js.org/
20. Quill: https://quilljs.com/
21. Svelte: https://svelte.dev/
22. Svelte Select: https://github.com/rob-balfre/svelte-select
23. Svelte Color Picker: https://github.com/efeskucuk/svelte-color-picker
24. Svelte Tags Input: https://svelte-tags-input.vercel.app/

Photos

1. Unsplash: https://unsplash.com/
2. Freepik: https://www.freepik.com/