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

quantum_svelte_v3.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 AppLoader from '$components/app/AppLoader.svelte';
  import AppHeader from '$components/app/AppHeader.svelte';
  import AppSidebar from '$components/app/AppSidebar.svelte';
  import AppTopNav from '$components/app/AppTopNav.svelte';
  import AppFooter from '$components/app/AppFooter.svelte';
  import AppThemePanel from '$components/app/AppThemePanel.svelte';
  import ScrollTopBtn from '$components/app/ScrollTopBtn.svelte';
  import { onMount } from 'svelte';
  import { appOptions } from '$stores/appOptions.js';
  import { appVariables, generateVariables } from '$stores/appVariables.js';
  import { setPageTitle } from '$lib/utils';
  
  onMount(async () => {
    import('bootstrap');
    
    var body = document.querySelector('body');
    if (body) {
      body.classList.add('app-init');
    }
    
    var loader = document.querySelector('#loader');
    if (loader) {
      loader.classList.add('d-none');
    }
    
    document.onscroll = function() {
      var doc = document.documentElement;
      var totalScroll = (window.pageYOffset || doc.scrollTop)  - (doc.clientTop || 0);
      var elm = document.querySelectorAll('.app')[0];
      
      if (elm) {
        if (totalScroll > 0) {
          $appOptions.appHasScroll = true;
        } else {
          $appOptions.appHasScroll = false;
        }
      }
    };
    
    $appVariables = generateVariables();
  });
</script>

<AppLoader />

<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}
  class:app-has-scroll={$appOptions.appHasScroll}
>
  {#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}
  
  <ScrollTopBtn />
</div>

List of components inside the components folder

/src/components/
├── app/
│   ├── AppFooter.svelte
│   ├── AppHeader.svelte
│   ├── AppSidebar.svelte
│   ├── AppThemePanel.svelte
│   ├── AppTopNav.svelte
│   ├── NavScrollTo.svelte
│   └── ScrollTopBtn.svelte
├── bootstrap/
│   ├── Card.svelte
│   ├── CardBody.svelte
│   ├── CardCollapseToggler.svelte
│   ├── CardExpandToggler.svelte
│   ├── CardFooter.svelte
│   ├── CardGroup.svelte
│   ├── CardHeader.svelte
│   ├── CardHeaderBtn.svelte
│   ├── CardImgOverlay.svelte
│   └── CardRemoveToggler.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;
    $appOptions.appVh100 = 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.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': 'ph:rocket-duotone',
  'text': 'DASHBOARD'
},

// multi level structure 
{
  'icon': 'ph:envelope-duotone',
  '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 84
$theme:        $teal !default;

To enable RTL mode, follow these steps:

1. Navigate to the /src/scss/_variables.scss file in your code editor.
2. Find the $enable-rtl variable and change its value to true:

   $enable-rtl: true;
   

   This will enable RTL mode for your application.

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

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

//usage 
<script>
  import Card from '$components/bootstrap/Card.svelte';
  import CardHeader from '$components/bootstrap/CardHeader.svelte';
  import CardHeaderBtn from '$components/bootstrap/CardHeaderBtn.svelte';
  import CardBody from '$components/bootstrap/CardBody.svelte';
</script>

<Card>
  <CardHeader class="with-btn">
    ...
    <CardHeaderBtn />
  </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. Bootstrap: http://getbootstrap.com/
3. Bootstrap Icons: https://icons.getbootstrap.com/
4. Chart.js: https://chartjs.org
5. Datatables: https://datatables.net/
6. FontAwesome: https://fontawesome.com/
7. Fullcalendar: https://fullcalendar.io/
8. Flatpickr: https://flatpickr.js.org/
9. Highlight.js: https://highlightjs.org/
10. Iconify: https://icon-sets.iconify.design/
11. jsvectormap: https://github.com/themustafaomar/jsvectormap
12. lity: https://sorgalla.com/lity/
13. masonry: https://masonry.desandro.com/
14. moment: http://momentjs.com/
15. Perfect Scrollbar: https://perfectscrollbar.com/
16. Picmo: https://picmojs.com/
17. PhotoSwipe: https://photoswipe.com/
18. Popper.js: https://popper.js.org/
19. Quill: https://quilljs.com/
20. Svelte: https://svelte.dev/
21. Svelte Select: https://github.com/rob-balfre/svelte-select
22. Svelte Color Picker: https://github.com/efeskucuk/svelte-color-picker
23. Svelte Tags Input: https://svelte-tags-input.vercel.app/

Photos

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