feat: navigator sidebar
This commit is contained in:
NGPixel
parent
8b30d31457
commit
a4e0e6d35c
@ -9,18 +9,42 @@
|
||||
.navigator-title
|
||||
h1 {{ siteTitle }}
|
||||
.navigator-subtitle(:class='subtitleClass')
|
||||
|
||||
svg.icons.is-24(role='img', v-if='subtitleIcon')
|
||||
title {{subtitleText}}
|
||||
use(:xlink:href='subtitleIconClass')
|
||||
transition(name='navigator-subtitle-icon')
|
||||
svg.icons.is-24.navigator-subtitle-icon(role='img', v-if='subtitleIcon')
|
||||
title {{subtitleText}}
|
||||
use(:xlink:href='subtitleIconClass')
|
||||
h2 {{subtitleText}}
|
||||
.navigator-action
|
||||
.navigator-action-item
|
||||
svg.icons.is-32(role='img')
|
||||
title User
|
||||
use(xlink:href='#nc-user-circle')
|
||||
.navigator-row
|
||||
.navigator-nav
|
||||
transition(name='navigator-sd')
|
||||
.navigator-sd(v-show='sdShown')
|
||||
.navigator-sd-actions
|
||||
a.is-active(href='')
|
||||
svg.icons.is-24(role='img')
|
||||
title Search
|
||||
use(xlink:href='#gg-search')
|
||||
a(href='')
|
||||
svg.icons.is-24(role='img')
|
||||
title New Document
|
||||
use(xlink:href='#nc-plus-circle')
|
||||
a(href='')
|
||||
svg.icons.is-24(role='img')
|
||||
title Navigation
|
||||
use(xlink:href='#nc-pen-red')
|
||||
a(href='')
|
||||
svg.icons.is-24(role='img')
|
||||
title Navigation
|
||||
use(xlink:href='#nc-restore')
|
||||
a(href='')
|
||||
svg.icons.is-24(role='img')
|
||||
title New Document
|
||||
use(xlink:href='#nc-code-editor')
|
||||
.navigator-sd-search
|
||||
input(type='text', placeholder='Search')
|
||||
.navigator-sd-results
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -31,7 +55,9 @@ import { mapState } from 'vuex'
|
||||
export default {
|
||||
name: 'navigator',
|
||||
data() {
|
||||
return { }
|
||||
return {
|
||||
sdShown: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState('navigator', [
|
||||
@ -56,11 +82,12 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
toggleMainMenu() {
|
||||
this.$store.dispatch('navigator/alert', {
|
||||
style: 'success',
|
||||
icon: 'nc-check-simple',
|
||||
msg: 'Changes were saved successfully!'
|
||||
})
|
||||
this.sdShown = !this.sdShown
|
||||
// this.$store.dispatch('navigator/alert', {
|
||||
// style: 'success',
|
||||
// icon: 'gg-check',
|
||||
// msg: 'Changes were saved successfully!'
|
||||
// })
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
@ -1,16 +1,3 @@
|
||||
/**
|
||||
* Clearfix
|
||||
*
|
||||
* @return {string} Clearfix attribute
|
||||
*/
|
||||
@mixin clearfix {
|
||||
&:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Placeholder attribute for inputs
|
||||
*
|
||||
|
||||
@ -88,7 +88,22 @@
|
||||
|
||||
svg {
|
||||
margin-right: .5rem;
|
||||
animation: flash 1s linear;
|
||||
animation: flash 1s linear 1s;
|
||||
|
||||
&.navigator-subtitle-icon {
|
||||
transition: all 1s ease;
|
||||
|
||||
&-enter-active, &-leave-active {
|
||||
transform: scale(1);
|
||||
width: 24px;
|
||||
margin-right: .5rem;
|
||||
}
|
||||
&-enter, &-leave-to {
|
||||
transform: scale(0);
|
||||
width: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
use {
|
||||
color: #FFF;
|
||||
@ -130,4 +145,83 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-sd {
|
||||
width: 350px;
|
||||
background-color: #FFF;
|
||||
border-radius: 0 0 5px 0;
|
||||
padding: 0 0 1rem 0;
|
||||
transition: all .4s ease;
|
||||
transform-origin: top left;
|
||||
|
||||
&-enter-active, &-leave-active {
|
||||
transform: scale(1);
|
||||
}
|
||||
&-enter, &-leave-to {
|
||||
transform: scale(.1, 0);
|
||||
}
|
||||
|
||||
&-actions {
|
||||
background-color: mc('blue-grey', '50');
|
||||
display: flex;
|
||||
|
||||
a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
transition: all .4s ease;
|
||||
|
||||
&.is-active {
|
||||
background-color: #FFF;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: #FFF;
|
||||
}
|
||||
|
||||
svg {
|
||||
use {
|
||||
color: mc('blue-grey', '500');
|
||||
fill: mc('blue-grey', '500');
|
||||
transition: all .4s ease;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-search {
|
||||
position: relative;
|
||||
|
||||
input {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 0 1rem 0 1rem;
|
||||
height: 40px;
|
||||
border: 0;
|
||||
font-size: .9rem;
|
||||
color: mc('grey', '700');
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
svg {
|
||||
position: absolute;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
top: 9px;
|
||||
left: 15px;
|
||||
|
||||
use {
|
||||
color: mc('grey', '500');
|
||||
fill: mc('grey', '500');
|
||||
transition: all .4s ease;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -358,4 +358,56 @@
|
||||
<path d="M2 42h44L24 4 2 42zm24-6h-4v-4h4v4zm0-8h-4v-8h4v8z"></path>
|
||||
</g>
|
||||
</symbol>
|
||||
<symbol id='gg-check' viewBox="0 0 48 48">
|
||||
<g class="nc-icon-wrapper" fill="currentColor">
|
||||
<path d="M18 32.34L9.66 24l-2.83 2.83L18 38l24-24-2.83-2.83z"></path>
|
||||
</g>
|
||||
</symbol>
|
||||
<symbol id='gg-search' viewBox="0 0 48 48">
|
||||
<g class="nc-icon-wrapper" fill="currentColor">
|
||||
<path d="M31 28h-1.59l-.55-.55C30.82 25.18 32 22.23 32 19c0-7.18-5.82-13-13-13S6 11.82 6 19s5.82 13 13 13c3.23 0 6.18-1.18 8.45-3.13l.55.55V31l10 9.98L40.98 38 31 28zm-12 0c-4.97 0-9-4.03-9-9s4.03-9 9-9 9 4.03 9 9-4.03 9-9 9z"></path>
|
||||
</g>
|
||||
</symbol>
|
||||
<symbol id='nc-plus-circle' viewBox="0 0 48 48">
|
||||
<g class="nc-icon-wrapper">
|
||||
<path fill="#72C472" d="M24,47C11.31738,47,1,36.68262,1,24S11.31738,1,24,1s23,10.31738,23,23S36.68262,47,24,47z"></path>
|
||||
<polygon fill="#FFFFFF" points="36,21 27,21 27,12 21,12 21,21 12,21 12,27 21,27 21,36 27,36 27,27 36,27 "></polygon>
|
||||
</g>
|
||||
</symbol>
|
||||
<symbol id='nc-pen-red' viewBox="0 0 48 48">
|
||||
<g class="nc-icon-wrapper">
|
||||
<polygon fill="#223E49" points="8.183,44.183 7,41 3.817,39.817 2.725,45.275 "></polygon>
|
||||
<polygon fill="#EAD8C5" points="14.493,42.921 12,35.708 5.079,33.507 3.817,39.817 8.183,44.183 "></polygon>
|
||||
<path fill="#335262" d="M34.586,4l-5.293,5.293L33,15l5.707,3.707L44,13.414c0.781-0.781,0.781-2.047,0-2.828L37.414,4 C36.633,3.219,35.367,3.219,34.586,4z"></path>
|
||||
<rect x="2.917" y="20.218" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -11.2804 21.2734)" fill="#E86C60" width="34.244" height="8.071"></rect>
|
||||
<rect x="7.125" y="25.132" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -13.0231 25.4808)" fill="#DD5E58" width="34.244" height="6.657"></rect>
|
||||
<rect x="33" y="7.343" transform="matrix(0.7071 -0.7071 0.7071 0.7071 0.0589 28.1421)" fill="#E6E6E6" width="2" height="13.314"></rect>
|
||||
</g>
|
||||
</symbol>
|
||||
<symbol id='nc-restore' viewBox="0 0 48 48">
|
||||
<g class="nc-icon-wrapper">
|
||||
<path fill="#B3B3B3" d="M24,42c10.539,0,18.992-9.105,17.906-19.862c-0.862-8.531-7.863-15.387-16.409-16.077 c-6.106-0.493-11.83,2.057-15.508,6.629l7.65-1.024l0.531,3.965L6.276,17.223c-0.09,0.012-0.18,0.018-0.269,0.018 c-0.986,0-1.845-0.729-1.979-1.734L2.436,3.612L6.4,3.081l0.886,6.617c4.686-5.496,11.853-8.446,19.428-7.535 c10.097,1.214,18.149,9.444,19.17,19.562C47.212,34.873,36.881,46,24,46C12.213,46,2.561,36.682,2.024,25.026 C1.998,24.464,2.464,24,3.026,24h2.003c0.541,0,0.969,0.431,0.997,0.972C6.532,34.447,14.401,42,24,42z"></path>
|
||||
<path fill="#43A6DD" d="M29.879,32.707l-7.293-7.293C22.211,25.039,22,24.53,22,23.999V15c0-0.552,0.448-1,1-1h2 c0.552,0,1,0.448,1,1v8.172l6.707,6.707c0.391,0.391,0.391,1.024,0,1.414l-1.414,1.414C30.903,33.097,30.269,33.097,29.879,32.707z"></path>
|
||||
</g>
|
||||
</symbol>
|
||||
<symbol id='nc-code-editor' viewBox="0 0 48 48">
|
||||
<g class="nc-icon-wrapper">
|
||||
<path fill="#444444" d="M47,11V6c0-1.105-0.895-2-2-2H3C1.895,4,1,4.895,1,6v5H47z"></path>
|
||||
<path fill="#606060" d="M45,43H15V11h32v30C47,42.105,46.105,43,45,43z"></path>
|
||||
<circle fill="#E86C60" cx="4.5" cy="7.5" r="1.5"></circle>
|
||||
<circle fill="#EFD358" cx="9.5" cy="7.5" r="1.5"></circle>
|
||||
<circle fill="#72C472" cx="14.5" cy="7.5" r="1.5"></circle>
|
||||
<path fill="#4F4F4F" d="M16,43H3c-1.105,0-2-0.895-2-2V11h15V43z"></path>
|
||||
<rect x="5" y="14" fill="#B3B3B3" width="7" height="2"></rect>
|
||||
<rect x="5" y="20" fill="#B3B3B3" width="5" height="2"></rect>
|
||||
<rect x="5" y="26" fill="#B3B3B3" width="7" height="2"></rect>
|
||||
<rect x="5" y="32" fill="#B3B3B3" width="5" height="2"></rect>
|
||||
<rect x="5" y="38" fill="#B3B3B3" width="7" height="2"></rect>
|
||||
<rect x="20" y="14" fill="#E86C60" width="5" height="2"></rect>
|
||||
<rect x="24" y="20" fill="#EFD358" width="7" height="2"></rect>
|
||||
<rect x="27" y="26" fill="#FFFFFF" width="10" height="2"></rect>
|
||||
<rect x="24" y="32" fill="#EFD358" width="7" height="2"></rect>
|
||||
<rect x="20" y="38" fill="#E86C60" width="5" height="2"></rect>
|
||||
</g>
|
||||
</symbol>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 35 KiB After Width: | Height: | Size: 40 KiB |
Loading…
Reference in New Issue
Block a user