Add and apply the configuration file
This commit is contained in:
KorbsStudio
parent
ea1740bfdc
commit
68d7dfe46b
13 changed files with 135 additions and 101 deletions
46
astro/components/SettingsSidebar.astro
Normal file
46
astro/components/SettingsSidebar.astro
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
---
|
||||
import Tab from './sidebar/Tab.astro'
|
||||
import TabControls from './sidebar/TabWithControls.astro'
|
||||
---
|
||||
|
||||
<div class="settings-sidebar">
|
||||
<div class="settings-sidebar-top">
|
||||
<Tab
|
||||
Page="1"
|
||||
Name="Welcome"
|
||||
Icon="fa-solid fa-wand-magic-sparkles"
|
||||
Default="active" // This selects the tab by default
|
||||
></Tab>
|
||||
|
||||
<Tab
|
||||
Page="2"
|
||||
Name="Files"
|
||||
Icon="fa-solid fa-folder-tree"
|
||||
></Tab>
|
||||
|
||||
<Tab
|
||||
Page="3"
|
||||
Name="Webview Demo"
|
||||
Icon="fa-solid fa-globe"
|
||||
></Tab>
|
||||
|
||||
<TabControls
|
||||
Page="3A"
|
||||
Name="Webview Demo"
|
||||
Icon="fa-solid fa-globe"
|
||||
></TabControls>
|
||||
|
||||
<Tab
|
||||
Page="4"
|
||||
Name="iFrame Demo"
|
||||
Icon="fa-solid fa-eye"
|
||||
></Tab>
|
||||
</div>
|
||||
<div class="settings-sidebar-bottom">
|
||||
<Tab
|
||||
Page="5"
|
||||
Name="Settings"
|
||||
Icon="fa-solid fa-sliders"
|
||||
></Tab>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,46 +1,36 @@
|
|||
---
|
||||
import Tab from './sidebar/Tab.astro';
|
||||
import TabControls from './sidebar/TabWithControls.astro';
|
||||
import { APP, SIDEBARTOP, SIDEBARBOTTOM } from '../config'
|
||||
---
|
||||
|
||||
<div class="sidebar">
|
||||
<div class="sidebar-header">
|
||||
<img src="./logo.png">
|
||||
{APP.map(item => (<p>{item.name}</p>))}
|
||||
</div>
|
||||
<div class="sidebar-top">
|
||||
<Tab
|
||||
Page="1"
|
||||
Name="Welcome"
|
||||
Icon="fa-solid fa-wand-magic-sparkles"
|
||||
Default="active" // This selects the tab by default
|
||||
></Tab>
|
||||
|
||||
<Tab
|
||||
Page="2"
|
||||
Name="Files"
|
||||
Icon="fa-solid fa-folder-tree"
|
||||
></Tab>
|
||||
|
||||
<Tab
|
||||
Page="3"
|
||||
Name="Webview Demo"
|
||||
Icon="fa-solid fa-globe"
|
||||
></Tab>
|
||||
|
||||
<TabControls
|
||||
Page="3A"
|
||||
Name="Webview Demo"
|
||||
Icon="fa-solid fa-globe"
|
||||
></TabControls>
|
||||
|
||||
<Tab
|
||||
Page="4"
|
||||
Name="iFrame Demo"
|
||||
Icon="fa-solid fa-eye"
|
||||
></Tab>
|
||||
{SIDEBARTOP.map(item => (
|
||||
<li data-tab={item.text} class={item.option}>
|
||||
<i class={item.icon}></i>
|
||||
<p>{item.text}</p>
|
||||
<div id="Tab" class="webview-navigation">
|
||||
<button onclick='document.querySelector(".active webview").goBack()'><i class="fa-solid fa-arrow-left-long"></i></button>
|
||||
<button onclick='document.querySelector(".active webview").goForward()'><i class="fa-solid fa-arrow-right-long"></i></button>
|
||||
<button onclick='document.querySelector(".active webview").reload()'><i class="fa-solid fa-arrow-rotate-right"></i></button>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</div>
|
||||
<div class="sidebar-bottom">
|
||||
<Tab
|
||||
Page="5"
|
||||
Name="Settings"
|
||||
Icon="fa-solid fa-sliders"
|
||||
></Tab>
|
||||
{SIDEBARBOTTOM.map(item => (
|
||||
<li data-tab={item.page} class={item.class}>
|
||||
<i class={item.text}></i>
|
||||
<p>{item.text}</p>
|
||||
<div id="Tab" class="webview-navigation">
|
||||
<button onclick='document.querySelector(".active webview").goBack()'><i class="fa-solid fa-arrow-left-long"></i></button>
|
||||
<button onclick='document.querySelector(".active webview").goForward()'><i class="fa-solid fa-arrow-right-long"></i></button>
|
||||
<button onclick='document.querySelector(".active webview").reload()'><i class="fa-solid fa-arrow-rotate-right"></i></button>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
5
astro/components/pages/Settings.astro
Normal file
5
astro/components/pages/Settings.astro
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
import SettingsSidebar from '../SettingsSidebar.astro'
|
||||
---
|
||||
|
||||
<SettingsSidebar />
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
# Settings
|
||||
This template will feature many more components later this year to make it more configurable for developers. Future components will contain a variety of settings together with scripts. However, work on these has not yet commenced.
|
||||
|
||||
The following components are planned:
|
||||
- Personilzation:
|
||||
- Theme
|
||||
- Color Scheme
|
||||
- Blur Toggle
|
||||
- Notifications
|
||||
- Theme
|
||||
- Sound
|
||||
- System:
|
||||
- Power Saving (Windows and macOS only)
|
||||
- Hardware Acceleration*
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
import WebViewControls from '../webview-navigation/TopBar.astro';
|
||||
import WebViewControls from '../webview-navigation/TopBar.astro'
|
||||
---
|
||||
|
||||
<WebViewControls></WebViewControls>
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
---
|
||||
const { Default, Name, Icon, Page } = Astro.props;
|
||||
---
|
||||
|
||||
|
||||
<li data-tab={Page} class=`sidebar-tab ${Default}`>
|
||||
<i class={Icon}></i>
|
||||
<p>{Name}</p>
|
||||
</li>
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
---
|
||||
const { Default, Name, Icon, Page } = Astro.props;
|
||||
---
|
||||
|
||||
|
||||
<li data-tab={Page} class=`sidebar-tab has-navigation ${Default}`>
|
||||
<i class={Icon}></i>
|
||||
<p>{Name}</p>
|
||||
<div id="Tab" class="webview-navigation">
|
||||
<button onclick='document.querySelector(".active webview").goBack()'><i class="fa-solid fa-arrow-left-long"></i></button>
|
||||
<button onclick='document.querySelector(".active webview").goForward()'><i class="fa-solid fa-arrow-right-long"></i></button>
|
||||
<button onclick='document.querySelector(".active webview").reload()'><i class="fa-solid fa-arrow-rotate-right"></i></button>
|
||||
</div>
|
||||
</li>
|
||||
41
astro/config.ts
Normal file
41
astro/config.ts
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
export const APP = [{
|
||||
name: "App Name",
|
||||
website: "https://mycompany.net/",
|
||||
support: "https://mycompany.net/help/",
|
||||
sourcecode: "https://github.com/company/app-name"
|
||||
}]
|
||||
|
||||
// Top tabs of your sidbear
|
||||
export const SIDEBARTOP = [
|
||||
{
|
||||
text: "Dashboard",
|
||||
icon: "fa-solid fa-wand-magic-sparkles",
|
||||
option: "active"
|
||||
},
|
||||
{
|
||||
text: "Files",
|
||||
icon: "fa-solid fa-folder-tree",
|
||||
},
|
||||
{
|
||||
text: "Webview Demo",
|
||||
icon: "fa-solid fa-globe",
|
||||
},
|
||||
{
|
||||
text: "Webview Demo",
|
||||
icon: "fa-solid fa-globe",
|
||||
option: "has-navigation"
|
||||
},
|
||||
{
|
||||
text: "iFrame Demo",
|
||||
icon: "fa-solid fa-eye",
|
||||
},
|
||||
]
|
||||
|
||||
// Bottoms tabs of your sidebar
|
||||
export const SIDEBARBOTTOM = [
|
||||
{
|
||||
text: "Settings",
|
||||
page: "Settings",
|
||||
icon: "fa-solid fa-sliders",
|
||||
}
|
||||
]
|
||||
|
|
@ -1,12 +1,12 @@
|
|||
---
|
||||
import Sidebar from '../components/Sidebar.astro';
|
||||
import Page1 from '../components/pages/1.md';
|
||||
import Page2 from '../components/pages/2.astro';
|
||||
import Page3 from '../components/pages/3.astro';
|
||||
import Page3A from '../components/pages/3A.astro';
|
||||
import Page4 from '../components/pages/4.astro';
|
||||
import Settings from '../components/pages/Settings.md';
|
||||
import '../styles/index.scss';
|
||||
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'
|
||||
---
|
||||
|
||||
<script src="./navigation.js" crossoarigin="anonymous"></script>
|
||||
|
|
@ -15,24 +15,13 @@ import '../styles/index.scss';
|
|||
<div class="content">
|
||||
<Sidebar />
|
||||
<div class="pages">
|
||||
<div id="1" class="page active">
|
||||
<Page1 />
|
||||
</div>
|
||||
<div id="2" class="page">
|
||||
<Page2 />
|
||||
</div>
|
||||
<div id="3" class="page">
|
||||
<Page3 />
|
||||
</div>
|
||||
<div id="3A" class="page">
|
||||
<Page3A />
|
||||
</div>
|
||||
<div id="4" class="page">
|
||||
<Page4 />
|
||||
</div>
|
||||
<div id="5" class="page">
|
||||
<Settings />
|
||||
</div>
|
||||
<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" class="page"><Tab3A /></div>
|
||||
<div id="iFrame Demo" class="page"><Tab4 /></div>
|
||||
|
||||
<div id="Settings" class="page"><Settings /></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Reference in a new issue