import { App } from '../App';
import { View } from '../views/View';
import { Dropdown } from './Dropdown';
import { Octicon } from './Octicon';
import { Toggle } from './Toggle';
import { languages } from '../../config.json'
import { Tracker } from '../Tracker';
import { locale } from '../Locales';
export const Header = (view: View, title: string, homeLink = '/') => {
const panelTogglesId = view.register(el => {
const getPanelToggles = () => {
const panels = [['preview', 'play'], ['tree', 'note'], ['source', 'code']]
if (!panels.map(e => e[0]).includes(App.mobilePanel.get())) return ''
return panels
.filter(e => e[0] !== App.mobilePanel.get())
.filter(e => e[0] !== 'preview' || App.preview.get() !== null)
.map(e => `
${Octicon[e[1] as keyof typeof Octicon]}
`).join('')
}
App.mobilePanel.watchRun(() => {
view.mount(el, getPanelToggles(), false)
})
App.preview.watchRun((value, oldValue) => {
if (value === null && App.mobilePanel.get() === 'preview') {
App.mobilePanel.set('tree')
}
if (value === null || oldValue === null) {
view.mount(el, getPanelToggles(), false)
}
})
})
return `
`
}