Separate menu for resources
cagataycivici
parent
b75320ab30
commit
3d27797933
|
|
@ -8,7 +8,7 @@
|
|||
</router-link>
|
||||
<ul class="topbar-menu">
|
||||
<li><router-link to="/setup">Get Started</router-link></li>
|
||||
<li class="topbar-menu-themes">
|
||||
<li class="topbar-submenu">
|
||||
<a tabindex="0" @click="toggleThemesMenu($event)" class="themes-menu-link">Themes</a>
|
||||
<transition name="p-input-overlay" @enter="onThemesMenuEnter" @leave="onThemesMenuLeave">
|
||||
<ul v-show="themesMenuVisible">
|
||||
|
|
@ -28,7 +28,7 @@
|
|||
</ul>
|
||||
</transition>
|
||||
</li>
|
||||
<li class="topbar-menu-themes">
|
||||
<li class="topbar-submenu">
|
||||
<a tabindex="0" @click="toggleTemplatesMenu($event)" class="templates-menu-link">Templates</a>
|
||||
<transition name="p-input-overlay" @enter="onTemplatesMenuEnter" @leave="onTemplatesMenuLeave">
|
||||
<ul v-show="templatesMenuVisible">
|
||||
|
|
@ -41,7 +41,20 @@
|
|||
</ul>
|
||||
</transition>
|
||||
</li>
|
||||
<li><router-link to="/support">Support</router-link></li>
|
||||
<li class="topbar-submenu topbar-resources-submenu">
|
||||
<a tabindex="0" @click="toggleResourcesMenu($event)" class="resources-menu-link">Resources</a>
|
||||
<transition name="p-input-overlay" @enter="onResourcesMenuEnter" @leave="onResourcesMenuLeave">
|
||||
<ul v-show="resourcesMenuVisible">
|
||||
<li><router-link to="/icons" @click.native="hideResourcesMenu"><span>Support</span></router-link></li>
|
||||
<li><a href="https://github.com/primefaces/primevue" target="_blank"><span>Source Code</span></a></li>
|
||||
<li><a href="https://www.primefaces.org/store" target="_blank"><span>PrimeStore</span></a></li>
|
||||
<li><a href="https://www.primefaces.org/category/primevue/" target="_blank"><span>Blog</span></a></li>
|
||||
<li><a href="https://twitter.com/primevue?lang=en" target="_blank"><span>Twitter</span></a></li>
|
||||
<li><a href="https://www.primefaces.org/whouses/" target="_blank"><span>Who Uses</span></a></li>
|
||||
<li><a href="https://www.primetek.com.tr" target="_blank"><span>About PrimeTek</span></a></li>
|
||||
</ul>
|
||||
</transition>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -52,14 +65,17 @@ import DomHandler from './components/utils/DomHandler';
|
|||
export default {
|
||||
themesMenuOutsideClickListener: null,
|
||||
templatesMenuOutsideClickListener: null,
|
||||
resourcesMenuOutsideClickListener: null,
|
||||
themesMenuElement: null,
|
||||
templatesMenuElement: null,
|
||||
resourcesMenuElement: null,
|
||||
darkDemoStyle: null,
|
||||
data() {
|
||||
return {
|
||||
theme: 'nova-light',
|
||||
themesMenuVisible: false,
|
||||
templatesMenuVisible: false
|
||||
templatesMenuVisible: false,
|
||||
resourcesMenuVisible: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -123,6 +139,18 @@ export default {
|
|||
this.templatesMenuElement = null;
|
||||
this.unbindTemplatesMenuOutsideClickListener();
|
||||
},
|
||||
toggleResourcesMenu(event) {
|
||||
this.resourcesMenuVisible = !this.resourcesMenuVisible;
|
||||
event.preventDefault();
|
||||
},
|
||||
onResourcesMenuEnter(el) {
|
||||
this.resourcesMenuElement = el;
|
||||
this.bindResourcesMenuOutsideClickListener();
|
||||
},
|
||||
onResourcesMenuLeave() {
|
||||
this.resourcesMenuElement = null;
|
||||
this.unbindResourcesMenuOutsideClickListener();
|
||||
},
|
||||
bindThemesMenuOutsideClickListener() {
|
||||
if (!this.themesMenuOutsideClickListener) {
|
||||
this.themesMenuOutsideClickListener = (event) => {
|
||||
|
|
@ -155,11 +183,30 @@ export default {
|
|||
this.templatesMenuOutsideClickListener = null;
|
||||
}
|
||||
},
|
||||
bindResourcesMenuOutsideClickListener() {
|
||||
if (!this.resourcesMenuOutsideClickListener) {
|
||||
this.resourcesMenuOutsideClickListener = (event) => {
|
||||
if ((this.resourcesMenuVisible && this.isOutsideOfOverlayMenuClicked(event, this.resourcesMenuElement, 'resources-menu-link'))) {
|
||||
this.resourcesMenuVisible = false;
|
||||
}
|
||||
};
|
||||
document.addEventListener('click', this.resourcesMenuOutsideClickListener);
|
||||
}
|
||||
},
|
||||
unbindResourcesMenuOutsideClickListener() {
|
||||
if (this.resourcesMenuOutsideClickListener) {
|
||||
document.removeEventListener('click', this.resourcesMenuOutsideClickListener);
|
||||
this.resourcesMenuOutsideClickListener = null;
|
||||
}
|
||||
},
|
||||
isOutsideOfOverlayMenuClicked(event, element, style) {
|
||||
return !(DomHandler.hasClass(event.target, style) || element.isSameNode(event.target) || element.contains(event.target));
|
||||
},
|
||||
hideThemesMenu() {
|
||||
this.themesMenuVisible = false;
|
||||
},
|
||||
hideResourcesMenu() {
|
||||
this.resourcesMenuVisible = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -59,7 +59,7 @@ body {
|
|||
height: 100%;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
background-color: #f6f6f6;
|
||||
background-color: #20272a;
|
||||
font-family: "Open Sans", "Helvetica Neue", sans-serif;
|
||||
font-weight: normal;
|
||||
color: #484848;
|
||||
|
|
@ -155,27 +155,26 @@ body {
|
|||
}
|
||||
}
|
||||
|
||||
&.topbar-menu-themes {
|
||||
&.topbar-submenu {
|
||||
position: relative;
|
||||
|
||||
> ul {
|
||||
position: absolute;
|
||||
top: 70px;
|
||||
left: -75px;
|
||||
width: 250px;
|
||||
max-height: 300px;
|
||||
right: 0;
|
||||
width: 300px;
|
||||
max-height: 400px;
|
||||
background-color: #ffffff;
|
||||
-moz-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
|
||||
-webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
|
||||
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
|
||||
overflow: auto;
|
||||
list-style-type: none;
|
||||
padding: 4px 0;
|
||||
padding: 6px 12px;
|
||||
margin: 0;
|
||||
border-radius: 3px;
|
||||
|
||||
> li {
|
||||
margin: 2px 0;
|
||||
line-height: 1;
|
||||
|
||||
&.topbar-submenu-header {
|
||||
|
|
@ -197,6 +196,7 @@ body {
|
|||
display: block;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
border-bottom: 1px solid #f4f4f4;
|
||||
@include transition(background-color .2s);
|
||||
|
||||
&:hover {
|
||||
|
|
@ -220,6 +220,30 @@ body {
|
|||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
li:last-child {
|
||||
a {
|
||||
border-bottom: 0 none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.topbar-resources-submenu {
|
||||
> ul {
|
||||
a {
|
||||
padding: 12px 6px;
|
||||
|
||||
span {
|
||||
margin-left: 6px;
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: '\25cf';
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -920,7 +944,7 @@ body {
|
|||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 64em) {
|
||||
@media screen and (max-width: 960px) {
|
||||
.layout-topbar {
|
||||
text-align: center;
|
||||
|
||||
|
|
@ -958,7 +982,7 @@ body {
|
|||
min-width: auto;
|
||||
}
|
||||
|
||||
&.topbar-menu-themes > ul {
|
||||
&.topbar-submenu > ul {
|
||||
top: 40px;
|
||||
text-align: left;
|
||||
}
|
||||
|
|
@ -1026,6 +1050,26 @@ a{
|
|||
color: #4eafe6;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 640px) {
|
||||
.layout-topbar {
|
||||
.topbar-menu {
|
||||
> li {
|
||||
&.topbar-submenu {
|
||||
position: static;
|
||||
|
||||
> ul {
|
||||
top: 110px;
|
||||
position: fixed;
|
||||
right: auto;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Animation */
|
||||
@-webkit-keyframes fadeInDown {
|
||||
from {
|
||||
|
|
|
|||
Loading…
Reference in New Issue