tobi/vue-black-dash
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add icons and dropdowns to navbar

Browse Source
This commit is contained in:
cristij 2018-09-02 14:57:24 +03:00
parent a8cb1967b0
commit 5ea2826db0
3 changed files with 89 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/App.vue
View File

@ -6,7 +6,13 @@
</template> </template>
<script> <script>
export default {}; export default {
mounted() {
if(!this.$rtl.isRTL) {
this.$rtl.disableRTL();
}
}
};
</script> </script>
<style lang="scss"></style> <style lang="scss"></style>

6
src/components/BaseDropdown.vue
View File

@ -14,7 +14,7 @@
</span> </span>
</slot> </slot>
</a> </a>
<ul class="dropdown-menu" :class="{show:isOpen}"> <ul class="dropdown-menu" :class="[{show:isOpen}, {'dropdown-menu-right': menuOnRight}, menuClasses]">
<slot></slot> <slot></slot>
</ul> </ul>
</component> </component>
@ -29,7 +29,9 @@ export default {
}, },
title: String, title: String,
icon: String, icon: String,
titleClasses: [String, Object, Array] titleClasses: [String, Object, Array],
menuClasses: [String, Object],
menuOnRight: Boolean
}, },
data() { data() {
return { return {

52
src/layout/dashboard/TopNavbar.vue
View File

@ -33,12 +33,58 @@
</button> </button>
<!-- You can choose types of search input --> <!-- You can choose types of search input -->
</div> </div>
<base-dropdown class="nav-item" menu-on-right>
<a slot="title" href="#" class="dropdown-toggle nav-link" data-toggle="dropdown" aria-expanded="true">
<div class="notification d-none d-lg-block d-xl-block"></div>
<i class="tim-icons icon-sound-wave"></i>
<p class="d-lg-none">
New Notifications
</p>
</a>
<li class="nav-link">
<a href="#" class="nav-item dropdown-item">Mike John responded to your email</a>
</li>
<li class="nav-link">
<a href="#" class="nav-item dropdown-item">You have 5 more tasks</a>
</li>
<li class="nav-link">
<a href="#" class="nav-item dropdown-item">Your friend Michael is in town</a>
</li>
<li class="nav-link">
<a href="#" class="nav-item dropdown-item">Another notification</a>
</li>
<li class="nav-link">
<a href="#" class="nav-item dropdown-item">Another one</a>
</li>
</base-dropdown>
<base-dropdown class="nav-item" menu-classes="dropdown-navbar">
<a slot="title" href="#" class="dropdown-toggle nav-link" data-toggle="dropdown" aria-expanded="true">
<div class="photo">
<img src="/img/anime3.png">
</div>
<b class="caret d-none d-lg-block d-xl-block"></b>
<p class="d-lg-none">
Log out
</p>
</a>
<li class="nav-link">
<a href="#" class="nav-item dropdown-item">Profile</a>
</li>
<li class="nav-link">
<a href="#" class="nav-item dropdown-item">Settings</a>
</li>
<div class="dropdown-divider"></div>
<li class="nav-link">
<a href="#" class="nav-item dropdown-item">Log out</a>
</li>
</base-dropdown>
</ul> </ul>
</div> </div>
</div></nav> </div>
</nav>
</template> </template>
<script> <script>
export default { export default {
computed: { computed: {
routeName() { routeName() {
const { name } = this.$route; const { name } = this.$route;
@ -70,7 +116,7 @@ export default {
this.$sidebar.displaySidebar(false); this.$sidebar.displaySidebar(false);
} }
} }
}; };
</script> </script>
<style> <style>
</style> </style>