Restructure repository (#426)

organized repository 

Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>
Co-authored-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>
Co-authored-by: Philip Molares <git@molar.es>

src/components/landing-layout/navigation/header-bar/header-bar.scss

@@ -0,0 +1,9 @@
+.header-nav {
+  .nav-link {
+    border-bottom: 2px solid transparent
+  }
+
+  .nav-link.active {
+    border-bottom-color: #fff;
+  }
+}

src/components/landing-layout/navigation/header-bar/header-bar.tsx

@@ -0,0 +1,47 @@
+import React, { Fragment } from 'react'
+import { Navbar } from 'react-bootstrap'
+import { Trans, useTranslation } from 'react-i18next'
+import { useSelector } from 'react-redux'
+import { ApplicationState } from '../../../../redux'
+import { HeaderNavLink } from '../header-nav-link'
+import { NewGuestNoteButton } from '../new-guest-note-button'
+import { NewUserNoteButton } from '../new-user-note-button'
+import { SignInButton } from '../sign-in-button'
+import { UserDropdown } from '../user-dropdown'
+import './header-bar.scss'
+
+const HeaderBar: React.FC = () => {
+  useTranslation()
+  const user = useSelector((state: ApplicationState) => state.user)
+
+  return (
+    <Navbar className="justify-content-between">
+      <div className="nav header-nav">
+        <HeaderNavLink to="/intro" id='navLinkIntro'>
+          <Trans i18nKey="landing.navigation.intro"/>
+        </HeaderNavLink>
+        <HeaderNavLink to="/history" id='navLinkHistory'>
+          <Trans i18nKey="landing.navigation.history"/>
+        </HeaderNavLink>
+      </div>
+      <div className="d-inline-flex">
+        {!user
+          ? <Fragment>
+            <span className={'mx-1 d-flex'}>
+              <NewGuestNoteButton/>
+            </span>
+            <SignInButton size="sm"/>
+          </Fragment>
+          : <Fragment>
+            <span className={'mx-1 d-flex'}>
+              <NewUserNoteButton/>
+            </span>
+            <UserDropdown/>
+          </Fragment>
+        }
+      </div>
+    </Navbar>
+  )
+}
+
+export { HeaderBar }

src/components/landing-layout/navigation/header-nav-link.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import { Nav } from 'react-bootstrap'
+import { LinkContainer } from 'react-router-bootstrap'
+
+export interface HeaderNavLinkProps {
+  to: string
+  id: string
+}
+
+export const HeaderNavLink: React.FC<HeaderNavLinkProps> = ({ to, id, children }) => {
+  return (
+    <Nav.Item>
+      <LinkContainer to={to}>
+        <Nav.Link id={id} className="text-light" href={to}>{children}</Nav.Link>
+      </LinkContainer>
+    </Nav.Item>
+  )
+}

src/components/landing-layout/navigation/new-guest-note-button.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import { Button } from 'react-bootstrap'
+import { Trans, useTranslation } from 'react-i18next'
+import { LinkContainer } from 'react-router-bootstrap'
+import { ForkAwesomeIcon } from '../../common/fork-awesome/fork-awesome-icon'
+
+export const NewGuestNoteButton: React.FC = () => {
+  const { t } = useTranslation()
+  return (
+    <LinkContainer to={'/new'} title={t('landing.navigation.newGuestNote')}>
+      <Button
+        variant="primary"
+        size="sm"
+        className="d-inline-flex align-items-center">
+        <ForkAwesomeIcon icon="plus" className="mx-1"/>
+        <span>
+          <Trans i18nKey='landing.navigation.newGuestNote'/>
+        </span>
+      </Button>
+    </LinkContainer>)
+}

src/components/landing-layout/navigation/new-user-note-button.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import { Button } from 'react-bootstrap'
+import { Trans, useTranslation } from 'react-i18next'
+import { LinkContainer } from 'react-router-bootstrap'
+import { ForkAwesomeIcon } from '../../common/fork-awesome/fork-awesome-icon'
+
+export const NewUserNoteButton: React.FC = () => {
+  const { t } = useTranslation()
+  return (
+    <LinkContainer to={'/new'} title={t('landing.navigation.newNote')}>
+      <Button
+        variant="primary"
+        size="sm"
+        className="d-inline-flex align-items-center">
+        <ForkAwesomeIcon icon="plus" className="mx-1"/>
+        <span>
+          <Trans i18nKey='landing.navigation.newNote'/>
+        </span>
+      </Button>
+    </LinkContainer>
+  )
+}

src/components/landing-layout/navigation/sign-in-button.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import { Button } from 'react-bootstrap'
+import { ButtonProps } from 'react-bootstrap/Button'
+import { Trans, useTranslation } from 'react-i18next'
+import { useSelector } from 'react-redux'
+import { LinkContainer } from 'react-router-bootstrap'
+import { ApplicationState } from '../../../redux'
+import { ShowIf } from '../../common/show-if/show-if'
+
+type SignInButtonProps = {
+  className?: string
+} & Omit<ButtonProps, 'href'>
+
+export const SignInButton: React.FC<SignInButtonProps> = ({ variant, ...props }) => {
+  const { t } = useTranslation()
+  const authProviders = useSelector((state: ApplicationState) => state.config.authProviders)
+  return (
+    <ShowIf condition={Object.values(authProviders).includes(true)}>
+      <LinkContainer to="/login" title={t('login.signIn')}>
+        <Button
+          variant={variant || 'success'}
+          {...props}
+        >
+          <Trans i18nKey="login.signIn"/>
+        </Button>
+      </LinkContainer>
+    </ShowIf>
+  )
+}

src/components/landing-layout/navigation/user-dropdown.tsx

@@ -0,0 +1,47 @@
+import React from 'react'
+import { Dropdown } from 'react-bootstrap'
+import { Trans, useTranslation } from 'react-i18next'
+import { useSelector } from 'react-redux'
+import { LinkContainer } from 'react-router-bootstrap'
+import { ApplicationState } from '../../../redux'
+import { clearUser } from '../../../redux/user/methods'
+import { ForkAwesomeIcon } from '../../common/fork-awesome/fork-awesome-icon'
+import { UserAvatar } from '../../common/user-avatar/user-avatar'
+
+export const UserDropdown: React.FC = () => {
+  useTranslation()
+  const user = useSelector((state: ApplicationState) => state.user)
+
+  if (!user) {
+    return null
+  }
+
+  return (
+    <Dropdown alignRight>
+      <Dropdown.Toggle size="sm" variant="dark" id="dropdown-user" className={'d-flex align-items-center'}>
+        <UserAvatar name={user.name} photo={user.photo}/>
+      </Dropdown.Toggle>
+
+      <Dropdown.Menu className='text-start'>
+        <LinkContainer to={'/n/features'}>
+          <Dropdown.Item dir='auto'>
+            <ForkAwesomeIcon icon="bolt" fixedWidth={true} className="mx-2"/>
+            <Trans i18nKey="editor.help.documents.features"/>
+          </Dropdown.Item>
+        </LinkContainer>
+        <LinkContainer to={'/profile'}>
+          <Dropdown.Item dir='auto'>
+            <ForkAwesomeIcon icon="user" fixedWidth={true} className="mx-2"/>
+            <Trans i18nKey="profile.userProfile"/>
+          </Dropdown.Item>
+        </LinkContainer>
+        <Dropdown.Item dir='auto'
+          onClick={() => {
+            clearUser()
+          }}>
+          <ForkAwesomeIcon icon="sign-out" fixedWidth={true} className="mx-2"/>
+          <Trans i18nKey="login.signOut"/>
+        </Dropdown.Item>
+      </Dropdown.Menu>
+    </Dropdown>)
+}