diff --git a/src/components/SideBar.js b/src/components/SideBar.js index 9bee00e..af808ca 100644 --- a/src/components/SideBar.js +++ b/src/components/SideBar.js @@ -1,19 +1,12 @@ import React from 'react'; import PropTypes from 'prop-types'; import cx from 'classnames'; +import { motion } from 'framer-motion'; import { Link, useLocation } from 'react-router-dom'; -import { - Moon, - Command, - Activity, - Globe, - Link2, - Settings, - File -} from 'react-feather'; +import { Command, Activity, Globe, Link2, Settings, File } from 'react-feather'; import { connect } from './StateProvider'; -import { switchTheme } from '../store/app'; +import { getTheme, switchTheme } from '../store/app'; import SvgYacd from './SvgYacd'; import s from './SideBar.module.css'; @@ -68,7 +61,6 @@ const pages = [ iconId: 'command', labelText: 'Rules' }, - { to: '/connections', iconId: 'link', @@ -86,7 +78,7 @@ const pages = [ } ]; -function SideBar({ dispatch }) { +function SideBar({ dispatch, theme }) { const location = useLocation(); const switchThemeHooked = useCallback(() => { dispatch(switchTheme()); @@ -115,18 +107,67 @@ function SideBar({ dispatch }) { /> ))} -
- -
+ ); } -// SideBar.propTypes = { -// location: PropTypes.shape({ -// pathname: PropTypes.string -// }).isRequired -// }; +function MoonA() { + return ( + + + + ); +} -const mapState = () => null; +function Sun() { + return ( + + + + + + + + + + + + + + ); +} + +const mapState = s => ({ theme: getTheme(s) }); export default connect(mapState)(SideBar); diff --git a/src/components/SideBar.module.css b/src/components/SideBar.module.css index 167ca2f..2d61c07 100644 --- a/src/components/SideBar.module.css +++ b/src/components/SideBar.module.css @@ -96,24 +96,33 @@ } .themeSwitchContainer { - --sz: 50px; + --sz: 40px; @media (max-width: 768px) { display: none; } position: absolute; - bottom: 0; + bottom: 10px; left: 50%; transform: translateX(-50%); width: var(--sz); height: var(--sz); - padding: 20px 0; display: flex; justify-content: center; align-items: center; - svg { - display: block; - color: var(--color-icon); + + color: var(--color-text); + + padding: 5px; + appearance: none; + outline: none; + user-select: none; + background: none; + cursor: pointer; + border: 1px solid transparent; + border-radius: 100%; + &:focus { + border-color: var(--color-focus-blue); } }