Add basic "menu" component, for typical use case
This commit is contained in:
		
							parent
							
								
									554736e842
								
							
						
					
					
						commit
						11392e864e
					
				
					 3 changed files with 82 additions and 0 deletions
				
			
		| 
						 | 
				
			
			@ -1,9 +1,11 @@
 | 
			
		|||
import ByjoveApp from './app'
 | 
			
		||||
import ByjoveMenu from './menu'
 | 
			
		||||
import ByjoveLogo from './logo'
 | 
			
		||||
import ByjoveFeedback from './feedback'
 | 
			
		||||
 | 
			
		||||
export {
 | 
			
		||||
    ByjoveApp,
 | 
			
		||||
    ByjoveMenu,
 | 
			
		||||
    ByjoveLogo,
 | 
			
		||||
    ByjoveFeedback,
 | 
			
		||||
}
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
							
								
								
									
										77
									
								
								src/components/menu/ByjoveMenu.vue
									
										
									
									
									
										Normal file
									
								
							
							
						
						
									
										77
									
								
								src/components/menu/ByjoveMenu.vue
									
										
									
									
									
										Normal file
									
								
							| 
						 | 
				
			
			@ -0,0 +1,77 @@
 | 
			
		|||
<template>
 | 
			
		||||
  <section>
 | 
			
		||||
    <nav class="level is-mobile">
 | 
			
		||||
      <div class="level-item">
 | 
			
		||||
 | 
			
		||||
        <b-dropdown v-if="user"
 | 
			
		||||
                    aria-role="list">
 | 
			
		||||
          <button class="button is-primary"
 | 
			
		||||
                  :class="{'is-danger': user.is_root}"
 | 
			
		||||
                  slot="trigger">
 | 
			
		||||
            <span>{{ user.short_name }}</span>
 | 
			
		||||
            <!-- <b-icon icon="menu-down"></b-icon> -->
 | 
			
		||||
          </button>
 | 
			
		||||
 | 
			
		||||
          <b-dropdown-item aria-role="listitem" has-link>
 | 
			
		||||
            <router-link to="/">Home</router-link>
 | 
			
		||||
          </b-dropdown-item>
 | 
			
		||||
 | 
			
		||||
          <slot></slot>
 | 
			
		||||
 | 
			
		||||
          <b-dropdown-item aria-role="listitem" has-link>
 | 
			
		||||
            <router-link to="/logout">Logout</router-link>
 | 
			
		||||
          </b-dropdown-item>
 | 
			
		||||
 | 
			
		||||
          <b-dropdown-item aria-role="listitem" has-link>
 | 
			
		||||
            <router-link to="/about">About</router-link>
 | 
			
		||||
          </b-dropdown-item>
 | 
			
		||||
 | 
			
		||||
        </b-dropdown>
 | 
			
		||||
 | 
			
		||||
        <b-button v-if="!user"
 | 
			
		||||
                  type="is-primary"
 | 
			
		||||
                  tag="router-link" to="/login">
 | 
			
		||||
          Login
 | 
			
		||||
        </b-button>
 | 
			
		||||
      </div>
 | 
			
		||||
 | 
			
		||||
      <div class="level-item">
 | 
			
		||||
        {{ title }}
 | 
			
		||||
      </div>
 | 
			
		||||
 | 
			
		||||
      <div class="level-item">
 | 
			
		||||
        <byjove-feedback :url="feedbackUrl"></byjove-feedback>
 | 
			
		||||
      </div>
 | 
			
		||||
    </nav>
 | 
			
		||||
 | 
			
		||||
  </section>
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
<script>
 | 
			
		||||
import ByjoveFeedback from '../feedback'
 | 
			
		||||
export default {
 | 
			
		||||
    name: 'ByjoveMenu',
 | 
			
		||||
    props: {
 | 
			
		||||
        appsettings: Object,
 | 
			
		||||
        feedbackUrl: {
 | 
			
		||||
            type: String,
 | 
			
		||||
            default: '/api/feedback',
 | 
			
		||||
        },
 | 
			
		||||
    },
 | 
			
		||||
    components: {
 | 
			
		||||
        ByjoveFeedback,
 | 
			
		||||
    },
 | 
			
		||||
    computed: {
 | 
			
		||||
        title: function() {
 | 
			
		||||
            if (this.appsettings.production) {
 | 
			
		||||
                return this.appsettings.systemTitle
 | 
			
		||||
            } else {
 | 
			
		||||
                return "[STAGE] " + this.appsettings.systemTitle
 | 
			
		||||
            }
 | 
			
		||||
        },
 | 
			
		||||
        user: function() {
 | 
			
		||||
            return this.$store.state.user
 | 
			
		||||
        }
 | 
			
		||||
    },
 | 
			
		||||
}
 | 
			
		||||
</script>
 | 
			
		||||
							
								
								
									
										3
									
								
								src/components/menu/index.js
									
										
									
									
									
										Normal file
									
								
							
							
						
						
									
										3
									
								
								src/components/menu/index.js
									
										
									
									
									
										Normal file
									
								
							| 
						 | 
				
			
			@ -0,0 +1,3 @@
 | 
			
		|||
import ByjoveMenu from './ByjoveMenu'
 | 
			
		||||
 | 
			
		||||
export default ByjoveMenu
 | 
			
		||||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue