Added Layout and Header components

frontend/src/components/Header/Header.module.css

+.Header{
+    width: 100%;
+    background: rgb(205, 204, 204);
+}
+
+.Header_button{
+    border: none;
+    background: none;
+    transition: 0.2s;
+    font-family: 'Kanit', sans-serif;
+    padding: 0.6em 1.2em;
+    font-size: 1em;
+    font-weight: 500;
+    font-family: inherit;
+    cursor: pointer;
+}
+
+.Header_button:hover{
+    border: none;
+    color: rgb(101, 101, 101);
+}
+
+.LinksBlock{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    max-width: 600px;
+    width: 100%;
+    margin: 0 auto;
+}
+
+.Header_button:focus{
+    border: none;
+}
+
+.Header_inner_container{
+    display: flex;
+    justify-content: end;
+    align-items: center;
+    margin: 0 auto;
+    max-width: 1000px;
+    width: 100%;
+}
\ No newline at end of file

frontend/src/components/Header/Header.tsx

+import { NavLink } from "react-router-dom"
+import { useNavigate } from "react-router-dom"
+import styles from './Header.module.css'
+import { Button, ClickAwayListener, Grow } from "@mui/material"
+import Paper from '@mui/material/Paper';
+import Popper from '@mui/material/Popper';
+import MenuItem from '@mui/material/MenuItem';
+import MenuList from '@mui/material/MenuList';
+import { useRef, useState } from "react"
+import { shallowEqual, useSelector } from "react-redux/es/exports"
+import { AppDispatch, AppState, useAppDispatch } from "../../store/store";
+import { setToInitState } from "../../store/user/user.slice";
+
+const Header: React.FunctionComponent = (): React.ReactElement => {
+
+    const {user, isAuth} = useSelector((state: AppState) => state.users, shallowEqual)
+
+    const [open, setOpen] = useState<boolean>(false);
+
+    const anchorRef = useRef<HTMLButtonElement>(null);
+
+    const navigate = useNavigate()
+
+    const dispatch: AppDispatch = useAppDispatch()
+
+    const logoutHandler = () => {
+        localStorage.removeItem('token')
+        dispatch(setToInitState())
+    }
+
+    const handleListKeyDown = (event: React.KeyboardEvent): void => {
+        if (event.key === 'Tab') {
+            event.preventDefault();
+            setOpen(false);
+        } else if (event.key === 'Escape') {
+            setOpen(false);
+        }
+    }
+
+    const handleToggle = (): void => {
+        setOpen((prevOpen) => !prevOpen);
+    };
+
+    const navigateToPage = (page: string): void => {
+        setOpen(false)
+        navigate(`${page}`)
+    }
+
+    const handleClose = (event: Event | React.SyntheticEvent) => {
+        if (
+            anchorRef.current &&
+            anchorRef.current.contains(event.target as HTMLElement)
+        ) {
+            return;
+        }
+    
+        setOpen(false);
+        };
+
+    return(
+        <div>
+<header className={styles.Header}>
+            <div className={styles.Header_inner_container}>
+                <div className={styles.LinksBlock}>
+                    <NavLink to={'/'}>
+                        Home
+                    </NavLink>
+                    {
+                        isAuth  ?
+                        <div style={{display: 'flex', alignItems: 'center'}}>
+                            <h4 style={{margin: 0, color: 'black', marginRight: '40px'}}>
+                                <span style={{fontWeight: 'normal', marginRight: '10px'}}>Hello,</span><NavLink to={`/user/${user?._id}`}>{user?.username}</NavLink>
+                            </h4>
+                            <Button
+                                ref={anchorRef}
+                                id="composition-button"
+                                aria-controls={open ? 'composition-menu' : undefined}
+                                aria-expanded={open ? 'true' : undefined}
+                                aria-haspopup="true"
+                                onClick={handleToggle}
+                            >
+                            Navigate menu
+                            </Button>
+                            {/* <Popper
+                                open={open}
+                                anchorEl={anchorRef.current}
+                                role={undefined}
+                                placement="bottom-start"
+                                transition
+                            >
+                            {({ TransitionProps, placement }) => (
+                                <Grow
+                                {...TransitionProps}
+                                style={{
+                                    transformOrigin:
+                                    placement === 'bottom-start' ? 'left top' : 'left bottom',
+                                }}
+                                >
+                                <Paper
+                                    style={{position: 'relative', zIndex: 1000, fontWeight: 'bold'}}
+                                >
+                                    <ClickAwayListener onClickAway={handleClose}>
+                                    <MenuList
+                                        autoFocusItem={open}
+                                        id="composition-menu"
+                                        aria-labelledby="composition-button"
+                                        onKeyDown={handleListKeyDown}
+                                    >
+                                        <MenuItem onClick={()=>{navigateToPage('/add-photo')}}>Add new photo</MenuItem>
+                                    </MenuList>
+                                    </ClickAwayListener>
+                                </Paper>
+                                </Grow>
+                            )}
+                            </Popper> */}
+                            <button className={styles.Header_button} onClick={logoutHandler}>Logout</button>
+                        </div> :
+                        <div>
+                            <button className={styles.Header_button} onClick={()=>{navigateToPage('authorize')}}>Login</button>
+                        </div>
+                    }
+                </div>
+            </div>
+            </header>
+        </div>
+    )
+}
+
+export default Header
\ No newline at end of file

frontend/src/components/Layout/Layout.tsx

+import React from "react";
+import { Outlet } from "react-router-dom";
+import Header from "../Header/Header";
+import styles from './Layout.module.css'
+
+const Layout: React.FunctionComponent = (): React.ReactElement => {
+    
+    return (
+        <div className={styles.Layout}>
+            <Header/>
+            <main>
+                <Outlet />
+            </main>
+        </div>
+    )
+}
+
+export default Layout
\ No newline at end of file

frontend/src/components/UI/Preloader/Preloader.module.css

+.Preloader_backdrop{
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background-color: #ffffff95;
+}
+
+.loader {
+    width: 48px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    z-index: 100;
+    transform: translate(-50%, -50%);
+    height: 48px;
+    border: 5px solid #FFF;
+    border-bottom-color: #FF3D00;
+    border-radius: 50%;
+    display: inline-block;
+    box-sizing: border-box;
+    animation: rotation 1s linear infinite;
+    }
+
+    @keyframes rotation {
+        0% {
+            transform: rotate(0deg);
+        }
+        100% {
+            transform: rotate(360deg);
+        }
+        }
\ No newline at end of file

frontend/src/components/UI/Preloader/Preloader.tsx

+import styles from './Preloader.module.css'
+
+const Preloader: React.FunctionComponent = (): React.ReactElement => {
+    return(
+        <div className={styles.Preloader_backdrop}>
+            <div className={styles.loader}></div>
+        </div>
+    )
+}
+
+export default Preloader
\ No newline at end of file