Skip to content
Snippets Groups Projects
UserSidebar.vue 1.94 KiB
Newer Older
fibasile's avatar
fibasile committed
<template>
  <q-list class="q-pr-xl q-mt-lg">
    <q-item to="/account">
      <q-item-section avatar>
        <q-avatar>
          <q-img basic src="https://cdn.quasar.dev/img/avatar2.jpg"/>
        </q-avatar>
      </q-item-section>
      <q-item-section>
        <q-item-label>Jane Fonda</q-item-label>
        <q-item-label caption>jane@gmail.com</q-item-label>
      </q-item-section>
      <q-item-section side>
        <q-btn round dense flat to="/account/edit">
          <q-icon name="fas fa-edit" size="18px" class="q-pa-sm"/>
        </q-btn>
      </q-item-section>
    </q-item>
    <q-item>
      <q-item-section>
        <q-item-label caption>Dreamer, artist and extraordinary judo fighter</q-item-label>
      </q-item-section>
    </q-item>
    <q-item>
      <q-separator class="q-my-md"/>
    </q-item>
    <!-- <q-item clickable to="/account">
      <q-item-section avatar>
        <q-avatar color="teal-2">D</q-avatar>
      </q-item-section>
      <q-item-section>
        <q-item-label>Dashboard</q-item-label>
      </q-item-section>
    </q-item>-->
    <q-item clickable to="/account/projects">
      <q-item-section avatar>
        <q-avatar color="teal-2">P</q-avatar>
      </q-item-section>
      <q-item-section>
        <q-item-label>Projects</q-item-label>
      </q-item-section>
    </q-item>
    <q-item clickable to="/account/collections">
      <q-item-section avatar>
        <q-avatar color="teal-2">C</q-avatar>
      </q-item-section>
      <q-item-section>
        <q-item-label>Collections</q-item-label>
      </q-item-section>
    </q-item>
    <q-item clickable to="/account/bookmarks">
      <q-item-section avatar>
        <q-avatar color="teal-2">B</q-avatar>
      </q-item-section>
      <q-item-section>
        <q-item-label>Bookmarks</q-item-label>
      </q-item-section>
    </q-item>
  </q-list>
</template>

<script>
export default {
  // name: 'ComponentName',
  data() {
    return {};
  }
};
</script>

<style>
</style>