feat(components): create navbar component
This commit is contained in:
		
							parent
							
								
									c0c11ba1ea
								
							
						
					
					
						commit
						cd64636715
					
				
							
								
								
									
										28
									
								
								components/layouts/navbar.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										28
									
								
								components/layouts/navbar.vue
									
									
									
									
									
										Normal file
									
								
							| @ -0,0 +1,28 @@ | |||||||
|  | <script lang="ts" setup> | ||||||
|  | const itemMap = { | ||||||
|  | 	"bands": "/bands", | ||||||
|  | 	"authors": "/authors" | ||||||
|  | }; | ||||||
|  | let cur = Object.keys(itemMap).find(a => itemMap[a] === useRoute().name) || ""; | ||||||
|  | let selected: string[] = [cur] | ||||||
|  | const clickFn = (minfo) => { | ||||||
|  | 	navigateTo(itemMap[ minfo.key ]) | ||||||
|  | } | ||||||
|  | </script> | ||||||
|  | 
 | ||||||
|  | <template> | ||||||
|  | 	<a-menu mode="horizontal" class="navibar" :style="{ | ||||||
|  | 		height: '40px', | ||||||
|  | 		alignSelf: 'center', | ||||||
|  | 		justifyContent: 'stretch' | ||||||
|  | 		}" @click="clickFn" :selectedKeys="selected"> | ||||||
|  | 		<a-menu-item key="bands"> | ||||||
|  | 			Bands | ||||||
|  | 		</a-menu-item> | ||||||
|  | 	</a-menu> | ||||||
|  | </template> | ||||||
|  | <style scoped> | ||||||
|  | 	.navibar { | ||||||
|  | 		align-self: stretch; | ||||||
|  | 	} | ||||||
|  | </style> | ||||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user