flexor-web/src/app/components/navigation-menu.tsx

// navigation-menu.tsx
// Copyright (C) 2020  Dwayne Harris

// This program is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.

// This program is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
// GNU General Public License for more details.

// You should have received a copy of the GNU General Public License
// along with this program.  If not, see <https://www.gnu.org/licenses/>.

import React, { FC } from 'react'
import { Link } from 'react-router-dom'
import { useSelector, useDispatch } from 'react-redux'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faStream, faPaperPlane, faSun, faMoon } from '@fortawesome/free-solid-svg-icons'
import { useTheme } from '../hooks'
import { setColorScheme } from '../actions/theme'
import { getColorScheme } from '../selectors/theme'
import { ColorScheme } from '../types'

const NavigationMenu: FC = () => {
    const theme = useTheme()
    const scheme = useSelector(getColorScheme)
    const dispatch = useDispatch()

    const switchColorSchemeItem = () => {
        switch (scheme) {
            case ColorScheme.Light:
                return (
                    <a style={{ color: theme.primary, cursor: 'pointer' }} onClick={() => dispatch(setColorScheme(ColorScheme.Dark))}>
                        <span className="icon" style={{ color: theme.primary }}>
                            <FontAwesomeIcon icon={faMoon} />
                        </span>
                        &nbsp;
                        <span>Dark Mode</span>
                    </a>
                )
            case ColorScheme.Dark:
                return (
                    <a style={{ color: theme.primary, cursor: 'pointer' }} onClick={() => dispatch(setColorScheme(ColorScheme.Light))}>
                        <span className="icon" style={{ color: theme.primary }}>
                            <FontAwesomeIcon icon={faSun} />
                        </span>
                        &nbsp;
                        <span>Light Mode</span>
                    </a>
                )
        }
    }

    return (
        <nav>
            <div>
                <span className="icon" style={{ color: theme.primary }}>
                    <FontAwesomeIcon icon={faStream} />
                </span>
                &nbsp;
                <Link style={{ color: theme.primary }} to="/">Timeline</Link>
            </div>

            <div>
                <span className="icon" style={{ color: theme.primary }}>
                    <FontAwesomeIcon icon={faPaperPlane} />
                </span>
                &nbsp;
                <Link style={{ color: theme.primary }} to="/apps">Apps</Link>
            </div>

            <div>
                {switchColorSchemeItem()}
            </div>
        </nav>
    )
}

export default NavigationMenu