import * as React from 'react'; import { Link, NavLink } from 'react-router-dom'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faCogs, faLayerGroup, faSignOutAlt, faUserCircle } from '@fortawesome/free-solid-svg-icons'; import { useStoreState } from 'easy-peasy'; import { ApplicationStore } from '@/state'; import SearchContainer from '@/components/dashboard/search/SearchContainer'; import tw from 'twin.macro'; import styled from 'styled-components/macro'; import * as config from '@/../../tailwind.config.js'; const Navigation = styled.div` ${tw`w-full bg-neutral-900 shadow-md`}; & > div { ${tw`mx-auto w-full flex items-center`}; } & #logo { ${tw`flex-1`}; & > a { ${tw`text-2xl font-header px-4 no-underline text-neutral-200 hover:text-neutral-100 transition-colors duration-150`}; } } `; const RightNavigation = styled.div` ${tw`flex h-full items-center justify-center`}; & > a, & > .navigation-link { ${tw`flex items-center h-full no-underline text-neutral-300 px-6 cursor-pointer transition-all duration-150`}; &:active, &:hover { ${tw`text-neutral-100 bg-black`}; } &:active, &:hover, &.active { box-shadow: inset 0 -2px ${config.theme.colors.cyan['700']}; } } `; export default () => { const user = useStoreState((state: ApplicationStore) => state.user.data!); const name = useStoreState((state: ApplicationStore) => state.settings.data!.name); return (
{name}
{user.rootAdmin && }
); };