<template>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark" :dir="$i18n.locale == 'ar'?'rtl':'ltr'">
<div class="container-fluid">
<router-link :to="{ name: 'Home' }" class="navbar-brand d-flex align-items-center">
<i class="bi bi-box2-heart h1 me-1"></i>
<strong>VUE</strong>
</router-link>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item me-3">
<router-link class="nav-link" :class="$route.name == 'Home'? 'active':''" aria-current="page" :to="{ name: 'Home' }">
{{$t('Home')}}
</router-link>
</li>
<li class="nav-item me-3">
<router-link class="nav-link" :class="$route.name == 'About'? 'active':''" aria-current="page" :to="{ name: 'About' }">
{{$t('About')}}
</router-link>
</li>
</ul>
<div class="locale-changer">
<select v-model="$i18n.locale">
<option v-for="locale in $i18n.availableLocales" :key="`locale-${locale}`" :value="locale">{{ locale }}</option>
</select>
</div>
</div>
</div>
</nav>
</template>