Cv-side-nav inconsistent render

Detailed description

Describe in detail the issue you’re having.

When using the cv-ui-shell/cv-side-nav.vue component, if I try to render it as a separated component, the layout crashes because one important class isn’t applied, which makes the side-nav get a spacing from top.

Is this a feature request (new component, new icon), a bug, or a general issue?

Bug

Is this issue related to a specific component?

Yes, cv-ui-shell/cv-side-nav.vue

What did you expect to happen? What happened instead? What would you like to see changed?

I expect that if I’m render this component inside a separated file, it still renders the same way as before (with a spacing from top)

What browser are you working in?

Chrome

What version of the Carbon Design System are you using?

“@carbon/vue”: “2.20.1” “carbon-components”: “10.9.2”

What offering/product do you work on? Any pressing ship or release dates we should be aware of?

Steps to reproduce the issue

1. Create a component to render this storybook: http://vue.carbondesignsystem.com/?path=/story/components-cvuishell-header--side-nav-rail-with-header

2. Get all the code for cv-side-nav and put in a separated file (component) and use this new component

3. Check that the layout is broken, with the side-nav overlaying the header

Additional information

https://github.com/carbon-design-system/carbon-components-vue/blob/master/packages/core/src/components/cv-ui-shell/cv-side-nav.vue

The problem is because of the class 'bx--side-nav--ux': isChildOfHeader, not being applied on line 8.

This function below, is undefined when the cv-side-nav is written in a separated file. To find the cvHeader as parent, this function should be this.$parent.$parent.isCvHeader. But maybe this isn’t the best approach for fix it.

isChildOfHeader() {
    return this.$parent.isCvHeader;
},

Thank you

[lee-chase]

Hmm interesting https://codepen.io/lee-chase/pen/xxbMPwY

[rafaelmaiach]

@lee-chase yes! This was the way I created mine. I extracted only the menu for a new file and it worked. I’ll go with this approach as it seems changing the whole nav to a new file can lead to some bugs because of events and having one more tag there isn’t a problem.

Thank you Lee!