text: import React from "react";
  
  import {
    Main,
    Header,
    Footer,
    Nav,
    NavMenu,
    NavMenuTarget,
    NavDrawerButton,
    Panel,
    Section,
    VMContext
  } from "dotnetify-elements";
  import Logo, {
    GitHubLink,
    TwitterLink,
    ThemeToggle,
    LicenseNotice
  } from "../components/DotNetifyLogo";
  import SelectFramework, {
    currentFramework
  } from "../components/SelectFramework";
  import MenuLinks from "../components/MenuLinks";
  import { lightTheme, darkTheme } from "dotnetify-elements";
  import * as utils from "../utils";
  
  const themeToggleEvent = utils.createEventEmitter();
  
  const navCss = `
    ::-webkit-scrollbar {
      width: 7px;
    }
    ::-webkit-scrollbar-thumb {
      background: #ccc;
      border-radius: 20px;
    }
    ::-webkit-scrollbar-track {
      background: #eee;
      border-radius: 20px;
    }
  `;
  
  class App extends React.Component {
    constructor(props) {
      super(props);
      this.state = { theme: lightTheme, framework: currentFramework };
  
      themeToggleEvent.subscribe(arg => {
        this.setState({
          theme: arg || this.state.theme.name === "light" ? darkTheme : lightTheme
        });
      });
    }
  
    render() {
      const { theme, framework } = this.state;
      const onRouteEnter = (_path, template) =>
        (template.Target = "NavMenuTarget");
      return (
        <VMContext vm="App" options={{ onRouteEnter }}>
          <Main theme={theme}>
            <Header>
              <NavDrawerButton show css="margin-left: 1rem" />
              <Logo />
              <MenuLinks active="core" />
              <Panel horizontal center middle right padding="1rem">
                <ThemeToggle
                  name={theme.name}
                  onClick={_ => themeToggleEvent.emit()}
                />
                <TwitterLink />
              </Panel>
            </Header>
            <Nav css={navCss}>
              <Panel noGap>
                <MenuLinks nav={true} active="core" />
                <GitHubLink />
                <SelectFramework
                  id="Framework"
                  onChange={value => this.setState({ framework: value })}
                />
                <NavMenu id="NavMenu" key={framework} />
              </Panel>
            </Nav>
            <Section>
              <NavMenuTarget />
            </Section>
            <Footer>
              <LicenseNotice>
                © 2015-2019 Dicky Suryadi. Licensed under the{" "}
                <a href="http://www.apache.org/licenses/LICENSE-2.0">
                  Apache license version 2.0
                </a>
              </LicenseNotice>
            </Footer>
          </Main>
        </VMContext>
      );
    }
  }
  
  export default App;
  