Yeti
/
gym
1
0
Fork 0
Code Issues Pull Requests 2 Packages Projects Releases Wiki Activity

feat: Added Styling

fix_layout
Flycro 2023-04-29 12:36:21 +02:00
parent 93bd8267cc
commit 2fdbf860a9
1 changed files with 42 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
src/components/NavigationModel.vue
View File

@ -1,17 +1,47 @@
<script setup>
</script>
<template>
<nav v-show="true" class="navbar navbar-expand navbar-dark bg-dark">
<div class="logo">
LOGO IS HERE
</div>
<div class="navbar-nav">
<router-link to="/" class="nav-item nav-link">Home</router-link>
<router-link to="/Muscles/Legs" class="nav-item nav-link">Legs</router-link>
<router-link to="/Muscles/Back" class="nav-item nav-link">Back</router-link>
<router-link to="/Muscles/Chest" class="nav-item nav-link">Chest</router-link>
<router-link to="/Muscles/Shoulder" class="nav-item nav-link">Shoulder</router-link>
<router-link to="/Muscles/Triceps" class="nav-item nav-link">Triceps</router-link>
<router-link to="/Muscles/Bicepts" class="nav-item nav-link">Bicepts</router-link>
<router-link to="/" class="nav-item nav-link">HomeView</router-link>
<router-link to="/muscles/legs" class="nav-item nav-link">Legs</router-link>
<router-link to="/muscles/back" class="nav-item nav-link">Back</router-link>
<router-link to="/muscles/chest" class="nav-item nav-link">Chest</router-link>
<router-link to="/muscles/shoulder" class="nav-item nav-link">Shoulder</router-link>
<router-link to="/muscles/triceps" class="nav-item nav-link">Triceps</router-link>
<router-link to="/muscles/biceps" class="nav-item nav-link">Biceps</router-link>
</div>
</nav>
</template>
</template>
<script setup>
</script>
<style lang="scss" scoped>
.navbar{
display: flex;
width: 100%;
height: 4rem;
justify-content: start;
background: grey;
}
.navbar-nav{
display: flex;
width: 100%;
justify-content: start;
align-items: center;
}
.nav-item{
margin-left: 1rem;
margin-right: 1rem;
color: white;
text-decoration: none;
}
.nav-item:hover{
color: blue;
}
.logo{
width: 20%;
}
</style>