---
import Splash from '../components/Splash.astro'
import Sidebar from '../components/Sidebar.astro'
import Dashboard from '../components/pages/Dashboard.md'
import Tab2 from '../components/pages/Tab2.astro'
import Tab3 from '../components/pages/Tab3.astro'
import Tab3A from '../components/pages/Tab3A.astro'
import Tab4 from '../components/pages/Tab4.astro'
import Settings from '../components/pages/Settings.astro'

import '../styles/index.scss'
import '../styles/notification.scss'
---

<script src="./navigation.js" crossoarigin="anonymous"></script>
<script defer src="./font-awesome-6.3.0/js/all.js"></script>

<div class="content">
    <Splash />
    <Sidebar />
    <div class="pages">
        <div id="Dashboard" class="page active"><Dashboard /></div>
        <div id="Files" class="page"><Tab2 /></div>
        <div id="Webview Demo" class="page"><Tab3 /></div>
        <div id="Webview Demo 2" class="page"><Tab3A /></div>
        <div id="iFrame Demo" class="page"><Tab4 /></div>
        
        <div id="Settings" class="page"><Settings /></div>
    </div>
</div>

<!-- This is for page 1 and Settings, which is written in Markdown. You're free to remove this -->
<style is:inline>
div#\31, div#\35 {
    padding: 0px 64px 32px 64px;
}
div#Dashboard {
    padding: 70px 100px;
}
a {
    color: white;
}
hr {
    height: 1px;
    background: white;
}
blockquote {
    margin: 0px;
    padding-left: 24px;
    border-left: 2px white solid;
}
img {
    width: 100%;
}
</style>