Dropdown Items in Navbar #13
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| <template> | ||
| <router-link | ||
| class="router-link" | ||
| :to="item.link" | ||
| v-if="!isExternal(item.link)"> | ||
|
There was a problem hiding this comment. better put the There was a problem hiding this comment. Thanks, when I checked existing code, I found that the original code is always this way: <!-- lib/default-theme/SidebarGroup.vue -->
<span class="arrow"
v-if="collapsable"
:class="open ? 'up' : 'down'"></span>And Is that what you say? <router-link
class="router-link"
:to="item.link"
v-if="!isExternal(item.link)"
>{{ item.text }}</router-link>But I cannot find this style at existing code. or these two following styles would be better? it's most likely to original style. <router-link class="router-link"
:to="item.link"
v-if="!isExternal(item.link)">
{{ item.text }}
</router-link>or <router-link class="router-link"
:to="item.link"
v-if="!isExternal(item.link)">{{ item.text }}</router-link>Can you give a code snippet that you think is reasonable? Thank you. There was a problem hiding this comment. Yeah, that's pretty much what I said The reasonable one would be: <router-link
class="router-link"
:to="item.link"
v-if="!isExternal(item.link)"
>{{ item.text }}</router-link>which doesn't create any extra white space around the text, but, let's wait for Evan input on this one |
||
| {{ item.text }} | ||
| </router-link> | ||
| <a | ||
| v-else | ||
| :href="item.link" | ||
| target="_blank" | ||
| class="router-link"> | ||
|
|
||
| {{ item.text }} | ||
| </a> | ||
| </template> | ||
|
|
||
| <script> | ||
| import { isExternal } from './util' | ||
| export default { | ||
| props: { | ||
| item: { | ||
| required: true | ||
| } | ||
| }, | ||
| mixins: [ | ||
|
There was a problem hiding this comment. thanks, using a mixin here is to reuse the existing method. or you would have a better way to do it. There was a problem hiding this comment. you can just put the methods object without the mixins, it would also work There was a problem hiding this comment. Cool, long time to write Vue, I just forgot some important thing, thanks. |
||
| { | ||
| methods: { | ||
| isExternal | ||
| } | ||
| } | ||
| ] | ||
| } | ||
| </script> | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,11 +1,25 @@ | ||
| <template> | ||
| <nav class="nav-links" v-if="userLinks.length || githubLink"> | ||
| <!-- user links --> | ||
| <div | ||
| class="nav-item" | ||
| v-for="item in userLinks" | ||
| :key="item.link"> | ||
| <div | ||
| v-if="item.type === 'dropdown'" | ||
| class="dropdown-wrapper"> | ||
| <span class="dropdown-title">{{ item.text }}</span> | ||
| <span class="arrow"></span> | ||
| <ul class="nav-dropdown"> | ||
| <li | ||
| v-for="subItem in item.items" | ||
| :key="subItem.link"> | ||
| <nav-link :item="subItem"></nav-link> | ||
| </li> | ||
| </ul> | ||
| </div> | ||
| <nav-link v-else :item="item"></nav-link> | ||
| </div> | ||
| <!-- github link --> | ||
| <a v-if="githubLink" | ||
| :href="githubLink" | ||
|
|
@@ -20,15 +34,18 @@ | |
|
|
||
| <script> | ||
| import OutboundLink from './OutboundLink.vue' | ||
| import NavLink from './NavLink.vue' | ||
| import { isActive, ensureExt } from './util' | ||
|
|
||
| export default { | ||
| components: { OutboundLink, NavLink }, | ||
| computed: { | ||
| userLinks () { | ||
| return (this.$site.themeConfig.nav || []).map(({ text, link, type, items }) => ({ | ||
| text, | ||
| type, | ||
| link: link ? ensureExt(link) : void 0, | ||
|
There was a problem hiding this comment. maybe something more readable like |
||
| items: (items || []).map(({ text, link }) => ({ text, link: ensureExt(link) })) | ||
| })) | ||
| }, | ||
| githubLink () { | ||
|
|
@@ -52,21 +69,84 @@ export default { | |
| .nav-links | ||
| display inline-block | ||
| a | ||
| line-height 1.25rem | ||
| color inherit | ||
| &:hover, &.router-link-active | ||
| color $accentColor | ||
| .nav-item | ||
| position relative | ||
| display inline-block | ||
| margin-left 1.5rem | ||
| font-weight 500 | ||
| line-height 2rem | ||
| .dropdown-wrapper | ||
| cursor pointer | ||
| padding-right 15 | ||
| &:hover .nav-dropdown | ||
| display block | ||
| .arrow | ||
| display inline-block | ||
| vertical-align middle | ||
| margin-top -1px | ||
| margin-left 6px | ||
| width 0 | ||
| height 0 | ||
| border-left 4px solid transparent | ||
| border-right 4px solid transparent | ||
| border-top 5px solid #ccc | ||
| .nav-dropdown | ||
| li | ||
| color inherit | ||
| line-height 1.7rem | ||
| padding: 0 1.5rem 0 1.25rem | ||
| a | ||
| position relative | ||
| border-bottom: none | ||
| font-weight 400 | ||
| &.router-link-active | ||
| color: $accentColor | ||
| &:after | ||
| content: "" | ||
| width: 0 | ||
| height: 0 | ||
|
|
||
| border-left 5px solid $accentColor | ||
| border-top 4px solid transparent | ||
| border-bottom 4px solid transparent | ||
| position absolute | ||
| top calc(50% - 3px) | ||
| left -10px | ||
| &:hover | ||
| margin-bottom 0 | ||
|
There was a problem hiding this comment. this should be moved to There was a problem hiding this comment. AWESOME! fixed at 6de2efa, thank for finding it out. |
||
| color $accentColor | ||
| .github-link | ||
| margin-left 1.5rem | ||
|
|
||
| @media (max-width: $MQMobile) | ||
| .nav-links | ||
| .nav-item, .github-link | ||
| margin-left 0 | ||
|
|
||
| @media (min-width: $MQMobile) | ||
| .nav-links | ||
| a | ||
| &:hover, &.router-link-active | ||
| color $textColor | ||
| margin-bottom -2px | ||
| border-bottom 2px solid lighten($accentColor, 5%) | ||
| .nav-dropdown | ||
| display none | ||
| box-sizing border-box; | ||
| max-height calc(100vh - 2.7rem) | ||
| overflow-y auto | ||
| position absolute | ||
| top 100% | ||
| right 0 | ||
| background-color #fff | ||
| padding 10px 0 | ||
| border 1px solid #ddd | ||
| border-bottom-color #ccc | ||
| text-align left | ||
| border-radius 0.25rem | ||
| white-space nowrap | ||
| margin 0 | ||
| </style> | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Those links can also be dropdown menus, add nested items via
items:There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
fixed at 50689ea, thanks