SolidScribe/client/src/components/SideSlideMenuComponent.vue

<style type="text/css" scoped>
	.slide-container {
		position: fixed;
		top: 0;
		left: 0;
		right: 55%;
		bottom: 0;
		z-index: 400;
		overflow: hidden;
		height: 100%;

		color: var(--text_color);
		background-color: var(--background_color);
	}
	.slide-content {
		box-sizing: border-box;
		/*padding: 1em 1.5em;*/
		height: calc(100% - 43px);
		border-right: 1px solid var(--menu-border);
		/*background-color: var(--background_color);*/
		overflow-x: scroll;
	}
	.slide-shadow {
		position: fixed;
		top: 0;
		left: 0;
		right: 50%;
		bottom: 0;
		color: red;
		background-color: rgba(0,0,0,0.5);
		/*background: linear-gradient(90deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 55%);*/
		z-index: 399;
		overflow: hidden;
		cursor: pointer;
	}
	.note-menu {
		height: 43px;
	}


	@media only screen and (max-width: 740px) {
		.slide-shadow {
			background-color: rgba(0,0,0,0.5);
		}
		.slide-content {
			height: calc(100% - 55px);
		}
		.slide-container {
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
		}
		.note-menu {
			height: 55px;
			padding: 0 30px;
		}

	}

	.modal-fade-enter,
	.modal-fade-leave-active {
		opacity: 0;
	}

	.modal-fade-enter-active,
	.modal-fade-leave-active {
		transition: opacity .5s ease;
	}

</style>

<template>
	<transition name="modal-fade">
		<div>

			<div class="slide-container" :style="{ 'background-color':bgColor, 'color':textColor}">

				<!-- content of the editor  -->
				<div class="slide-content">
					<slot></slot>
				</div>

				<!-- close menu on bottom  -->
				<div class="note-menu">
					<nm-button more-class="right" icon="close" text="close" :show-text="true" v-on:click.native="close" />
				</div>

			</div>
			
			<div class="slide-shadow" v-on:click="close"></div>
			
		</div>
	</transition>
</template>

<script>
	export default {
		name: 'SideSlideMenu',
		props: [ 'name', 'styleObject' ],
		components: {
			'nm-button':require('@/components/NoteMenuButtonComponent.vue').default
		},
		data () {
			return {
				items: [],
				bgColor: null,
				textColor: null,
			}
		},
		beforeMount(){
			
			//Other panels will tell this one to close
			this.$bus.$on('destroy_all_other_side_panels', (name) => {
				if(this.name != name){
					this.close()
				}
			})
		},
		beforeDestroy(){
		},
		mounted(){

			//If note style object is set, use that on the slide menu
			if(this.styleObject && this.styleObject.noteText){
				this.textColor = this.styleObject.noteText
			}

			if(this.styleObject && this.styleObject.noteBackground){
				this.bgColor = this.styleObject.noteBackground
			}

			
			//Close all other panels that are not this one
			this.$nextTick( () => {
				this.$bus.$emit('destroy_all_other_side_panels', this.name)
			})
		},
		methods: {
			onClickTag(index){
				console.log('yup')
			},
			close() {
				this.$emit('close');
			},
		}
	}
</script>