Commit bf60cde5 authored by Grant's avatar Grant
Browse files

Expand header into multiple components (related #51)

parent ccf43f13

packages/client/src/components/App.tsx

+1 −1
Original line number Diff line number Diff line 
import { Header } from "./Header";

import { Header } from "./Header/Header";

import { AppContext, useAppContext } from "../contexts/AppContext";

import { CanvasWrapper } from "./CanvasWrapper";

import { TemplateContext } from "../contexts/TemplateContext";

packages/client/src/components/Header.tsx→packages/client/src/components/Header/Header.tsx

+61 −0
Original line number Diff line number Diff line 
import { Button, Card, CardBody, Link } from "@nextui-org/react";

import { useAppContext } from "../contexts/AppContext";

import { User } from "./Header/User";

import { useAppContext } from "../../contexts/AppContext";

import { User } from "./User";

import { Debug } from "@sc07-canvas/lib/src/debug";

import React, { lazy } from "react";



const OpenChatButton = lazy(() => import("./Chat/OpenChatButton"));

const OpenChatButton = lazy(() => import("../Chat/OpenChatButton"));



const DynamicChat = () => {

  const { loadChat } = useAppContext();
@@ -13,14 +13,11 @@ const DynamicChat = () => { 
};



export const Header = () => {

  const { setSettingsSidebar, connected, hasAdmin, setInfoSidebar } =

    useAppContext();

  const { connected } = useAppContext();



  return (

    <header id="main-header">

      <div className="box">

        <Button onPress={() => setInfoSidebar(true)}>Info</Button>

      </div>

      <HeaderLeft />

      <div className="spacer"></div>

      {!connected && (

        <div>
@@ -30,10 +27,29 @@ export const Header = () => { 
        </div>

      )}

      <div className="spacer"></div>

      <HeaderRight />

    </header>

  );

};



const HeaderLeft = () => {

  const { setInfoSidebar } = useAppContext();



  return (

    <div className="box">

      <Button onPress={() => setInfoSidebar(true)}>Info</Button>

      <Button onPress={() => Debug.openDebugTools()}>Debug Tools</Button>

    </div>

  );

};



const HeaderRight = () => {

  const { setSettingsSidebar, hasAdmin } = useAppContext();



  return (

    <div className="box">

      <User />

      <Button onClick={() => setSettingsSidebar(true)}>Settings</Button>

        <Button onClick={() => Debug.openDebugTools()}>debug</Button>

      {hasAdmin && (

        <Button href="/admin" target="_blank" as={Link}>

          Admin
@@ -41,6 +57,5 @@ export const Header = () => { 
      )}

      <DynamicChat />

    </div>

    </header>

  );

};