Secondary Navigation

The secondary navigation is a flexible component which allows user to build custom sub navigation.

Usage

Secondary navigation by default is empty container. If groups are needed groups prop should be passed to component using SubCategory[] interface.

<template>
  <ci-secondary-navigation
    title="Usage demo"
    :groups="groups"
  />
</template>
<script>
export default {
  data () {
    return {
      groups: [
        {
          id: 'demos',
          title: null,
          items: [
            { id: 'home', text: 'Home', onClick: this.makeActive('home'), active: true },
            { id: 'team', text: 'My Team', onClick: this.makeActive('team'), active: false },
            { id: 'opportunities', text: 'Opportunities', onClick: this.makeActive('opportunities'), active: false  }
          ]
        }
      ]
    }
  },
  methods: {
    makeActive (itemId) {
      return () => {
        this.groups[0].items.forEach(item => {
          item.active = false;
        });

        const item = this.groups[0].items.find(u => u.id === itemId);
        item.active = true;
      }
    },
  }
}
</script>

Title

Use the title prop or slot to give your secondary menu a title.

<template>
  <ci-secondary-navigation :groups="groups">
    <template #title>
      <b>Custom title</b>
    </template>
  </ci-secondary-navigation>
</template>
<script>
export default {
  data () {
    return {
      groups: [
        {
          id: 'demos',
          title: null,
          items: [
            { id: 'Latvia', text: 'Latvia', onClick: this.makeActive('Latvia'), active: true },
            { id: 'Lithuania', text: 'Lithuania', onClick: this.makeActive('Lithuania'), active: false },
            { id: 'Estonia', text: 'Estonia', onClick: this.makeActive('Estonia'), active: false  }
          ]
        }
      ]
    }
  },
  methods: {
    makeActive (itemId) {
      return () => {
        this.groups[0].items.forEach(item => {
          item.active = false;
        });

        const item = this.groups[0].items.find(u => u.id === itemId);
        item.active = true;
      }
    },
  }
}
</script>

Bottom slot

Use the bottom slot to add content to bottom of secondary navigation.

<template>
  <ci-secondary-navigation :groups="groups">
    <template #title>
      <b>Custom title</b>
    </template>
    <template #bottom>
      <b>Public Beta</b>
    </template>
  </ci-secondary-navigation>
</template>
<script>
export default {
  data () {
    return {
      groups: [
        {
          id: 'demos',
          title: null,
          items: [
            { id: 'One', text: 'One', onClick: this.makeActive('One'), active: true },
            { id: 'Two', text: 'Two', onClick: this.makeActive('Two'), active: false },
            { id: 'Three', text: 'Three', onClick: this.makeActive('Three'), active: false  }
          ]
        }
      ]
    }
  },
  methods: {
    makeActive (itemId) {
      return () => {
        this.groups[0].items.forEach(item => {
          item.active = false;
        });

        const item = this.groups[0].items.find(u => u.id === itemId);
        item.active = true;
      }
    },
  }
}
</script>

Variants

Use the variant slot to change style of component. Available variants are normal, dark and slate. Default is normal.

<template>
  <DemoGrid>
    <ci-secondary-navigation
      :groups="groups"
      title="Normal"
    />
    <ci-secondary-navigation
      :groups="groups"
      variant="slate"
      title="Slate"
    />
    <ci-secondary-navigation
      :groups="groups"
      variant="dark"
      title="Dark"
    />
  </DemoGrid>

</template>
<script>
export default {
  data () {
    return {
      groups: [
        {
          id: 'demos',
          title: null,
          items: [
            { id: 'One', text: 'One', onClick: this.makeActive('One'), active: true },
            { id: 'Two', text: 'Two', onClick: this.makeActive('Two'), active: false },
            { id: 'Three', text: 'Three', onClick: this.makeActive('Three'), active: false  }
          ]
        }
      ]
    }
  },
  methods: {
    makeActive (itemId) {
      return () => {
        this.groups[0].items.forEach(item => {
          item.active = false;
        });

        const item = this.groups[0].items.find(u => u.id === itemId);
        item.active = true;
      }
    }
  }
}
</script>

Sub categories

If sub categories are needed then use multiple items inside groups prop and set title for category.

<template>
  <DemoGrid>
    <ci-secondary-navigation
      :groups="groups"
      title="Normal"
    />
    <ci-secondary-navigation
      :groups="groups"
      variant="slate"
      title="Slate"
    />
    <ci-secondary-navigation
      :groups="groups"
      variant="dark"
      title="Dark"
    />
  </DemoGrid>

</template>
<script>
export default {
  data () {
    return {
      groups: [
        {
          id: 'demos',
          items: [
            { id: 'One', text: 'One', onClick: this.makeActive('demos', 'One'), active: true },
            { id: 'Two', text: 'Two', onClick: this.makeActive('demos','Two'), active: false },
            { id: 'Three', text: 'Three', onClick: this.makeActive('demos','Three'), active: false  }
          ]
        },
        {
          id: 'demos2',
          title: 'SUB CATEGORY',
          items: [
            { id: 'One2', text: 'One', onClick: this.makeActive('demos2','One2'), active: true },
            { id: 'Two2', text: 'Two', onClick: this.makeActive('demos2','Two2'), active: false },
            { id: 'Three2', text: 'Three', onClick: this.makeActive('demos2','Three2'), active: false  }
          ]
        },
        {
          id: 'demos3',
          title: 'NEW CATEGORY',
          items: [
            { id: 'One3', text: 'One', onClick: this.makeActive('demos3','One3'), active: true },
            { id: 'Two3', text: 'Two', onClick: this.makeActive('demos3','Two3'), active: false },
            { id: 'Three3', text: 'Three', onClick: this.makeActive('demos3','Three3'), active: false  }
          ]
        }
      ]
    }
  },
  methods: {
    makeActive (categoryId, itemId) {
      return () => {
        this.groups.forEach(group => {
          group.items.forEach(item => {
            item.active = false;
          });
        });

        const item = this.groups.find(u => u.id === categoryId).items.find(u => u.id === itemId);
        item.active = true;
      }
    }
  }
}
</script>

Quantity chip

Use the quantity inside items to set quantity chip. Default is null.

<template>
  <DemoGrid>
    <ci-secondary-navigation
      :groups="groups"
      title="Normal"
    />
    <ci-secondary-navigation
      :groups="groups"
      variant="slate"
      title="Slate"
    />
    <ci-secondary-navigation
      :groups="groups"
      variant="dark"
      title="Dark"
    />
  </DemoGrid>

</template>
<script>
export default {
  data () {
    return {
      groups: [
        {
          id: 'demos',
          title: null,
          items: [
            { id: 'One', text: 'One', onClick: this.makeActive('One'), active: true },
            { id: 'Two', text: 'Two', onClick: this.makeActive('Two'), active: false, quantity: 123 },
            { id: 'Three', text: 'Three', onClick: this.makeActive('Three'), active: false, quantity: 9  },
            { id: 'Four', text: 'FourFourFourFourFourFourFour', onClick: this.makeActive('Four'), active: false, quantity: 12  }
          ]
        }
      ]
    }
  },
  methods: {
    makeActive (itemId) {
      return () => {
        this.groups[0].items.forEach(item => {
          item.active = false;
        });

        const item = this.groups[0].items.find(u => u.id === itemId);
        item.active = true;
      }
    }
  }
}
</script>

Organization info

Use the orgId and orgName props to set company info. Info is displayed inside bottom slot.

<template>
  <ci-secondary-navigation
    :groups="groups"
    variant="dark"
    title="Org info"
    orgName="Test company"
    orgId="1234"
  />
</template>
<script>
export default {
  data () {
    return {
      groups: [
        {
          id: 'demos',
          title: null,
          items: [
            { id: 'One', text: 'One', onClick: this.makeActive('One'), active: true },
            { id: 'Two', text: 'Two', onClick: this.makeActive('Two'), active: false },
            { id: 'Three', text: 'Three', onClick: this.makeActive('Three'), active: false  }
          ]
        }
      ]
    }
  },
  methods: {
    makeActive (itemId) {
      return () => {
        this.groups[0].items.forEach(item => {
          item.active = false;
        });

        const item = this.groups[0].items.find(u => u.id === itemId);
        item.active = true;
      }
    }
  }
}
</script>

Events

Event	Args	Emitted when...
@close-menu	-	the cross icon is pressed on mobile