<template>
    <div id="app">
        <el-container>

            <!-- Header -->
            <el-header class="main-header shadow-1">
                <!-- LOGO -->
                <el-avatar class="logo" shape="square" size="small" src="./favicon.ico"></el-avatar>

                <!-- 菜单 -->
                <el-menu class="menu" default-active="home" mode="horizontal">
                    <el-menu-item index="title" class="title" disabled>Frost 网址导航</el-menu-item>
                    <el-menu-item index="home">主页</el-menu-item>
                    <el-menu-item index="tools" disabled>小工具</el-menu-item>
                    <el-menu-item index="settings" disabled>设置</el-menu-item>
                </el-menu>
            </el-header>

            <!-- Container -->
            <router-view class="main-container" />

        </el-container>
    </div>
</template>

<style lang="less">
.main-header {
    display: flex;
    align-items: center;
    z-index: 200;
    height: @headerHeight !important;
    background-color: #FFF;

    .menu {
        height: 2.5rem;
        border: none !important;

        > li {
            height: 100%;
            line-height: 2.5rem;

            &.is-active {
                border-bottom-color: transparent;
                color: @colorPrimary !important;
            }
        }

        .title {
            font-size: 1.2rem;
            color: @colorPrimary;
            opacity: 1;
            cursor: default;
        }
    }
}

.main-container {
    height: calc(100vh - @headerHeight);
}
</style>
