Skip to content

Dock

A component displaying a list of vertically arranged buttons of the main side menu. The menu is one of the main navigation elements of the Riupress applications.

Props

list
List of elements
type:Array
active
Active element ID
type:Number
default:-1

Slots

default
Slot for a start button, above the list of elements
footer
Additional buttons slot

Examples

Menu type: dock

html
<dock :list="items" :active-item="activeItem" @set-active-item="setActive" @update="update">
  <dock-item title="Home" isIcon :id="0" :active="activeItem === 0" @click="setActive(0)"
    ><icon size="full" :icon="home"
  /></dock-item>
  <div class="px-2">
    <hr class="border-t border-secondary-200" style="margin: 4px 0px" />
  </div>
  <template #footer>
    <dock-item
      title="Add an element"
      isIcon
      :active="activeModal === 'add'"
      @click="setActiveModal('add')"
      ><icon size="full" :icon="plusIcon"
    /></dock-item>
    <dock-item
      title="Search for an element"
      isIcon
      :active="activeModal === 'search'"
      @click="setActiveModal('search')"
      ><icon size="full" :icon="searchIcon"
    /></dock-item>
  </template>
</dock>
ts
import { ref, computed } from 'vue'
import home from '../../../src/components/icons/IconHome.vue'
import plusIcon from '../../../src/components/icons/IconPlus.vue'
import searchIcon from '../../../src/components/icons/IconSearch.vue'
const items = [
  {
    id: 2,
    name: 'Typescript',
    image: 'https://iconape.com/wp-content/png_logo_vector/typescript.png'
  },
  {
    id: 3,
    name: 'Javascript',
    image:
      'https://upload.wikimedia.org/wikipedia/commons/thumb/9/99/Unofficial_JavaScript_logo_2.svg/1024px-Unofficial_JavaScript_logo_2.svg.png'
  },
  {
    id: 4,
    name: 'Svalte',
    image: 'https://upload.wikimedia.org/wikipedia/commons/1/1b/Svelte_Logo.svg'
  },
  {
    id: 5,
    name: 'CSS3',
    image: 'https://webroad.pl/wp-content/uploads/2014/07/css3-logo.jpg'
  },
  {
    id: 6,
    name: 'VueJS',
    image:
      'https://assets.codepen.io/t-1003/internal/avatars/teams/default.png?fit=crop&format=auto&height=256&version=1513627136&width=256'
  }
]
const active = ref(0)
const activeModal = ref('')
function setActive(event) {
  active.value = event
  activeModal.value = ''
}
function setActiveModal(event) {
  activeModal.value = event
}
const activeItem = computed(() => active.value)
function update() {
  console.log('update')
}

Why this component?

This component is intended for building a menu with which you can choose the main page sections. In the case of PayForDone (my startup), these will be organizations, but from this menu you will also be able to add organizations and look for organizations (example above).For all kinds of dashboards, such a menu can only consist of buttons with icons.

The great advantage of such a solution is quick access to the context menu or section that has been selected. An example would be Discord, where we choose the channel and later and see a list of rooms. The user does not lose access to quick switching between the channels, and at the same time has access to the list of rooms in the selected channel.