javascript/muse-vue-ant-design-dashboard
1
0
Fork 0
mirror of https://github.com/creativetimofficial/muse-vue-ant-design-dashboard.git synced 2025-08-16 11:31:10 +08:00
Code Issues Packages Projects Releases Wiki Activity
Files
muse-vue-ant-design-dashboard/docs/pages/layout/layout.vue
dragosct 1209b09ef0 refactor: title
2021-07-23 20:26:31 +03:00

910 lines
48 KiB
Vue
Raw Blame History

<template>
<div>
<div class="page-row">
<div class="page-content">
<section class="mb-24">
<h1>Layout</h1>
<p class="text-dark">
Handling the overall layout of a page.
</p>
</section>
<a-divider />
<section class="mb-24" id="Specification">
<h2>Specification</h2>
</section>
<section class="mb-24">
<h3>Size</h3>
<p>
The first level navigation is inclined left near a logo, and the secondary menu is inclined right.
</p>
<ul>
<li>Top Navigation (almost systems): the height of the first level navigation <code>64px</code>, the second level navigation <code>48px</code>.</li>
<li>Top Navigation(contents page): the height of the first level navigation <code>80px</code>, the second level navigation <code>56px</code>.</li>
<li>Calculation formula of a top navigation: <code>48+8n</code>.</li>
<li>Calculation formula of an aside navigation: <code>200+8n</code>.</li>
</ul>
</section>
<section class="mb-24">
<p class="font-semibold mb-24">
For more specifications Please check the
<a target="_blank" href="https://antdv.com/components/layout/">official docs</a>.
</p>
</section>
<h2>Examples</h2>
<section class="mb-24" id="Dashboard-Layout">
<a-divider orientation="left">Dashboard Layout</a-divider>
<p>Here is the dashboard layout.</p>
<div class="showcase">
<div id="components-layout-demo-basic">
<section class="ant-layouts ant-layout-has-siders" data-v-a1ccd506="">
<aside class="ant-layout-siders ant-layout-sider-darks" style="flex: 0 0 200px; max-width: 200px; min-width: 200px; width: 200px;">
<div class="ant-layout-sider-childrens">Sider</div>
</aside>
<section class="ant-layouts">
<header class="ant-layout-headers">Header</header>
<main class="ant-layout-contents">Content</main>
<footer class="ant-layout-footers">Footer</footer>
</section>
</section>
</div>
</div>
<muse-snippet :code="dashboardLayoutCode"></muse-snippet>
</section>
<section class="mb-24" id="Authentication-Layout">
<a-divider orientation="left">Authentication Layout</a-divider>
<p>Here is the default layout used on authentication pages.</p>
<div class="showcase">
<div id="components-layout-demo-authentication">
<section class="ant-layouts" data-v-a1ccd506="">
<header class="ant-layout-headers">Header</header>
<main class="ant-layout-contents">Content</main>
<footer class="ant-layout-footers">Footer</footer>
</section>
</div>
</div>
<muse-snippet :code="defaultLayoutCode"></muse-snippet>
</section>
<p class="text-right font-semibold mb-24">
Looking for more Ant Design Vue Layout? Please check the
<a target="_blank" href="https://antdv.com/components/layout/">official docs</a>.
</p>
</div>
<muse-anchor :anchors="anchors"></muse-anchor>
</div>
</div>
</template>
<script>
export default {
head () {
return {
title: 'Layout | Muse Vue Ant Design Dashboard @ Creative Tim',
meta: [
{ hid: 'description', name: 'description', content: 'Handling the overall layout of a page.' }
]
}
},
data(){
return {
anchors: {
"Specification": "Specification",
"Dashboard-Layout": "Dashboard Layout",
"Authentication-Layout": "Authentication Layout",
},
dashboardLayoutCode: `
<!--
This is the dashboard layout, used in dashboard, tables, billing and profile pages.
-->
<template>
<div>
<!-- Dashboard Layout -->
<a-layout class="layout-dashboard" id="layout-dashboard" :class="[navbarFixed ? 'navbar-fixed' : '', ! sidebarCollapsed ? 'has-sidebar' : '', layoutClass]">
<!-- Main Sidebar -->
<a-layout-sider
collapsible
class="sider-primary"
breakpoint="lg"
collapsed-width="0"
width="250px"
v-model="sidebarCollapsed"
:trigger="null"
:class="['ant-layout-sider-' + sidebarColor, 'ant-layout-sider-' + sidebarTheme]"
theme="light"
:style="{ backgroundColor: 'transparent',}">
<div class="brand"><img src="~@/assets/logo-ct-black.png" alt=""> <span>Muse Dashboard</span></div>
<hr>
<!-- Sidebar Navigation Menu -->
<a-menu theme="light" mode="inline">
<a-menu-item>
<router-link to="/dashboard">
<span class="icon">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3 4C3 3.44772 3.44772 3 4 3H16C16.5523 3 17 3.44772 17 4V6C17 6.55228 16.5523 7 16 7H4C3.44772 7 3 6.55228 3 6V4Z" fill="#111827"/>
<path d="M3 10C3 9.44771 3.44772 9 4 9H10C10.5523 9 11 9.44771 11 10V16C11 16.5523 10.5523 17 10 17H4C3.44772 17 3 16.5523 3 16V10Z" fill="#111827"/>
<path d="M14 9C13.4477 9 13 9.44771 13 10V16C13 16.5523 13.4477 17 14 17H16C16.5523 17 17 16.5523 17 16V10C17 9.44771 16.5523 9 16 9H14Z" fill="#111827"/>
</svg>
</span>
<span class="label">Dashboard</span>
</router-link>
</a-menu-item>
<a-menu-item>
<router-link to="/tables">
<span class="icon">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9 2C8.44772 2 8 2.44772 8 3C8 3.55228 8.44772 4 9 4H11C11.5523 4 12 3.55228 12 3C12 2.44772 11.5523 2 11 2H9Z" fill="#111827"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M4 5C4 3.89543 4.89543 3 6 3C6 4.65685 7.34315 6 9 6H11C12.6569 6 14 4.65685 14 3C15.1046 3 16 3.89543 16 5V16C16 17.1046 15.1046 18 14 18H6C4.89543 18 4 17.1046 4 16V5ZM7 9C6.44772 9 6 9.44772 6 10C6 10.5523 6.44772 11 7 11H7.01C7.56228 11 8.01 10.5523 8.01 10C8.01 9.44772 7.56228 9 7.01 9H7ZM10 9C9.44772 9 9 9.44772 9 10C9 10.5523 9.44772 11 10 11H13C13.5523 11 14 10.5523 14 10C14 9.44772 13.5523 9 13 9H10ZM7 13C6.44772 13 6 13.4477 6 14C6 14.5523 6.44772 15 7 15H7.01C7.56228 15 8.01 14.5523 8.01 14C8.01 13.4477 7.56228 13 7.01 13H7ZM10 13C9.44772 13 9 13.4477 9 14C9 14.5523 9.44772 15 10 15H13C13.5523 15 14 14.5523 14 14C14 13.4477 13.5523 13 13 13H10Z" fill="#111827"/>
</svg>
</span>
<span class="label">Tables</span>
</router-link>
</a-menu-item>
<a-menu-item>
<router-link to="/billing">
<span class="icon">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4 4C2.89543 4 2 4.89543 2 6V7H18V6C18 4.89543 17.1046 4 16 4H4Z" fill="#111827"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M18 9H2V14C2 15.1046 2.89543 16 4 16H16C17.1046 16 18 15.1046 18 14V9ZM4 13C4 12.4477 4.44772 12 5 12H6C6.55228 12 7 12.4477 7 13C7 13.5523 6.55228 14 6 14H5C4.44772 14 4 13.5523 4 13ZM9 12C8.44772 12 8 12.4477 8 13C8 13.5523 8.44772 14 9 14H10C10.5523 14 11 13.5523 11 13C11 12.4477 10.5523 12 10 12H9Z" fill="#111827"/>
</svg>
</span>
<span class="label">Billing</span>
</router-link>
</a-menu-item>
<a-menu-item>
<router-link to="/rtl">
<span class="icon">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M3 6C3 4.34315 4.34315 3 6 3H16C16.3788 3 16.725 3.214 16.8944 3.55279C17.0638 3.89157 17.0273 4.29698 16.8 4.6L14.25 8L16.8 11.4C17.0273 11.703 17.0638 12.1084 16.8944 12.4472C16.725 12.786 16.3788 13 16 13H6C5.44772 13 5 13.4477 5 14V17C5 17.5523 4.55228 18 4 18C3.44772 18 3 17.5523 3 17V6Z" fill="#111827"/>
</svg>
</span>
<span class="label">RTL</span>
</router-link>
</a-menu-item>
<a-menu-item class="menu-item-header">
Account Pages
</a-menu-item>
<a-menu-item>
<router-link to="/profile">
<span class="icon">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10ZM12 7C12 8.10457 11.1046 9 10 9C8.89543 9 8 8.10457 8 7C8 5.89543 8.89543 5 10 5C11.1046 5 12 5.89543 12 7ZM9.99993 11C7.98239 11 6.24394 12.195 5.45374 13.9157C6.55403 15.192 8.18265 16 9.99998 16C11.8173 16 13.4459 15.1921 14.5462 13.9158C13.756 12.195 12.0175 11 9.99993 11Z" fill="#111827"/>
</svg>
</span>
<span class="label">Profile</span>
</router-link>
</a-menu-item>
<a-menu-item>
<router-link to="/sign-in">
<span class="icon">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M6 2C5.44772 2 5 2.44772 5 3V4H4C2.89543 4 2 4.89543 2 6V16C2 17.1046 2.89543 18 4 18H16C17.1046 18 18 17.1046 18 16V6C18 4.89543 17.1046 4 16 4H15V3C15 2.44772 14.5523 2 14 2C13.4477 2 13 2.44772 13 3V4H7V3C7 2.44772 6.55228 2 6 2ZM6 7C5.44772 7 5 7.44772 5 8C5 8.55228 5.44772 9 6 9H14C14.5523 9 15 8.55228 15 8C15 7.44772 14.5523 7 14 7H6Z" fill="#111827"/>
</svg>
</span>
<span class="label">Sign In</span>
</router-link>
</a-menu-item>
<a-menu-item>
<router-link to="/sign-up">
<span class="icon">
<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>duplicate</title>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Tables" transform="translate(-58.000000, -507.000000)" fill="#BFBFBF" fill-rule="nonzero">
<g id="sidebar" transform="translate(33.000000, 43.000000)">
<g id="sign-up" transform="translate(16.000000, 455.000000)">
<g id="duplicate" transform="translate(9.000000, 9.000000)">
<path d="M4,6 C4,4.89543 4.89543,4 6,4 L12,4 C13.1046,4 14,4.89543 14,6 L14,12 C14,13.1046 13.1046,14 12,14 L6,14 C4.89543,14 4,13.1046 4,12 L4,6 Z" id="Path"></path>
<path d="M2,0 C0.89543,0 0,0.89543 0,2 L0,8 C0,9.1046 0.89543,10 2,10 L2,4 C2,2.8954305 2.8954305,2 4,2 L10,2 L10,2 C10,0.89543 9.1046,0 8,0 L2,0 Z" id="Path"></path>
</g>
</g>
</g>
</g>
</g>
</svg>
</span>
<span class="label">Sign Up</span>
</router-link>
</a-menu-item>
</a-menu>
<!-- / Sidebar Navigation Menu -->
<!-- Sidebar's Fixed Footer -->
<a-affix :offset-top="top">
<!-- Sidebar Footer -->
<div class="aside-footer">
<div class="footer-box">
<span class="icon">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3 4C3 3.44772 3.44772 3 4 3H16C16.5523 3 17 3.44772 17 4V6C17 6.55228 16.5523 7 16 7H4C3.44772 7 3 6.55228 3 6V4Z" fill="#111827"/>
<path d="M3 10C3 9.44771 3.44772 9 4 9H10C10.5523 9 11 9.44771 11 10V16C11 16.5523 10.5523 17 10 17H4C3.44772 17 3 16.5523 3 16V10Z" fill="#111827"/>
<path d="M14 9C13.4477 9 13 9.44771 13 10V16C13 16.5523 13.4477 17 14 17H16C16.5523 17 17 16.5523 17 16V10C17 9.44771 16.5523 9 16 9H14Z" fill="#111827"/>
</svg>
</span>
<h6>Need Help?</h6>
<p>Please check our docs</p>
<a-button type="primary" block size="small">
DOCUMENTATION
</a-button>
</div>
</div>
<!-- / Sidebar Footer -->
</a-affix>
<!-- / Sidebar's Fixed Footer -->
</a-layout-sider>
<!-- / Main Sidebar -->
<!-- Layout Content -->
<a-layout>
<!-- Layout Header's Conditionally Fixed Wrapper -->
<component :is="navbarFixed ? 'a-affix' : 'div'" :offset-top="top">
<!-- Layout Header -->
<a-layout-header>
<a-row type="flex">
<!-- Header Breadcrumbs & Title Column -->
<a-col :span="24" :md="6">
<!-- Header Breadcrumbs -->
<a-breadcrumb>
<a-breadcrumb-item><router-link to="/"> Pages</router-link></a-breadcrumb-item>
<a-breadcrumb-item>{{ this.$route.name }}</a-breadcrumb-item>
</a-breadcrumb>
<!-- / Header Breadcrumbs -->
<!-- Header Page Title -->
<div class="ant-page-header-heading">
<span class="ant-page-header-heading-title">{{ this.$route.name }}</span>
</div>
<!-- / Header Page Title -->
</a-col>
<!-- / Header Breadcrumbs & Title Column -->
<!-- Header Control Column -->
<a-col :span="24" :md="18" class="header-control">
<!-- Header Control Buttons -->
<a-dropdown :trigger="['click']" overlayClassName="header-notifications-dropdown" :getPopupContainer="() => wrapper">
<a-badge count="4">
<a class="ant-dropdown-link" @click="e => e.preventDefault()">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10 2C6.68632 2 4.00003 4.68629 4.00003 8V11.5858L3.29292 12.2929C3.00692 12.5789 2.92137 13.009 3.07615 13.3827C3.23093 13.7564 3.59557 14 4.00003 14H16C16.4045 14 16.7691 13.7564 16.9239 13.3827C17.0787 13.009 16.9931 12.5789 16.7071 12.2929L16 11.5858V8C16 4.68629 13.3137 2 10 2Z" fill="#111827"/>
<path d="M10 18C8.34315 18 7 16.6569 7 15H13C13 16.6569 11.6569 18 10 18Z" fill="#111827"/>
</svg>
</a>
</a-badge>
<a-list item-layout="horizontal" class="header-notifications-list" :data-source="notificationsData" slot="overlay">
<a-list-item slot="renderItem" slot-scope="item">
<a-list-item-meta>
<template #description>
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 18C14.4183 18 18 14.4183 18 10C18 5.58172 14.4183 2 10 2C5.58172 2 2 5.58172 2 10C2 14.4183 5.58172 18 10 18ZM11 6C11 5.44772 10.5523 5 10 5C9.44772 5 9 5.44772 9 6V10C9 10.2652 9.10536 10.5196 9.29289 10.7071L12.1213 13.5355C12.5118 13.9261 13.145 13.9261 13.5355 13.5355C13.9261 13.145 13.9261 12.5118 13.5355 12.1213L11 9.58579V6Z" fill="#111827"/>
</svg>
<span>{{ item.time }}</span>
</template>
<a slot="title" href="#">{{ item.title }}</a>
<a-avatar v-if="item.img"
slot="avatar"
shape="square"
:src="item.img"
/>
<a-avatar v-else
shape="square"
slot="avatar" v-html="item.svg"/>
</a-list-item-meta>
</a-list-item>
</a-list>
</a-dropdown>
<a-button type="link" ref="secondarySidebarTriggerBtn" @click="showSettingsDrawer = true">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.4892 3.17094C11.1102 1.60969 8.8898 1.60969 8.51078 3.17094C8.26594 4.17949 7.11045 4.65811 6.22416 4.11809C4.85218 3.28212 3.28212 4.85218 4.11809 6.22416C4.65811 7.11045 4.17949 8.26593 3.17094 8.51078C1.60969 8.8898 1.60969 11.1102 3.17094 11.4892C4.17949 11.7341 4.65811 12.8896 4.11809 13.7758C3.28212 15.1478 4.85218 16.7179 6.22417 15.8819C7.11045 15.3419 8.26594 15.8205 8.51078 16.8291C8.8898 18.3903 11.1102 18.3903 11.4892 16.8291C11.7341 15.8205 12.8896 15.3419 13.7758 15.8819C15.1478 16.7179 16.7179 15.1478 15.8819 13.7758C15.3419 12.8896 15.8205 11.7341 16.8291 11.4892C18.3903 11.1102 18.3903 8.8898 16.8291 8.51078C15.8205 8.26593 15.3419 7.11045 15.8819 6.22416C16.7179 4.85218 15.1478 3.28212 13.7758 4.11809C12.8896 4.65811 11.7341 4.17949 11.4892 3.17094ZM10 13C11.6569 13 13 11.6569 13 10C13 8.34315 11.6569 7 10 7C8.34315 7 7 8.34315 7 10C7 11.6569 8.34315 13 10 13Z" fill="#111827"/>
</svg>
</a-button>
<a-button type="link" class="sidebar-toggler" @click="sidebarCollapsed = ! sidebarCollapsed, resizeEventHandler()">
<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"/></svg>
</a-button>
<router-link to="/sign-in" class="btn-sign-in" @click="e => e.preventDefault()">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10ZM12 7C12 8.10457 11.1046 9 10 9C8.89543 9 8 8.10457 8 7C8 5.89543 8.89543 5 10 5C11.1046 5 12 5.89543 12 7ZM9.99993 11C7.98239 11 6.24394 12.195 5.45374 13.9157C6.55403 15.192 8.18265 16 9.99998 16C11.8173 16 13.4459 15.1921 14.5462 13.9158C13.756 12.195 12.0175 11 9.99993 11Z" fill="#111827"/>
</svg>
<span>Sign In</span>
</router-link>
<!-- / Header Control Buttons -->
<!-- Header Search Input -->
<a-input-search class="header-search" :class="searchLoading ? 'loading' : ''" placeholder="Type here…" @search="onSearch" :loading='searchLoading'>
<svg slot="prefix" width="16" height="16" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8 4C5.79086 4 4 5.79086 4 8C4 10.2091 5.79086 12 8 12C10.2091 12 12 10.2091 12 8C12 5.79086 10.2091 4 8 4ZM2 8C2 4.68629 4.68629 2 8 2C11.3137 2 14 4.68629 14 8C14 9.29583 13.5892 10.4957 12.8907 11.4765L17.7071 16.2929C18.0976 16.6834 18.0976 17.3166 17.7071 17.7071C17.3166 18.0976 16.6834 18.0976 16.2929 17.7071L11.4765 12.8907C10.4957 13.5892 9.29583 14 8 14C4.68629 14 2 11.3137 2 8Z" fill="#111827"/>
</svg>
</a-input-search>
<!-- / Header Search Input -->
</a-col>
<!-- / Header Control Column -->
</a-row>
</a-layout-header>
<!-- /Layout Header -->
</component>
<!-- / Layout Header's Conditionally Fixed Wrapper -->
<!-- Page Content -->
<a-layout-content>
<router-view />
</a-layout-content>
<!-- / Page Content -->
<!-- Layout Footer -->
<a-layout-footer>
<a-row type="flex">
<a-col :span="24" :md="12">
<!-- Footer Copyright Notice -->
<p class="copyright">
© 2021, made with
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M3.17157 5.17157C4.73367 3.60948 7.26633 3.60948 8.82843 5.17157L10 6.34315L11.1716 5.17157C12.7337 3.60948 15.2663 3.60948 16.8284 5.17157C18.3905 6.73367 18.3905 9.26633 16.8284 10.8284L10 17.6569L3.17157 10.8284C1.60948 9.26633 1.60948 6.73367 3.17157 5.17157Z" fill="#111827"/>
</svg>
by <a href="https://creative-tim.com">Creative Tim</a> for a better web.
</p>
<!-- / Footer Copyright Notice -->
</a-col>
<a-col :span="24" :md="12" class="footer-control">
<!-- Footer Navigation Menu -->
<a-menu mode="horizontal">
<a-menu-item>Creative Tim</a-menu-item>
<a-menu-item>About Us</a-menu-item>
<a-menu-item>Blog</a-menu-item>
<a-menu-item>License</a-menu-item>
</a-menu>
<!-- / Footer Navigation Menu -->
</a-col>
</a-row>
</a-layout-footer>
<!-- / Layout Footer -->
<!-- Sidebar Overlay -->
<div class="sidebar-overlay" @click="sidebarCollapsed = true" v-show="! sidebarCollapsed"></div>
<!-- / Sidebar Overlay -->
</a-layout>
<!-- / Layout Content -->
<!-- Settings Drawer -->
<a-drawer
class="settings-drawer"
placement="right"
:closable="false"
:visible="showSettingsDrawer"
width="360"
:getContainer="() => wrapper"
@close="showSettingsDrawer = false"
>
<!-- Settings Drawer Close Button -->
<a-button type="link" class="btn-close" @click="showSettingsDrawer = false">
<svg xmlns="http://www.w3.org/2000/svg" width="9" height="9" viewBox="0 0 9 9">
<g id="close" transform="translate(0.75 0.75)">
<path id="Path" d="M7.5,0,0,7.5" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"/>
<path id="Path-2" data-name="Path" d="M0,0,7.5,7.5" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"/>
</g>
</svg>
</a-button>
<!-- / Settings Drawer Close Button -->
<!-- Settings Drawer Content -->
<div class="drawer-content">
<h6>Configurator</h6>
<p>See our dashboard options.</p>
<hr>
<div class="sidebar-color">
<h6>Sidebar Color</h6>
<a-radio-group v-model="sidebarColor" defaultValue="primary">
<a-radio-button value="primary" class="bg-primary"></a-radio-button>
<a-radio-button value="secondary" class="bg-secondary"></a-radio-button>
<a-radio-button value="success" class="bg-success"></a-radio-button>
<a-radio-button value="danger" class="bg-danger"></a-radio-button>
<a-radio-button value="warning" class="bg-warning"></a-radio-button>
<a-radio-button value="black" class="bg-dark"></a-radio-button>
</a-radio-group>
</div>
<div class="sidenav-type">
<h6>Sidenav Type</h6>
<p>Choose between 2 different sidenav types.</p>
<a-radio-group button-style="solid" v-model="sidebarTheme" defaultValue="primary">
<a-radio-button value="light">TRANSPARENT</a-radio-button>
<a-radio-button value="white">WHITE</a-radio-button>
</a-radio-group>
</div>
<div class="navbar-fixed">
<h6>Navbar Fixed</h6>
<a-switch default-checked v-model="navbarFixed" />
</div>
<div class="download">
<a-button type="dark" size="small" block>FREE DOWNLOAD</a-button>
<a-button type="secondary" size="small" block>VIEW DOCUMENTATION</a-button>
</div>
<div class="github-stars">
<a-button-group>
<a-button size="small">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 576 512"><path d="M528.1 171.5L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6zM388.6 312.3l23.7 138.4L288 385.4l-124.3 65.3 23.7-138.4-100.6-98 139-20.2 62.2-126 62.2 126 139 20.2-100.6 98z"/></svg>
Star
</a-button>
<a-button size="small">
179
</a-button>
</a-button-group>
</div>
<div class="sharing">
<h6>Thank you for sharing!</h6>
<div class="share-links">
<a-button type="dark" size="small">
<svg width="15px" height="15px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"/></svg>
TWEET
</a-button>
<a-button type="dark" size="small">
<svg width="15px" height="15px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M503.691 189.836L327.687 37.851C312.281 24.546 288 35.347 288 56.015v80.053C127.371 137.907 0 170.1 0 322.326c0 61.441 39.581 122.309 83.333 154.132 13.653 9.931 33.111-2.533 28.077-18.631C66.066 312.814 132.917 274.316 288 272.085V360c0 20.7 24.3 31.453 39.687 18.164l176.004-152c11.071-9.562 11.086-26.753 0-36.328z"/></svg>
SHARE
</a-button>
</div>
</div>
</div>
<!-- / Settings Drawer Content -->
</a-drawer>
<!-- / Settings Drawer -->
</a-layout>
<!-- / Dashboard Layout -->
</div>
</template>
<script>
const notificationsData = [
{
title: 'New message from Sophie',
img: '/images/face-1.jpg',
time: '13 minutes ago',
},
{
title: 'New album by Travis Scott',
svg: \`<svg width="20" height="20" viewBox="0 0 107 107" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>logo-spotify</title>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="logo-spotify" fill="#2EBD59" fill-rule="nonzero">
<path d="M53.5,0 C23.9517912,0 0,23.9517912 0,53.5 C0,83.0482088 23.9517912,107 53.5,107 C83.0482088,107 107,83.0482088 107,53.5 C107,23.9554418 83.0482088,0.00365063118 53.5,0 Z M78.0358922,77.1597407 C77.0757762,78.7368134 75.0204708,79.2296486 73.4506994,78.2695326 C60.8888775,70.5922552 45.0743432,68.8582054 26.4524736,73.1111907 C24.656363,73.523712 22.8675537,72.3993176 22.458683,70.6032071 C22.0461617,68.8070966 23.1669055,67.0182873 24.9666667,66.6094166 C45.3444899,61.9548618 62.8273627,63.9590583 76.9297509,72.5745479 C78.4995223,73.5419652 78.9996588,75.5899693 78.0358922,77.1597407 L78.0358922,77.1597407 Z M84.5814739,62.5973729 C83.373115,64.5614125 80.8030706,65.1747185 78.8426817,63.9700102 C64.4664961,55.1318321 42.5408052,52.5727397 25.5325145,57.7347322 C23.3275333,58.4027977 20.9984306,57.1579324 20.3267144,54.9566018 C19.6622996,52.7516206 20.9071648,50.4261685 23.1084954,49.7544524 C42.5371546,43.858683 66.6933811,46.7134766 83.2051859,56.8622313 C85.1692255,58.0705902 85.7898328,60.636984 84.5814739,62.5973729 Z M85.1436711,47.4253497 C67.8980894,37.1853292 39.4523712,36.2434664 22.9880246,41.2375299 C20.3449676,42.0406687 17.5485841,40.5475606 16.7490959,37.9045036 C15.9496076,35.2614466 17.4390652,32.4650631 20.0857728,31.6619243 C38.9850904,25.9267827 70.3987718,27.0329239 90.2509041,38.8171614 C92.627465,40.2299556 93.4087001,43.3001365 91.9995565,45.6730467 C90.5940635,48.0532583 87.5165814,48.838144 85.1436711,47.4253497 Z" id="Shape"></path>
</g>
</g>
</svg>\`,
time: '1 day ago',
},
{
title: 'Payment completed',
svg: \`<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill="#1890FF" d="M4 4C2.89543 4 2 4.89543 2 6V7H18V6C18 4.89543 17.1046 4 16 4H4Z"/>
<path fill="#1890FF" fill-rule="evenodd" clip-rule="evenodd" d="M18 9H2V14C2 15.1046 2.89543 16 4 16H16C17.1046 16 18 15.1046 18 14V9ZM4 13C4 12.4477 4.44772 12 5 12H6C6.55228 12 7 12.4477 7 13C7 13.5523 6.55228 14 6 14H5C4.44772 14 4 13.5523 4 13ZM9 12C8.44772 12 8 12.4477 8 13C8 13.5523 8.44772 14 9 14H10C10.5523 14 11 13.5523 11 13C11 12.4477 10.5523 12 10 12H9Z"/>
</svg>\`,
time: '2 days ago',
},
] ;
export default ({
data() {
return {
// Sidebar collapsed status.
sidebarCollapsed: false,
// Main sidebar color.
sidebarColor: "primary",
// Main sidebar theme : light, white, dark.
sidebarTheme: "light",
// Header fixed status.
navbarFixed: false,
// Settings drawer visiblility status.
showSettingsDrawer: false,
// The wrapper element to attach dropdowns to.
wrapper: document.body,
// Fixed header/sidebar-footer ( Affix component ) top offset.
top: 0,
// Header notifications data.
notificationsData: notificationsData,
// Search input loading status.
searchLoading: false,
}
},
methods: {
resizeEventHandler(){
this.top = this.top ? 0 : -0.01 ;
// To refresh the header if the window size changes.
// Reason for the negative value is that it doesn't activate the affix unless
// scroller is anywhere but the top of the page.
},
},
computed: {
// Sets layout's element's class based on route's meta data.
layoutClass() {
return this.$route.meta.layoutClass ;
}
},
mounted: function(){
// Set the wrapper to the proper element, layout wrapper.
this.wrapper = document.getElementById('layout-dashboard') ;
},
created() {
// Registering window resize event listener to fix affix elements size
// error while resizing.
window.addEventListener("resize", this.resizeEventHandler);
},
destroyed() {
// Removing window resize event listener.
window.removeEventListener("resize", this.resizeEventHandler);
},
})
<\/script>
`,
defaultLayoutCode: `
<!--
This is the default layout, used in sign-in and sign-up pages.
-->
<template>
<div>
<!-- Default Layout -->
<a-layout class="layout-default" id="layout-default" :class="[layoutClass]">
<!-- Layout Header ( Navbar ) -->
<a-layout-header>
<div class="header-col header-brand">
<h6>Muse Dashboard</h6>
<!-- Trigger Button For Navigation Menu For Small Screens -->
<a-button type="link" @click="collapseNav = collapseNav ? 0 : 1" class="btn-menu-trigger">
<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"/></svg>
</a-button>
<!-- Trigger Button For Navigation Menu For Small Screens -->
</div>
<div class="header-col header-nav">
<!-- Navigation Menu For Large Screens -->
<a-menu mode="horizontal" class="menu-large">
<a-menu-item>
<router-link to="/dashboard" class="nav-link" @click="e => e.preventDefault()">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="fill-muted" d="M3 4C3 3.44772 3.44772 3 4 3H16C16.5523 3 17 3.44772 17 4V6C17 6.55228 16.5523 7 16 7H4C3.44772 7 3 6.55228 3 6V4Z" fill="#111827"/>
<path class="fill-muted" d="M3 10C3 9.44771 3.44772 9 4 9H10C10.5523 9 11 9.44771 11 10V16C11 16.5523 10.5523 17 10 17H4C3.44772 17 3 16.5523 3 16V10Z" fill="#111827"/>
<path class="fill-muted" d="M14 9C13.4477 9 13 9.44771 13 10V16C13 16.5523 13.4477 17 14 17H16C16.5523 17 17 16.5523 17 16V10C17 9.44771 16.5523 9 16 9H14Z" fill="#111827"/>
</svg>
<span>Dashboard</span>
</router-link>
</a-menu-item>
<a-menu-item>
<router-link to="/profile" class="nav-link" @click="e => e.preventDefault()">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="fill-muted" fill-rule="evenodd" clip-rule="evenodd" d="M18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10ZM12 7C12 8.10457 11.1046 9 10 9C8.89543 9 8 8.10457 8 7C8 5.89543 8.89543 5 10 5C11.1046 5 12 5.89543 12 7ZM9.99993 11C7.98239 11 6.24394 12.195 5.45374 13.9157C6.55403 15.192 8.18265 16 9.99998 16C11.8173 16 13.4459 15.1921 14.5462 13.9158C13.756 12.195 12.0175 11 9.99993 11Z" fill="#111827"/>
</svg>
<span>Profile</span>
</router-link>
</a-menu-item>
<a-menu-item>
<router-link to="/sign-in" class="nav-link" @click="e => e.preventDefault()">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="fill-muted" fill-rule="evenodd" clip-rule="evenodd" d="M6 2C5.44772 2 5 2.44772 5 3V4H4C2.89543 4 2 4.89543 2 6V16C2 17.1046 2.89543 18 4 18H16C17.1046 18 18 17.1046 18 16V6C18 4.89543 17.1046 4 16 4H15V3C15 2.44772 14.5523 2 14 2C13.4477 2 13 2.44772 13 3V4H7V3C7 2.44772 6.55228 2 6 2ZM6 7C5.44772 7 5 7.44772 5 8C5 8.55228 5.44772 9 6 9H14C14.5523 9 15 8.55228 15 8C15 7.44772 14.5523 7 14 7H6Z" fill="#111827"/>
</svg>
<span>Sign In</span>
</router-link>
</a-menu-item>
<a-menu-item>
<router-link to="/sign-up" class="nav-link" @click="e => e.preventDefault()">
<svg width="14px" height="14px" class="fill-muted" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g class="fill-muted" id="Tables" transform="translate(-58.000000, -507.000000)" fill="#BFBFBF" fill-rule="nonzero">
<g id="sidebar" transform="translate(33.000000, 43.000000)">
<g id="sign-up" transform="translate(16.000000, 455.000000)">
<g id="duplicate" transform="translate(9.000000, 9.000000)">
<path d="M4,6 C4,4.89543 4.89543,4 6,4 L12,4 C13.1046,4 14,4.89543 14,6 L14,12 C14,13.1046 13.1046,14 12,14 L6,14 C4.89543,14 4,13.1046 4,12 L4,6 Z" id="Path"></path>
<path d="M2,0 C0.89543,0 0,0.89543 0,2 L0,8 C0,9.1046 0.89543,10 2,10 L2,4 C2,2.8954305 2.8954305,2 4,2 L10,2 L10,2 C10,0.89543 9.1046,0 8,0 L2,0 Z" id="Path"></path>
</g>
</g>
</g>
</g>
</g>
</svg>
<span>Sign Up</span>
</router-link>
</a-menu-item>
</a-menu>
<!-- / Navigation Menu For Large Screens -->
<!-- Collapsible Navigation Menu For Small Screens -->
<div class="menu-small">
<!-- Collapsible Component For Navigation Menu For Small Screens -->
<a-collapse v-model="collapseNav" accordion>
<a-collapse-panel key="1">
<!-- Navigation Menu For Small Screens -->
<a-menu mode="vertical">
<a-menu-item>
<router-link to="/dashboard" class="nav-link" @click="e => e.preventDefault()">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="fill-muted" d="M3 4C3 3.44772 3.44772 3 4 3H16C16.5523 3 17 3.44772 17 4V6C17 6.55228 16.5523 7 16 7H4C3.44772 7 3 6.55228 3 6V4Z" fill="#111827"/>
<path class="fill-muted" d="M3 10C3 9.44771 3.44772 9 4 9H10C10.5523 9 11 9.44771 11 10V16C11 16.5523 10.5523 17 10 17H4C3.44772 17 3 16.5523 3 16V10Z" fill="#111827"/>
<path class="fill-muted" d="M14 9C13.4477 9 13 9.44771 13 10V16C13 16.5523 13.4477 17 14 17H16C16.5523 17 17 16.5523 17 16V10C17 9.44771 16.5523 9 16 9H14Z" fill="#111827"/>
</svg>
<span>Dashboard</span>
</router-link>
</a-menu-item>
<a-menu-item>
<router-link to="/profile" class="nav-link" @click="e => e.preventDefault()">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="fill-muted" fill-rule="evenodd" clip-rule="evenodd" d="M18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10ZM12 7C12 8.10457 11.1046 9 10 9C8.89543 9 8 8.10457 8 7C8 5.89543 8.89543 5 10 5C11.1046 5 12 5.89543 12 7ZM9.99993 11C7.98239 11 6.24394 12.195 5.45374 13.9157C6.55403 15.192 8.18265 16 9.99998 16C11.8173 16 13.4459 15.1921 14.5462 13.9158C13.756 12.195 12.0175 11 9.99993 11Z" fill="#111827"/>
</svg>
<span>Profile</span>
</router-link>
</a-menu-item>
<a-menu-item>
<router-link to="/sign-in" class="nav-link" @click="e => e.preventDefault()">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="fill-muted" fill-rule="evenodd" clip-rule="evenodd" d="M6 2C5.44772 2 5 2.44772 5 3V4H4C2.89543 4 2 4.89543 2 6V16C2 17.1046 2.89543 18 4 18H16C17.1046 18 18 17.1046 18 16V6C18 4.89543 17.1046 4 16 4H15V3C15 2.44772 14.5523 2 14 2C13.4477 2 13 2.44772 13 3V4H7V3C7 2.44772 6.55228 2 6 2ZM6 7C5.44772 7 5 7.44772 5 8C5 8.55228 5.44772 9 6 9H14C14.5523 9 15 8.55228 15 8C15 7.44772 14.5523 7 14 7H6Z" fill="#111827"/>
</svg>
<span>Sign In</span>
</router-link>
</a-menu-item>
<a-menu-item>
<router-link to="/sign-up" class="nav-link" @click="e => e.preventDefault()">
<svg width="20" height="20" class="fill-muted" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g class="fill-muted" id="Tables" transform="translate(-58.000000, -507.000000)" fill="#BFBFBF" fill-rule="nonzero">
<g id="sidebar" transform="translate(33.000000, 43.000000)">
<g id="sign-up" transform="translate(16.000000, 455.000000)">
<g id="duplicate" transform="translate(9.000000, 9.000000)">
<path d="M4,6 C4,4.89543 4.89543,4 6,4 L12,4 C13.1046,4 14,4.89543 14,6 L14,12 C14,13.1046 13.1046,14 12,14 L6,14 C4.89543,14 4,13.1046 4,12 L4,6 Z" id="Path"></path>
<path d="M2,0 C0.89543,0 0,0.89543 0,2 L0,8 C0,9.1046 0.89543,10 2,10 L2,4 C2,2.8954305 2.8954305,2 4,2 L10,2 L10,2 C10,0.89543 9.1046,0 8,0 L2,0 Z" id="Path"></path>
</g>
</g>
</g>
</g>
</g>
</svg>
<span>Sign Up</span>
</router-link>
</a-menu-item>
</a-menu>
<!-- / Navigation Menu For Small Screens -->
</a-collapse-panel>
</a-collapse>
<!-- / Collapsible Component For Navigation Menu For Small Screens -->
</div>
<!-- / Collapsible Navigation Menu For Small Screens -->
</div>
<div class="header-col header-btn">
<a-button size="small" type="primary" shape="round">FREE DOWNLOAD</a-button>
</div>
</a-layout-header>
<!-- / Layout Header ( Navbar ) -->
<!-- Page Content -->
<a-layout-content>
<router-view />
</a-layout-content>
<!-- / Page Content -->
<!-- Layout Footer -->
<a-layout-footer>
<!-- Footer Navigation Menu -->
<a-menu mode="horizontal">
<a-menu-item>Company </a-menu-item>
<a-menu-item>About Us</a-menu-item>
<a-menu-item>Team </a-menu-item>
<a-menu-item>Products</a-menu-item>
<a-menu-item>Blog</a-menu-item>
<a-menu-item>Pricing</a-menu-item>
</a-menu>
<!-- / Footer Navigation Menu -->
<!-- Footer Social Menu -->
<a-menu mode="horizontal" class="menu-nav-social">
<a-menu-item>
<a href="#">
<svg width="18" height="18" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="M256 8C119.252 8 8 119.252 8 256s111.252 248 248 248 248-111.252 248-248S392.748 8 256 8zm163.97 114.366c29.503 36.046 47.369 81.957 47.835 131.955-6.984-1.477-77.018-15.682-147.502-6.818-5.752-14.041-11.181-26.393-18.617-41.614 78.321-31.977 113.818-77.482 118.284-83.523zM396.421 97.87c-3.81 5.427-35.697 48.286-111.021 76.519-34.712-63.776-73.185-116.168-79.04-124.008 67.176-16.193 137.966 1.27 190.061 47.489zm-230.48-33.25c5.585 7.659 43.438 60.116 78.537 122.509-99.087 26.313-186.36 25.934-195.834 25.809C62.38 147.205 106.678 92.573 165.941 64.62zM44.17 256.323c0-2.166.043-4.322.108-6.473 9.268.19 111.92 1.513 217.706-30.146 6.064 11.868 11.857 23.915 17.174 35.949-76.599 21.575-146.194 83.527-180.531 142.306C64.794 360.405 44.17 310.73 44.17 256.323zm81.807 167.113c22.127-45.233 82.178-103.622 167.579-132.756 29.74 77.283 42.039 142.053 45.189 160.638-68.112 29.013-150.015 21.053-212.768-27.882zm248.38 8.489c-2.171-12.886-13.446-74.897-41.152-151.033 66.38-10.626 124.7 6.768 131.947 9.055-9.442 58.941-43.273 109.844-90.795 141.978z"/>
</svg>
</a>
</a-menu-item>
<a-menu-item>
<a href="#">
<svg width="18" height="18" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"/>
</svg>
</a>
</a-menu-item>
<a-menu-item>
<a href="#">
<svg width="18" height="18" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"/>
</svg>
</a>
</a-menu-item>
<a-menu-item>
<a href="#">
<svg width="18" height="18" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="M496 256c0 137-111 248-248 248-25.6 0-50.2-3.9-73.4-11.1 10.1-16.5 25.2-43.5 30.8-65 3-11.6 15.4-59 15.4-59 8.1 15.4 31.7 28.5 56.8 28.5 74.8 0 128.7-68.8 128.7-154.3 0-81.9-66.9-143.2-152.9-143.2-107 0-163.9 71.8-163.9 150.1 0 36.4 19.4 81.7 50.3 96.1 4.7 2.2 7.2 1.2 8.3-3.3.8-3.4 5-20.3 6.9-28.1.6-2.5.3-4.7-1.7-7.1-10.1-12.5-18.3-35.3-18.3-56.6 0-54.7 41.4-107.6 112-107.6 60.9 0 103.6 41.5 103.6 100.9 0 67.1-33.9 113.6-78 113.6-24.3 0-42.6-20.1-36.7-44.8 7-29.5 20.5-61.3 20.5-82.6 0-19-10.2-34.9-31.4-34.9-24.9 0-44.9 25.7-44.9 60.2 0 22 7.4 36.8 7.4 36.8s-24.5 103.8-29 123.2c-5 21.4-3 51.6-.9 71.2C65.4 450.9 0 361.1 0 256 0 119 111 8 248 8s248 111 248 248z"/>
</svg>
</a>
</a-menu-item>
<a-menu-item>
<a href="#">
<svg width="18" height="18" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/>
</svg>
</a>
</a-menu-item>
</a-menu>
<!-- / Footer Social Menu -->
<!-- Copyright Notice -->
<p class="copyright">
Copyright © 2021 Muse
by <a href="https://creative-tim.com">Creative Tim</a>.
</p>
<!-- / Copyright Notice -->
</a-layout-footer>
<!-- / Layout Footer -->
</a-layout>
<!-- / Default Layout -->
</div>
</template>
<script>
export default ({
data() {
return {
// Collapse navigation value.
// Binded model property for "Collapsible Navigation Menu" collapsed status .
collapseNav: 0,
}
},
computed: {
// Sets layout's element's class based on route's meta data.
layoutClass() {
return this.$route.meta.layoutClass ;
}
},
})
<\/script>
<style lang="scss" scoped>
.nav-link svg {
margin-right: 5px;
vertical-align: middle;
}
.nav-link span {
vertical-align: middle;
}
.ant-menu-submenu-popup {
width: 100%;
}
</style>`,
} ;
},
methods: {
}
}
</script>
<style lang="scss" scoped>
#components-layout-demo-basic {
text-align: center;
}
.ant-layouts.ant-layout-has-siders {
display: flex;
}
.ant-layouts.ant-layout-has-siders .ant-layouts {
flex-grow: 1;
}
#components-layout-demo-basic .ant-layout-headers,
#components-layout-demo-basic .ant-layout-footers {
background: #7dbcea;
color: #fff;
padding: 25px;
}
#components-layout-demo-basic .ant-layout-footers {
line-height: 1.5;
}
#components-layout-demo-basic .ant-layout-siders {
background: #3ba0e9;
color: #fff;
line-height: 120px;
}
#components-layout-demo-basic .ant-layout-contents {
background: rgba(16, 142, 233, 1);
color: #fff;
min-height: 120px;
line-height: 120px;
}
#components-layout-demo-basic > .ant-layouts {
margin-bottom: 48px;
}
#components-layout-demo-basic > .ant-layouts:last-child {
margin: 0;
}
#components-layout-demo-authentication {
text-align: center;
}
.ant-layouts.ant-layout-has-siders {
display: flex;
}
.ant-layouts.ant-layout-has-siders .ant-layouts {
flex-grow: 1;
}
#components-layout-demo-authentication .ant-layout-headers,
#components-layout-demo-authentication .ant-layout-footers {
background: #7dbcea;
color: #fff;
padding: 25px;
}
#components-layout-demo-authentication .ant-layout-footers {
line-height: 1.5;
}
#components-layout-demo-authentication .ant-layout-siders {
background: #3ba0e9;
color: #fff;
line-height: 120px;
}
#components-layout-demo-authentication .ant-layout-contents {
background: rgba(16, 142, 233, 1);
color: #fff;
min-height: 120px;
line-height: 120px;
}
#components-layout-demo-authentication > .ant-layouts {
margin-bottom: 48px;
}
#components-layout-demo-authentication > .ant-layouts:last-child {
margin: 0;
}
</style>
Reference in New Issue View Git Blame Copy Permalink