frontend/src/components/DeckyDesktopUI.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

import { CSSProperties, FC } from 'react';

import DeckyDesktopSidebar from './DeckyDesktopSidebar';
import DeckyIcon from './DeckyIcon';
import { useDeckyState } from './DeckyState';

const DeckyDesktopUI: FC = () => {
  const { desktopMenuOpen, setDesktopMenuOpen } = useDeckyState();
  return (
    <>
      <style>
        {`
            .deckyDesktopIcon {
                color: #67707b;
            }
            .deckyDesktopIcon:hover {
                color: #fff;
            }
            `}
      </style>
      <DeckyIcon
        className="deckyDesktopIcon"
        width={24}
        height={24}
        onClick={() => setDesktopMenuOpen(!desktopMenuOpen)}
        style={
          {
            position: 'absolute',
            top: '36px', // nav text is 34px but 36px looks nicer to me
            right: '10px', // <- is 16px but 10px looks nicer to me
            width: '24px',
            height: '24px',
            cursor: 'pointer',
            transition: 'color 0.3s linear',
            '-webkit-app-region': 'no-drag',
          } as CSSProperties
        }
      />
      <DeckyDesktopSidebar />
    </>
  );
};

export default DeckyDesktopUI;