user-profile-layout

Demo

https://codepen.io/JOSEJUAN/pen/eYpzmKX https://codesandbox.io/s/interesting-gagarin-lcu8k

screen greater to 700px

screen lower to 700px

Install

npm i user-profile-layout

Vue Use

Global use

import { install } from 'user-profile-layout';

Vue.use(install);

Local Use

my-file.vue

import UserProfileLayout from 'user-profile-layout';

export default {
	name: 'My-component',
	components: {
		UserProfileLayout,
	}
}

Example

<template>
	<div class="container">
		<div class="activator">
			<button data-cy="activator" type="button" @click="show = true">Menu</button>
		</div>
		<UserProfileLayout
			class="profile"
			:show="show"
			:break-point="700"
			data-cy="user-profile-layout"
		>
			<template v-slot:aside>
				<ul class="menu-web" data-cy="menu-web">
					<li
						v-for="opt in menu"
						:key="opt.title"
					>
						<button type="button" @click="currentOption = opt">{{opt.title}}</button>
					</li>
				</ul>
			</template>
			<template v-slot:main-content>
				<div data-cy="main-content-container">
					<h1>{{currentOption.text}}</h1>
				</div>
			</template>
			<template v-slot:menu-movil>
				<div class="wrapper-menu-movil" data-cy="menu-movil">
					<button
						class="go-back"
						type="button"
						@click="show = false"
					>regresar</button>
					<ul class="movil">
						<li
						v-for="opt in menu"
						:key="opt.title"
						>
							<button type="button" @click="currentOption = opt">{{opt.title}}</button>
						</li>
					</ul>
				</div>
			</template>
		</UserProfileLayout>
	</div>
</template>

<script>
import UserProfileLayout from './UserProfileLayout.vue';

function data() {
	return {
		currentOption: {},
		menu: [
			{ title: 'Mis Datos Personales', text: 'Estos son mis datos personales' },
			{ title: 'Mis Pedidos', text: 'Tengo 1022 pedidos realizados' },
			{ title: 'Mis Direcciones', text: 'Estas son mis direcciones de envio' },
			{ title: 'Mis Gastos', text: 'Hasta la fecha he gastado 4577' },
			{ title: 'Mis Favoritos', text: 'Estos son mis productos favoritos' },
			{ title: 'Configuracion de cuenta', text: 'Aqui configuro mi cuenta' },
		],
		show: false,
	};
}

export default {
	name: 'HelloWorld',
	components: {
		UserProfileLayout,
	},
	data,
	props: {
		msg: String,
	},
};
</script>

<style scoped lang="scss">
	.container {
		margin: auto;
		max-width: 102.4rem;
		padding-top: 10rem;
	}

	.activator {
		background-color: gray;
		border-radius: 50%;
		height: 50px;
		left: 25px;
		position: absolute;
		top: 37px;
		width: 50px;

		button {
			border: none;
			border-radius: 50%;
			height: 100%;
			width: 100%;
		}

		@media (min-width: 701px) {
			display: none;
		}
	}

	.profile {
		height: 100%;
		width: 100%;
	}

	.menu-web, .movil {
		padding: 0.5rem 0;
		margin: 0;
		text-align: left;

		li {
			list-style: none;

			button {
				background-color: white;
				border: 0.2rem solid grey;
				border-bottom: 0;
				height: 4rem;
				padding: 1rem 0.5rem;
				width: 100%;
				white-space: nowrap;
			}
		}

		li:last-child {

			button {
				border-bottom: 0.2rem solid grey;
			}
		}
	}

	.wrapper-menu-movil {
		background-color: #f0efef;
		box-sizing: border-box;
		height: calc(100vh - 2rem);
		padding: 1rem 1.5rem;
		width: 31rem;

		.go-back {
			background-color: #8cba51;
			border: none;
			color: white;
			padding: 1rem;
			width: 100%;
		}

		.movil {
			height: 100%;
		}
	}

</style>

Props

name | description ---|--- show | prop used to hide and show movil menu. This prop only shows the movil menu if the screen's width is lower to break-point. break-point | prop used to define width screen. In this point the design change from movil to web or web to movil. By default is 768px.

Slot

name | use :-- | :-- aside | This is the container used for web menu main-container | This is the container used for the principal information menu-movil | This is the container used for the movil menu.