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 ByjoveApp from './app'
 | 
				
			||||||
 | 
					import ByjoveMenu from './menu'
 | 
				
			||||||
import ByjoveLogo from './logo'
 | 
					import ByjoveLogo from './logo'
 | 
				
			||||||
import ByjoveFeedback from './feedback'
 | 
					import ByjoveFeedback from './feedback'
 | 
				
			||||||
 | 
					
 | 
				
			||||||
export {
 | 
					export {
 | 
				
			||||||
    ByjoveApp,
 | 
					    ByjoveApp,
 | 
				
			||||||
 | 
					    ByjoveMenu,
 | 
				
			||||||
    ByjoveLogo,
 | 
					    ByjoveLogo,
 | 
				
			||||||
    ByjoveFeedback,
 | 
					    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