Page

Toggle expand page for responsive purpose

Usage

The page component is used in combination with the sidebar component. It can be toggle expanded fit the sidebar via expand props. Page component also can expand automatically if certain breakpoint condition have been met. There are at least 4 breakpoints available, namely all, lg, md and sm.

Please resize the browser to see the demo works.

Basic Usage

• Dashboard
• Documents
• Contacts

Menu

A wonderful serenity has taken possession

My entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was a greater artist than now. When, while the lovely valley teems with vapour around me, and the meridian sun strikes the upper surface of the impenetrable foliage of my trees, and but a few stray gleams steal into the inner sanctuary, I throw myself down among the tall grass by the trickling stream; and, as I lie close to the earth, a thousand unknown plants are noticed by me: when I hear the buzz of the little world among the stalks, and grow familiar with the countless indescribable forms of the insects and flies, then I feel the presence of the Almighty, who formed us in his own image, and the breath

preview

<script setup>
  import { defineMenu } from '@privyid/persona/core'
  import IconDashboard from '@privyid/persona-icon/vue/dashboard/20.vue'
  import IconDocument from '@privyid/persona-icon/vue/document-filled/20.vue'
  import IconUsers from '@privyid/persona-icon/vue/user-groups/20.vue'
  import IconMenu from '@privyid/persona-icon/vue/menu-burger/20.vue'

  const model = ref(false)

  const menu = defineMenu([
    {
      items: [
        {
          name : 'dashboard',
          label: 'Dashboard',
          url  : '/',
          icon : IconDashboard
        },
        {
          name : 'documents',
          label: 'Documents',
          url  : '/',
          icon : IconDocument
        },
        {
          name : 'contacts',
          label: 'Contacts',
          url  : '/',
          icon : IconUsers
        }
      ]
    },
  ])
</script>

<template>
  <p-sidebar-menu :menus="menu" fixed toggleable="lg" v-model="model">
    <p-sidebar-brand>
      <img src="/assets/images/logo-privy.svg" alt="" />
    </p-sidebar-brand>
  </p-sidebar-menu>
  <p-page expand="lg" v-model="model">
    <div class="visible mb-5 lg:invisible">
      <p-checkbox appearance="none" v-model="model">
        <template #default>
          <p-card
            element="div"
            class="p-2 duration-200 ease-in-out hover:shadow-md hover:border-subtle"
            sectioned>
            <span class="flex items-center space-x-2">
              <IconMenu class="text-muted" />
              <span>Menu</span>
            </span>
          </p-card>
        </template>
      </p-checkbox>
    </div>
    <p-heading element="h5" class="mb-5">
      A wonderful serenity has taken possession
    </p-heading>
    <p>
      My <em>entire</em> soul, <small>like</small> these sweet mornings
      of spring <strong>which I enjoy</strong> with my whole heart.
      I am alone...
    </p>
  </p-page>
</template>

Full Width

Now is very simple when need full-width page with toggle-slide sidebar menu. Just give all (to expanded in all breakpoint) in expand props of page component and toggleable props of sidebar component.

• Dashboard
• Documents
• Contacts

Menu

A wonderful serenity has taken possession

My entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was a greater artist than now. When, while the lovely valley teems with vapour around me, and the meridian sun strikes the upper surface of the impenetrable foliage of my trees, and but a few stray gleams steal into the inner sanctuary, I throw myself down among the tall grass by the trickling stream; and, as I lie close to the earth, a thousand unknown plants are noticed by me: when I hear the buzz of the little world among the stalks, and grow familiar with the countless indescribable forms of the insects and flies, then I feel the presence of the Almighty, who formed us in his own image, and the breath

preview

<template>
  <p-sidebar-menu :menus="menu" fixed toggleable="all" v-model="model">
    ...
  </p-sidebar-menu>
  <p-page expand="all" v-model="model">
    <div class="mb-5">
      ...
    </div>
    ...
  </p-page>
</template>

Type Variant

Page component has 2 type variant, wide and narrow. Default type is narrow. The value of page component type variant is negation with sidebar component type variant. When type variant of sidebar is wide, then type variant of page is narrow.

• ENG

Menu

A wonderful serenity has taken possession

My entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was a greater artist than now. When, while the lovely valley teems with vapour around me, and the meridian sun strikes the upper surface of the impenetrable foliage of my trees, and but a few stray gleams steal into the inner sanctuary, I throw myself down among the tall grass by the trickling stream; and, as I lie close to the earth, a thousand unknown plants are noticed by me: when I hear the buzz of the little world among the stalks, and grow familiar with the countless indescribable forms of the insects and flies, then I feel the presence of the Almighty, who formed us in his own image, and the breath

preview

<script setup>
  import { defineMenu } from '@privyid/persona/core'
  import IconDashboard from '@privyid/persona-icon/vue/dashboard/20.vue'
  import IconDocument from '@privyid/persona-icon/vue/document-filled/20.vue'
  import IconUsers from '@privyid/persona-icon/vue/user-groups/20.vue'
  import IconSettings from '@privyid/persona-icon/vue/adjust/20.vue'
  import IconMenu from '@privyid/persona-icon/vue/menu-burger/20.vue'
  import IconEN from '../assets/images/img-flag.svg'

  const model = ref(false)

  const menu = defineMenu([
    {
      items: [
        {
          name: 'dashboard',
          url : '/',
          icon: IconDashboard
        },
        {
          name: 'document',
          url : '/',
          icon: IconDocument
        },
        {
          name: 'users',
          url : '/',
          icon: IconUsers
        }
      ]
    },
    {
      bottom: true,
      items : [
        {
          name: 'settings',
          url : '/',
          icon: IconSettings
        },
        {
          name : 'language',
          label: 'ENG',
          url  : '/',
          icon : IconEN,
        }
      ]
    }
  ])
</script>

<template>
  <p-sidebar-menu :menus="menu" type="narrow" fixed toggleable="lg"
    v-model="model">
    ...
  </p-sidebar-menu>
  <p-page expand="lg" type="wide" v-model="model">
    <div class="visible mb-5 lg:invisible">
      ...
    </div>
    ...
  </p-page>
</template>

Variables

Page use local CSS variables on .page for enhanced real-time customization. The values of variables below are based/depends on sidebar size variant.

--p-page-type-wide: 60px; /** for sidebar type narrow */
--p-page-type-narrow: 230px; /** for sidebar type wide */

API

Props

Props	Type	Default	Description
expand	String	-	Expand page with desired breakpoint lg, md, sm and all
type	String	narrow	Page type, valid value is wide and narrow

Slots

Name	Description
default	Content to place in the Page

Events

Name	Arguments	Description
There no event here