Dropdown Items in Navbar #13

ulivz · 2018-04-14T10:56:53Z

Summary

This branch is for the dropdown Items in navbar, and fully leverage the style from vue offical website.

Changes

Support dropdown items in navbar.
Support nested dropdown item.
Fixed a bug of using external link(External Navbar Links #37) at a nested route which will take user to somewhere like **guide/https://vuejs.org/**.

Prewview

https://deploy-preview-13--vuepress.netlify.com/

posva · 2018-04-14T13:53:05Z

docs/default-theme-config/README.md

@@ -48,6 +48,25 @@ module.exports = {
 }
 ```

+The item in `themeConfig.nav` could also be a dropdown menu:


Those links can also be dropdown menus, add nested items via items:

fixed at 50689ea, thanks

posva · 2018-04-14T13:55:13Z

lib/default-theme/NavLink.vue

+  <router-link
+    class="router-link"
+    :to="item.link"
+    v-if="!isExternal(item.link)">


better put the > on the next line, stuck to {{ item.text }} and stick the next router-link to the end of it too. But I see it comes this way from the original code 🤔

Thanks, when I checked existing code, I found that the original code is always this way:

 <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.

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

cool, fixed at 7eb2563

posva · 2018-04-14T13:55:18Z

lib/default-theme/NavLink.vue

+    v-else
+    :href="item.link"
+    target="_blank"
+    class="router-link">


posva · 2018-04-14T13:55:43Z

lib/default-theme/NavLink.vue

+        required: true
+      }
+    },
+    mixins: [


why do you use a mixin here?

thanks, using a mixin here is to reuse the existing method. or you would have a better way to do it.

you can just put the methods object without the mixins, it would also work

Cool, long time to write Vue, I just forgot some important thing, thanks.

posva · 2018-04-14T14:00:32Z

lib/default-theme/NavLinks.vue

+      return (this.$site.themeConfig.nav || []).map(({ text, link, type, items }) => ({
+        text,
+        type,
+        link: link ? ensureExt(link) : void 0,


maybe something more readable like null instead of void 0

fixed at 50689ea, thanks

egoist · 2018-04-14T15:22:53Z

lib/default-theme/NavLinks.vue

+                top calc(50% - 3px)
+                left -10px
+            &:hover
+              margin-bottom 0


this should be moved to a

AWESOME! fixed at 6de2efa, thank for finding it out.

egoist · 2018-04-14T15:23:08Z

lib/default-theme/NavLinks.vue

+              &:after
+                content: ""
+                width: 0
+                height: 0


fixed at 50689ea, thanks

ulivz · 2018-04-14T16:58:45Z

@posva and lovely @egoist, I just addressed the comments that I can fix now, and there are still some pending comments, would you please help me to sync with it? thanks

ulivz · 2018-04-14T17:07:30Z

I just checked at vue official doc, and found out this dropdown style, @yyx990803 Do you think I need to finish this feature in this PR? (In vuejs.org, it's hard html code now.)

To do that, I just come up with some config styles for that:

Flattern style

module.exports = {
  themeConfig: {
    nav: [
      {
        text: 'Ecosystem',
        type: 'dropdown',
        items: [
          { text: 'Help', type: 'label' },   // Or allow to omit the type?
          { text: 'Forum', link: '...' },
          { text: 'Chat', link: '...' },
          { text: 'Tooling' },
          { text: 'Devtools', link: '...' }
          // ...
        ]
      }
    ]
  }
}

Flattern style from docute:

module.exports = {
  themeConfig: {
    nav: [
      {
        title: 'Ecosystem',
        type: 'dropdown',
        items: [
          { type: 'label', title: 'Help' },
          // ... items
          { type: 'sep' } // separator
          // ... other items
        ]
      }
    ]
  }
}

Semantic style

module.exports = {
  themeConfig: {
    nav: [
      {
        text: 'Ecosystem',
        type: 'dropdown',
        items: [
          {
            text: 'Help',
            items: [
              { text: 'Forum', link: '...' },
              { text: 'Chat', link: '...' }
            ]
          },
          {
            text: 'Tooling',
            items: [
              { text: 'Devtools', link: '...' },
              // ...
            ]
          },
          // ...
        ]
      }
    ]
  }
}

Which do you think is better? or better suggestion?

BTW, at present, when a item does not provide link but provides items, it can be treated as a dropdown, so can we omit passing type=dropdown?

ulivz · 2018-04-14T18:46:11Z

@posva Addressed all comments, thanks.

yyx990803 · 2018-04-14T21:15:09Z

I like style 3 (Semantic). We can treat items as indication of a dropdown.

ulivz · 2018-04-14T21:45:57Z

@yyx990803 Got it, I will work at here.

In addition, I am also working for the Multi-Language Support based on this dropdown feature.

PR is here. https://github.com/ulivz/vuepress/pull/1, now the basic function is done and the rest of the job is almost translating, welcome to go here and give me some thoughts so that I can make it better. thank you.

ulivz · 2018-04-14T22:59:57Z

Updated

Commit: 6c9e1a4

Deprecate type: dropdown at add built-in type judgment for link item.
Support nested links at dropdown menu and leverage the style from Vue official website.

ulivz · 2018-04-15T04:41:32Z

@egoist @posva If there are no other defects, would you please help me to approve, thank you very much!

yyx990803 · 2018-04-15T18:38:27Z

lib/default-theme/NavLink.vue

+    class="router-link"
+    :to="link"
+    v-if="!isExternal(link)"
+    exact


See 67c758e, should only be exact for the homepage.

Fixed at 96a6cc6.

yyx990803 · 2018-04-15T21:33:29Z

lib/default-theme/NavLinks.vue

+              <li
+                v-for="childSubItem in subItem.items"
+                :key="childSubItem.link">
+                <nav-link :item="childSubItem"></nav-link>


Some conflicts due to fixes which are also addressed in this PR. Should be easy to resolve.

All conflict has been resolved.

…code.

yyx990803

Looking good! Thanks for the great work. Some final small tweaks:

.nav-item should have cursor: pointer
On mobile, the dropdown links should be togglable. Otherwise with a lot of dropdown items, the sidebar of the current page gets pushed down too much.
To implement (2) we should probably extract the dropdown into its own component.

ulivz · 2018-04-16T17:44:08Z

@yyx990803 As a fanatic fan of Vue, it's voluntary and my honor to do this.

1: 4bf15cb
2: 650089d
3: Adopted

Thank you for your advices. It looks better now.

yyx990803 · 2018-04-16T17:56:46Z

Awesome! One final thing: the dropdowns should be collapsed by default on Mobile.

After that we can remove the test dropdown links and ready to merge.

… on mobile.

ulivz · 2018-04-16T18:02:03Z

Fixed at b3e0583 ~

yyx990803 · 2018-04-16T18:07:50Z

Thanks for the great work! 🎉

ulivz added 7 commits April 14, 2018 16:42

dropdown - init

0494566

add nav link component to distinguish internal and external link

121e6ca

enhance the active state of dropdown link

3ddca36

beautify font weight for dropdown link and clean code

72be30c

clean code

4bccf3a

update doc

5ac3c2a

update README

dbb7a08

posva requested changes Apr 14, 2018

View reviewed changes

egoist suggested changes Apr 14, 2018

View reviewed changes

address comments

50689ea

ulivz added 2 commits April 15, 2018 01:21

fix jumpy link

6de2efa

address comments

7eb2563

use exact match mode for route link

94c2236

implement nested links in dropdown

6c9e1a4

ulivz added 4 commits April 15, 2018 07:04

clean dropdown type

5ca1d02

fix cursor status

7c6d462

chore: tweaks

96c30c5

Merge branch 'master' into dropdown

3397dc2

This was referenced Apr 15, 2018

External Navbar Links #37

Closed

Multiple Language Support + Complete Chinese Translation #48

Merged

yyx990803 requested changes Apr 15, 2018

View reviewed changes

yyx990803 reviewed Apr 15, 2018

View reviewed changes

Merge branch 'master' into dropdown

5030421

ulivz added 2 commits April 16, 2018 09:45

refactor: address comments and clean duplicate code due to merging.

96a6cc6

style: use more exact class selector, and clean old element selector …

7f440d0

…code.

yyx990803 requested changes Apr 16, 2018

View reviewed changes

ulivz added 2 commits April 17, 2018 00:54

add cursor: pointer to nav item.

4bf15cb

feat: togglable dropdown on mobile

650089d

chore: dropdown - remove test links, and make it collapsed by default…

b3e0583

… on mobile.

yyx990803 approved these changes Apr 16, 2018

View reviewed changes

Update README.md

bf13baa

yyx990803 merged commit 79f8f14 into vuejs:master Apr 16, 2018

meteorlxy pushed a commit that referenced this pull request Jun 17, 2021

chore: add navbar selectLanguageName (#13)

b84830e

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Dropdown Items in Navbar #13

Dropdown Items in Navbar #13

ulivz commented Apr 14, 2018 •

edited

posva Apr 14, 2018

ulivz Apr 14, 2018

posva Apr 14, 2018

ulivz Apr 14, 2018 •

edited

posva Apr 14, 2018 •

edited

ulivz Apr 14, 2018

posva Apr 14, 2018

posva Apr 14, 2018

ulivz Apr 14, 2018

posva Apr 14, 2018

ulivz Apr 14, 2018

posva Apr 14, 2018

ulivz Apr 14, 2018

egoist Apr 14, 2018 •

edited

ulivz Apr 14, 2018 •

edited

egoist Apr 14, 2018

ulivz Apr 14, 2018

ulivz commented Apr 14, 2018

ulivz commented Apr 14, 2018 •

edited

ulivz commented Apr 14, 2018

yyx990803 commented Apr 14, 2018

ulivz commented Apr 14, 2018

ulivz commented Apr 14, 2018 •

edited

ulivz commented Apr 15, 2018

yyx990803 Apr 15, 2018

ulivz Apr 16, 2018

yyx990803 Apr 15, 2018

ulivz Apr 16, 2018

yyx990803 left a comment

ulivz commented Apr 16, 2018 •

edited

yyx990803 commented Apr 16, 2018

ulivz commented Apr 16, 2018 •

edited

yyx990803 commented Apr 16, 2018

Dropdown Items in Navbar #13

Dropdown Items in Navbar #13

Conversation

ulivz commented Apr 14, 2018 • edited

Summary

Changes

Prewview

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ulivz Apr 14, 2018 • edited

Choose a reason for hiding this comment

posva Apr 14, 2018 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

egoist Apr 14, 2018 • edited

Choose a reason for hiding this comment

ulivz Apr 14, 2018 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ulivz commented Apr 14, 2018

ulivz commented Apr 14, 2018 • edited

ulivz commented Apr 14, 2018

yyx990803 commented Apr 14, 2018

ulivz commented Apr 14, 2018

ulivz commented Apr 14, 2018 • edited

Updated

ulivz commented Apr 15, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

yyx990803 left a comment

Choose a reason for hiding this comment

ulivz commented Apr 16, 2018 • edited

yyx990803 commented Apr 16, 2018

ulivz commented Apr 16, 2018 • edited

yyx990803 commented Apr 16, 2018

ulivz commented Apr 14, 2018 •

edited

ulivz Apr 14, 2018 •

edited

posva Apr 14, 2018 •

edited

egoist Apr 14, 2018 •

edited

ulivz Apr 14, 2018 •

edited

ulivz commented Apr 14, 2018 •

edited

ulivz commented Apr 14, 2018 •

edited

ulivz commented Apr 16, 2018 •

edited

ulivz commented Apr 16, 2018 •

edited