<template>
	<div class="arca-dashboard-wiki">
		<nav class="menu">
			<div class="menu-item collapse-item">
				<div class="section-title">Widget</div>
				<div class="collapse-item__content">
					<div class="menu-item">
						<router-link class="link" to="/wiki/widget">Installazione</router-link>
						<router-link class="link" to="/wiki/widget/data-type">Definire il tipo di dato consumato dal widget</router-link>
						<router-link class="link" to="/wiki/widget/actions">Widget Action/PostAction</router-link>
						<router-link class="link" to="/wiki/widget/handler">Simulare le risposte delle chiamate ad Arca</router-link>
					</div>
				</div>
			</div>
			<div class="menu-item collapse-item">
				<div class="section-title">Componenti</div>
				<div class="collapse-item__content">
					<div class="menu-item">
						<router-link class="link" to="/wiki/componenti/arca-button">arca-button</router-link>
						<router-link class="link" to="/wiki/componenti/arca-combo-box">arca-combo-box</router-link>
						<router-link class="link" to="/wiki/componenti/arca-icon">arca-icon</router-link>
						<router-link class="link" to="/wiki/componenti/arca-modal">arca-modal</router-link>
					</div>
				</div>
			</div>
		</nav>
		<div class="page-content">
			<router-view class="page" />
		</div>
	</div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from "vue-property-decorator"
import "@/Styles/Base.less"

@Component
export default class ArcaDashboardWikiComponent extends Vue
{
	
}
</script>

<style lang="less" scoped>
.arca-dashboard-wiki {
	.menu {
		width: 250px;
		height: 100%;

		position: fixed;
		top: 0;
		left: 0;

		padding: 10px;

		user-select: none;

		border-right: 2px solid #EEEEEE;
		background-color: #EEEEEE;

		.menu-item {
			font-weight: normal;
			> .collapse-item__content {
				margin-left: 10px;
			}
			> .section-title {
				margin: 10px 0px;
			}
		}

		.section-title {
			font-weight: bold;
			color: #CC0000;
		}

		.link {
			display: block;
			text-decoration: none;
			color: #444444;
			padding: 5px;

			&:hover {
				color: #444444;
				background-color: #FFFFFF;
			}
		}
	}
	.page-content::v-deep {
		width: calc(100% - 250px);
		height: 100%;

		position: fixed;
		top: 0px;
		left: 250px;

		overflow-y: auto;
		
		padding: 20px;

		> .page {
			max-width: 720px;
		}

		hr.section-separator {
			margin: 30px 0px;
		}

		p {
			margin: 10px 0px;

			color: #444444;
		}

		h1, h2, h3, h4, h5, h6 {
			margin: 10px 0px;
		}

		ul, ol {
			margin-left: 40px;
		}

		h1 {
			font-size: 32px;
			color: @theme-color;
			font-weight: bold;
		}
		h2 {
			font-size: 24px;
			color: #444444;
		}
	}
}
</style>