App Layout

To keep consistent branding across our applications, you can build your application shell using

• <AppSidebar />
• <AppTopbar />

Basic Usage

marketplacepayments

Company picker slot

Navigation slot

AppSidebar is closed.

<script setup lang="ts">
  import { ref } from 'vue';

  import AppSidebar from '@leaflink/stash-vue/AppSidebar.vue';
  import Button from '@leaflink/stash-vue/Button.vue';
  import ContextSwitcher from '@leaflink/stash-vue/ContextSwitcher.vue';
  import Icon from '@leaflink/stash-vue/Icon.vue';
  import useMediaQuery from '@leaflink/stash-vue/useMediaQuery';

  const isOpen = ref(false);
  const contextSwitcherArgs = {
    portalAccess: {
      commercePortal: true,
      paymentsPortal: false,
    },
    activeApp: 'marketplace',
    limitedAccessUrl: 'join-today-marketplace',
  };
  const isExtraLargeScreen = useMediaQuery('(min-width: 1321px)');
</script>

<template>
  <div
    v-show="isDemoOpen"
    class="bg-white inset-0 fixed z-modal"
    style="transform: scale(1); overflow: hidden;"
  >
    <AppTopbar :sidebar-opened="isOpen" @toggle-sidebar="isOpen = !isOpen">
      <template #actions>
        <div class="p-3 text-right">
          <Button @click="isDemoOpen = false">Exit Demo</Button>
        </div>
      </template>
    </AppTopbar>
    <AppSidebar v-model:is-open="isOpen">
      <template #app-context>
        <ContextSwitcher v-bind="contextSwitcherArgs" />
      </template>
      <template #company-context>
        <div class="p-3 text-white">
          Company picker slot
        </div>
      </template>
      <template #navigation>
        <div class="p-6 text-white">
          Navigation slot
        </div>
      </template>
    </AppSidebar>
    <div class="p-3 text-right">
      <div class="h-20"></div>
      <div v-if="isExtraLargeScreen" style="max-width: 65ch; margin-left: auto;">
        <p>AppSidebar is always open when the screen is at least 1321px wide.</p>
        <p>To view the menu button and animations, shrink the screen width below 1321px.</p>
      </div>
      <p v-else>AppSidebar is {{ isOpen || isExtraLargeScreen ? 'open' : 'closed' }}.</p>
    </div>
  </div>
</template>

The responsibility of showing the mobile or desktop view is left up to the consuming application.

TIP

You can use the useMediaQuery composable to easily listen to screen resizing events, and switch between mobile and desktop

API

See the documentation below for a complete reference to all the props and classes available to the components mentioned here.

• <AppSidebar />
• <AppTopbar />