123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154 |
- import React from "react";
- import styled from "styled-components";
- import { useTranslation } from "react-i18next";
- import { useWire } from "react-sync-board";
- import Touch from "../../ui/Touch";
- import UserList from "../../users/UserList";
- import WebConferenceButton from "../../webconf/WebConferenceButton";
- import InviteModal from "./InviteModal";
- import Brand from "../Brand";
- import WelcomeModal from "../BoardView/WelcomeModal";
- import { useLocation } from "react-router";
- const StyledNavBar = styled.div.attrs(() => ({ className: "nav" }))`
- position: fixed;
- top: 0;
- width: 100%;
- z-index: 205;
- background-color: #19202ce0;
- box-shadow: 0px 3px 6px #00000029;
- color: var(--font-color);
- & .nav-center {
- display: relative;
- & h3 {
- position: absolute;
- top: 0;
- margin: 0;
- padding: 0 2em;
- background-color: var(--color-blueGrey);
- box-shadow: 0px 3px 6px #00000029;
- line-height: 90px;
- letter-spacing: 0px;
- font-size: 24px;
- text-transform: uppercase;
- transform: perspective(280px) rotateX(-20deg);
- }
- }
- & .nav-right,
- & .nav-center,
- & .nav-left {
- align-items: center;
- }
- & .nav-left {
- & > div {
- //flex: 1;
- padding-right: 1em;
- }
- padding-left: 40px;
- justify-content: flex-start;
- }
- & .nav-right {
- justify-content: flex-end;
- padding-right: 1em;
- gap: 1em;
- }
- & .spacer {
- flex: 1;
- max-width: 1em;
- }
- @media screen and (max-width: 640px) {
- & .nav-center h3 {
- position: relative;
- padding: 0;
- background-color: transparent;
- box-shadow: none;
- line-height: 1.2em;
- font-size: 1.2em;
- transform: none;
- }
- & .nav-right {
- display: none;
- }
- & .spacer {
- flex: 0;
- }
- & {
- flex-direction: row;
- }
- & .save {
- display: none;
- }
- & .info {
- margin: 0;
- padding: 0;
- width: 24px;
- height: 24px;
- }
- & .help {
- margin: 0;
- padding: 0;
- width: 24px;
- height: 24px;
- }
- & h3 {
- font-size: 1.2em;
- }
- & .nav-left {
- flex: 0;
- }
- }
- `;
- const RoomNavBar = () => {
- const { t } = useTranslation();
- const { room } = useWire("room");
- const { state: { showInvite: initialShowInvite } = {} } = useLocation();
- const [showInvite, setShowInvite] = React.useState(initialShowInvite);
- return (
- <StyledNavBar>
- <div className="nav-left">
- <Brand />
- </div>
- <div className="nav-center">
- <h3>{t("Choose your board")}</h3>
- </div>
- <div className="nav-right">
- <UserList />
- {
- <Touch
- onClick={() => {
- setShowInvite(true);
- }}
- icon="add-user"
- title={t("Invite more player")}
- />
- }
- <WebConferenceButton room={room} />
- </div>
- <InviteModal show={showInvite} setShow={setShowInvite} />
- </StyledNavBar>
- );
- };
- export default RoomNavBar;
|