# drawer
# Example
<drawer
makeItFood="/images/fruit.png"
makeItFoodAlt="strawberries"
makeItText="this is some text"
makeItHeadline="Headline"
isFlip="false"
isReposition="true"
isFlipheadline="false"
makeItLastGA="google-analytics-string"
></drawer>
Headline
# props
makeItFood (String) string path to image directory or URL.
makeItFoodAlt (String) Alt tag for image.
makeItText (String) Paragraph text.
makeItHeadline (String) Headline text.
isFlip (Boolean) Flip the direction of the drawer.
isReposition (Boolean) Reposition button on the drawer.
isFlipheadline (Boolean) Flip headline to other side of drawer.
makeItLastGA (String) Add GA class.
# Source Code
<template>
<!--wrapper -->
<div class="make-it-wrapper" :class="{ flip: isFlip }">
<!--headline-->
<div
class="make-it-headline-wrapper"
:class="{ flipheadline: isFlipheadline }"
>
<h2>{{ makeItHeadline }}</h2>
<div class="underline"></div>
</div>
<!--/headline-->
<!--drawer -->
<div class="component-row">
<!--image circle container-->
<div class="makeit-circle">
<!--drawer image-->
<img
:src="'/images/tips/' + makeItFood + '.png'"
:alt="makeItFoodAlt"
/>
</div>
<!--/image circle container-->
<!--drawer pull out -->
<div
class="make-it-text-wrapper"
:class="{ long: isLong, reposition: isReposition }"
>
<!--drawer pull out body text -->
<div class="make-it-p-body" v-if="showWiggle">
<p class="make-it-p">{{ makeItText }}</p>
</div>
<!--/drawer pull out body text -->
<!-- open & close button -->
<button
@click="makeSlideOut()"
class="animated-close-button make-it-btn-position"
:class="[
isGreen ? 'greenbg' : '',
isRight ? 'newright' : '',
]"
data-ga-category="page-content"
data-ga-click
:data-ga-label="makeItLastGA"
data-ga-action="expand"
>
<!--close icon image -->
<img
class="close-icon"
:class="{ rotate: isActive }"
src="/images/tips/close-icon.png"
alt="close icon"
/>
<!--/close icon image -->
</button>
<!-- /open & close button -->
</div>
<!--/drawer pull out -->
</div>
<!--/drawer -->
</div>
<!--/wrapper -->
</template>
<script>
// import anime from "animejs";
// import animate from "animate.css";
export default {
props: {
makeItFood: String,
makeItFoodAlt: String,
makeItText: String,
makeItHeadline: String,
isFlip: Boolean,
isReposition: Boolean,
isFlipheadline: Boolean,
makeItLastGA: String,
},
data() {
return {
isGreen: false,
showPBody: false,
isActive: false,
showWiggle: false,
isLong: false,
isRight: false,
};
},
methods: {
makeSlideOut: function() {
this.isGreen = !this.isGreen;
this.isRight = !this.isRight;
this.showPBody = !this.showPBody;
this.isActive = !this.isActive;
this.showWiggle = !this.showWiggle;
this.isLong = !this.isLong;
},
handleSlideOpen: (el, done) => {
require('animejs');
anime({
targets: '.make-it-text-wrapper, .make-it-p',
translateX: [-20, 0],
opacity: [0, 1],
delay: (el, i) => i * 100,
duration: 200,
easing: 'easeOutCubic',
complete: done,
});
},
handleSlideClose: (el, done) => {
require('animejs');
anime({
targets: '.make-it-text-wrapper, .make-it-p',
translateX: [-20, 0],
opacity: [0, 1],
delay: (el, i) => i * 100,
duration: 200,
easing: 'easeOutCubic',
complete: done,
});
},
},
};
</script>
<style>
.newright {
left: auto !important;
right: -24px;
transition-duration: 0.5s;
}
.make-it-wrapper {
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
position: relative;
margin-left: 8%;
margin-top: 4%;
}
.makeit-circle {
background: white;
padding: 10px;
border-radius: 100%;
-webkit-box-shadow: 0px 3px 30px 0px rgba(0, 0, 0, 0.16);
-moz-box-shadow: 0px 3px 30px 0px rgba(0, 0, 0, 0.16);
box-shadow: 0px 3px 30px 0px rgba(0, 0, 0, 0.16);
position: relative;
z-index: 3;
max-width: 194px;
width: 100%;
}
.make-it-headline-wrapper {
margin-right: 8%;
}
p.make-it-p {
margin-left: 77px;
margin-right: 41px;
}
.make-it-text-wrapper {
max-width: 168px;
width: 100%;
margin-left: -68px;
position: relative;
height: 19vh;
max-height: 150px;
background: white;
-webkit-box-shadow: 0px 3px 30px 0px rgba(0, 0, 0, 0.16);
-moz-box-shadow: 0px 3px 30px 0px rgba(0, 0, 0, 0.16);
box-shadow: 0px 3px 30px 0px rgba(0, 0, 0, 0.16);
transition-duration: 0.5s;
border-radius: 16px;
display: flex;
justify-content: center;
align-items: center;
}
.underline {
width: 74px;
height: 5px;
background: white;
}
.long {
max-width: 62%;
transition-duration: 0.5s;
}
.make-it-btn-position {
left: 41px;
transition-duration: 0.5s;
}
.component-row {
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
position: relative;
}
.make-it-p-body {
-webkit-animation: fadein 2s;
-moz-animation: fadein 2s;
-ms-animation: fadein 2s;
-o-animation: fadein 2s;
animation: fadein 2s;
}
@keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@-moz-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@-webkit-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@-ms-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@-o-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@media (max-width: 767px) {
.long {
max-width: 468px;
}
.make-it-wrapper {
display: flex;
flex-direction: row;
align-items: baseline;
width: 100%;
margin-left: 0;
}
.make-it-headline-wrapper {
margin-right: 0;
}
.component-row {
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
position: relative;
margin-top: 14%;
}
.make-it-text-wrapper {
height: auto;
max-height: 100%;
background: white;
box-shadow: 0px 3px 30px 0px rgba(0, 0, 0, 0.16);
border-radius: 16px;
position: relative;
width: 310px;
margin-left: -95%;
margin-top: 13%;
margin-bottom: 13%;
}
p.make-it-p {
margin-left: 0;
margin-right: 0;
}
.make-it-p-body {
padding: 5%;
animation: none;
}
/* button.animated-close-button.make-it-btn-position {
margin-left: 55%;
margin-top: -136px;
} */
button.animated-close-button.make-it-btn-position {
margin-left: 93%;
margin-top: -157px;
}
button.animated-close-button.make-it-btn-position.greenbg.newright {
margin-top: -30px;
margin-right: -10px;
}
.make-it-wrapper.flip {
flex-direction: row-reverse;
}
.make-it-text-wrapper.long.reposition {
margin-left: 0;
margin-right: -90%;
}
.make-it-headline-wrapper.flipheadline {
margin-left: 10%;
}
}
@media (max-width: 518px) {
button.animated-close-button.make-it-btn-position {
margin-left: 66%;
margin-top: -146px;
}
}
@media (max-width: 414px) {
button.animated-close-button.make-it-btn-position {
margin-left: 57%;
margin-top: -134px;
}
}
@media (max-width: 375px) {
button.animated-close-button.make-it-btn-position {
margin-left: 56%;
margin-top: -133px;
}
}
@media (max-width: 320px) {
button.animated-close-button.make-it-btn-position {
margin-left: 60%;
margin-top: -123px;
}
.make-it-text-wrapper {
width: 280px;
margin-left: -119%;
}
}
</style>