Separate menu for resources

src/AppTopBar.vue

@@ -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;
         }
     }
 }

src/assets/styles/app.scss

@@ -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;
+                    right: 0;
-                    width: 250px;
+                    width: 300px;
-                    max-height: 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 {