
<template>
    <div id="layout">

        <nav class="navbar navbar-expand-sm navbar-my sticky-top">

            <button class="btn">
                <div>
                    <i class="fa-solid fa-bars fa-lg"></i>
                </div>
            </button>

            <div class="navbar-brand">
                <i class="fa-brands fa-old-republic fa-lg"></i> M5
            </div>

            <div class="collapse navbar-collapse">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link"><router-link to="/">Home</router-link></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link"><router-link to="/about">About</router-link></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link"><router-link to="/login">Login</router-link></a>
                    </li>

                </ul>
            </div>

        </nav>

        <div class="container-fluid">
            <div class="row">
                <div class="col col-10 my-3 mx-auto">

                    <slot/>

                </div>
            </div>
        </div>

    </div>
</template>


<style lang="scss">

$steel-blue: #4682b4;

.navbar-my {
    background-color: darken($steel-blue, 12%) !important;
}

</style>
