Layout Package

🛠️ Component Overview

Welcome to the Component Overview page! This section provides an in-depth look at the various Layout components included in our package. Each component is designed to enhance your application's user experience by offering consistent and reusable building blocks for authentication flows.

# Available Components

Our package features six primary types of components that facilitate the development of Unauthorized routes:

• Layout Components: Versatile layouts for authorized routes, allowing for different visual arrangements.
• Utilty Stores: Stores that will allow you to configure layout values from different components or pages.
• Breadcrumb Components: Nicelly designed breadcrumb compoenents.
• Sidebar Components: Different types of sidebar components.
• Header Components: A wide configuration range for top heading navigation.
• Footer Components: Different styles of footer navigation components.

Additionally, each component is equipped with multiple slots, making it straightforward to customize and adapt the components to your specific application needs.

These components are directly connected to the layout.yml, header.yml, sidebar.yml, hamburger.yml, and footer.yml files, allowing you to configure various settings, including layout options and component behavior.

# Layout Components

# AppLayout

The <AppLayout> component serves as a foundational wrapper for your authorized routes, reshaping the screen to enhance user interaction without cluttering the screen with additional elements. It should be implemented in the +layout.svelte file of your (app)|(authorized) route group.

# Slots

• header: This slot is for the header section and header navigation section of the layout.
• hamburger-icon: This slot is for the hambuger menu icon, which by default is 3 horizontal lines
• hamburger-drawer: This slot is for the drawer component, which by default is a Drawer component from Flowbite-Svelte
• hamburger: This slot is for the hamburger menu, which by default is a button that will open the drawer.
• before-logo: This slot is responsible for displaying anything on the left side of the logo, which by default is nothing.
• logo: This slot is responsible for displaying project's logo.
• after-logo: This slot is responsible for displaying anything on the right side of the logo, which by default is nothing.
• center: This slot is responsible for displaying anything on the center of the header component, which by default is nothing.
• right: This slot is responsible for displaying anything on the right of the header component, which by default is the profile button.
• sub-header: This slot is responsible for displaying the subHeader component.
• subheader-left-side: This slot is responsible for displaying anything on the left side of the subHeader component, which by default is the title and the description.
• subheader-title: This slot is responsible for displaying the subHeader title.
• subheader-description: This slot is responsible for displaying the subHeader description.
• subheader-right-side: This slot is responsible for displaying anything on the right side of the subHeader component, which by default is nothing.
• header-navigation: This slot is responsible for displaying the header navigation. which by default is the header navigation component.
• header-navigation-list: This slot is responsible for displaying the header navigation list items.
• header-navigation-extra-info: This slot is responsible for displaying extra information on the header navigation component.
• sidebar: This slot is responsible for displaying the sidebar component.
• app-sidebar-left-minimal-top: This slot is responsible for displaying extra information on the top of the left minimal sidebar items component.
• app-sidebar-left-minimal-bottom: This slot is responsible for displaying extra information on the bottom of the left minimal sidebar items component.
• app-sidebar-left-minimal-center: This slot is responsible for displaying extra information on the center of the left minimal sidebar items component.
• app-sidebar-left-default-top: This slot is responsible for displaying extra information on the top of the left default sidebar items component.
• app-sidebar-left-default-bottom: This slot is responsible for displaying extra information on the bottom of the left default sidebar items component.
• app-sidebar-left-default-center: This slot is responsible for displaying extra information on the center of the left default sidebar items component.
• app-sidebar-left-detailed-top: This slot is responsible for displaying extra information on the top of the left detailed sidebar items component.
• app-sidebar-left-detailed-bottom: This slot is responsible for displaying extra information on the bottom of the left detailed sidebar items component.
• app-sidebar-left-detailed-center: This slot is responsible for displaying extra information on the center of the left detailed sidebar items component.
• app-sidebar-right-minimal-top: This slot is responsible for displaying extra information on the top of the right minimal sidebar items component.
• app-sidebar-right-minimal-bottom: This slot is responsible for displaying extra information on the bottom of the right minimal sidebar items component.
• app-sidebar-right-minimal-center: This slot is responsible for displaying extra information on the center of the right minimal sidebar items component.
• app-sidebar-right-default-top: This slot is responsible for displaying extra information on the top of the right default sidebar items component.
• app-sidebar-right-default-bottom: This slot is responsible for displaying extra information on the bottom of the right default sidebar items component.
• app-sidebar-right-default-center: This slot is responsible for displaying extra information on the center of the right default sidebar items component.
• app-sidebar-right-detailed-top: This slot is responsible for displaying extra information on the top of the right detailed sidebar items component.
• app-sidebar-right-detailed-bottom: This slot is responsible for displaying extra information on the bottom of the right detailed sidebar items component.
• app-sidebar-right-detailed-center: This slot is responsible for displaying extra information on the center of the right detailed sidebar items component.
• footer: This slot is responsible for displaying the footer component.

# Props

# Examples

All of the following examples have the same code on the +layout.svelte file, but they have different configurations in the .yml files.

        <AppLayout>
	<slot />
</AppLayout>

      

        // layout.yml snippet for header layout enabled
// ...

# Global settings
header:
  enabled: true
// ...

      

        // layout.yml snippet for header layout enabled
// ...
display:
  mode: desktop #desktop  #mobile
  navigation: ['sidebar'] #header #sidebar
  spacing:
    header: ''

# Global settings
header:
  enabled: true
// ...

      

        // layout.yml snippet for header layout enabled
// ...
display:
  mode: desktop #desktop  #mobile
  navigation: ['sidebar'] #header #sidebar
  spacing:
    header: ''

# Global settings
header:
  enabled: true
// ...
```.

      

        // layout.yml snippet for header layout enabled
// ...
display:
  mode: desktop #desktop  #mobile
  navigation: ['sidebar'] #header #sidebar
  spacing:
    header: ''

# Global settings
header:
  enabled: true
// ...

      

        // layout.yml snippet for header layout enabled
// ...
# Global settings
header:
  enabled: true
// ...
footer:
  list: ['main']
  enabled: false
  mobile: true
  showTitle: true
// ...

      

        // layout.yml snippet for header layout enabled
// ...
# Global settings
header:
  enabled: true
// ...

// header.yml snippet for hamburger menu enabled
// ...
navigation:
  mobile:
    hamburger:
      icon: 'hamburger'
      hide: 'lg'
      display: true
// ...

      

        // layout.yml snippet for header layout enabled
// ...
display:
  mode: desktop #desktop  #mobile
  navigation: ['header'] #header #sidebar
  spacing:
    header: ''

# Global settings
header:
  enabled: true
// ...

      

# LayoutSettings

The <LayoutSettings> component is a simple component that sets a few css varaibles to your DOM structure, as well as to your local storage.

<LayoutSettings> should be used as a wrapper component in your first +layout.svelte file of your routes folder.

All the <LayoutSettings> components does is it looks at the app.settings.primary_color, and the app.settings.accent_color values, it runs a constrast function and it sets the --settings-text-contrast-primary-color and --settings-text-contrast-accent-color values to be either black or white depending on the contrast with the colors.

# Props

# Implementation Example

        // src/routes/+layout.svelte
<Toaster />
<QueryClientProvider>
	<ApplicationProvider app={configuredApp}>
		<LayoutSettings>
			<slot />
		</LayoutSettings>
	</ApplicationProvider>
</QueryClientProvider>

      

# Utility Stores

We have the following stores available:

• modal store
• breadcrumb store
• subHeader store
• drawer store

# Modal Store

Here's an simple example of a modal store:

          <script lang="ts">
    import { getModalStore, type ModalSettings } from '@tanglemedia/svelte-starter-layout';

    const modalStore = getModalStore();

    const modal: ModalSettings = {
      type: 'alert',
      // Data
      title: 'Log out',
      body: 'Are you sure you want to log out of this app?',
      icon: ['fas', 'circle-exclamation'],
      iconClass: 'text-gray-500',
      buttonTextConfirm: 'Yes',
      // buttonClassConfirm: 'bg-lime-500',
      onSuccess: () => {},
      buttonTextCancel: 'No'
    };

    function showLogoutModal {
      modalStore.trigger(modal);
    }
  </script>

  <button on:click={showLogoutModal}>Log Out</button>

      

# Breadcrumb Store

Here's an simple example of a breadcrumb store:

          <script lang="ts">
    import { getBreadcrumbStore, type BreadcrumbSettings } from '@tanglemedia/svelte-starter-layout';

    const breadcrumbStore = getBreadcrumbStore();

    const breadcrumb: BreadcrumbSettings = {
      value: [
        {
          title: 'Dashboard',
          url: '/dashboard'
        },
        {
          title: 'Add',
          url: '/dashboard/add'
        },
        {
          title: 'Item',
          url: '/dashboard/add/1'
        }
      ]
    };

    onMount(() => {
      breadcrumbStore.set(breadcrumb);
    });

    onDestroy(() => {
      breadcrumbStore.clear();
    });
  </script>

      

# SubHeader Store

Here's an simple example of a subHeader store:

          <script lang="ts">
    import { getSubHeaderStore, type SubHeaderSettings } from '@tanglemedia/svelte-starter-layout';

    const subHeaderStore = getSubHeaderStore();
    const subHeader: SubHeaderSettings = {
      value: {
        title: 'Dashboard'
        // description: subNavbarDescription
      },
      component: SubHeaderComponent,
      position: ''
    };

    onMount(() => {
      subHeaderStore.set(subHeader)
    });

    onDestroy(() => {
      subHeaderStore.clear();
    });
  </script>

      

# Drawer Store

Here's an simple example of a Drawer store:

          <script lang="ts">
    import { getDrawerStore, type DrawerSettings } from '@tanglemedia/svelte-starter-layout';

    const drawerStore = getDrawerStore();
    const drawer: DrawerSettings = {
      value: "open"
    };

    function openDrawer {
      subHeaderStore.set(subHeader)
    };
  </script>

  <button on:click={openDrawer}>Open Side Drawer</button>

      

# ProfileButton

The <ProfileButton> component serves as a ready to use profile button, user information button, and logout button. This component is used by default on the AppHeader component, but if you need to make some customizations around the button or the header component, you might have to pass it manually to the AppLayout respective slot.

# Slots

• lead: This slot is responsible to add elements before the tabs list.
• trail: This slot is responsible to add elements after the tabs list.

# Props

# Examples

All of the following examples have the same code on the +layout.svelte file, but they have different configurations in the .yml files.