created Layout

frontend/src/App.css

+.container {
+    max-width: 980px;
+    display: flex;
+}
\ No newline at end of file

frontend/src/App.tsx

 import { Container } from "@mui/material"
-
+import { Route, Routes } from "react-router-dom"
+import Layout from "./components/Layout/Layout"
+import './App.css'
 
 const App = ()=> {
   return (
-    <Container className="App">
-      Start
-    </Container>
+    //@ts-ignore
+      <Layout>
+        <Routes>
+        <Route path={'/'} element={<h1>HOME</h1>} />
+        </Routes>
+      </Layout>
+    
   )
 }
 export default App

frontend/src/components/Header/Header.tsx

+import React, { FunctionComponent, ReactElement } from "react";
+import Logo from "../Logo/Logo";
+import Navbar from "../Navbar/Navbar";
+// import './Header.css'
+
+
+const Header: FunctionComponent = (): ReactElement => {
+    return (
+        <header className="header">
+            <div className="container header_container">
+                <div className="logo_block">
+                    <Logo />
+                </div>
+                <div className="nav_block">
+                    <Navbar />
+                </div>
+            </div>
+        </header>
+    )
+}
+
+export default Header
\ No newline at end of file

frontend/src/components/Layout/Layout.css

+
+.sidebar {
+    margin: 80px 30px;
+}
\ No newline at end of file

frontend/src/components/Layout/Layout.tsx

+import React, { FunctionComponent, ReactElement }  from "react";
+import Navbar from "../Navbar/Navbar";
+import Logo from "../Logo/Logo";
+import './Layout.css'
+
+
+//@ts-ignore
+const Layout: FunctionComponent = ({children}): ReactElement => {
+    return (
+        <div className="container aside_container">
+            <div className="sidebar">
+                <Logo />
+                <Navbar />
+            </div>
+            <main>{children}</main>
+        </div>
+    )
+}
+
+export default Layout
\ No newline at end of file

frontend/src/components/Logo/Logo.css

+.logo_img {
+    width: 150px;
+    height: auto
+}
\ No newline at end of file

frontend/src/components/Logo/Logo.tsx

+import React, { FunctionComponent, ReactElement } from "react";
+import { Link } from "react-router-dom";
+import './Logo.css'
+import logo from '../../assets/logo.png'
+
+
+const Logo: FunctionComponent = (): ReactElement => {
+    return (
+        <Link className="logo" to={'/'}>
+            <img className="logo_img" src={logo} alt="logo" />
+        </Link>
+    )
+}
+
+export default Logo
\ No newline at end of file

frontend/src/components/Navbar/Navbar.css

+.nav_item{
+    list-style-type: none;
+    margin-bottom: 20px;
+}
+
+.nav_link {
+    text-decoration: none;
+    font-size: 25px;
+    color: black;
+}
\ No newline at end of file

frontend/src/components/Navbar/Navbar.tsx

+import React, { FunctionComponent, ReactElement } from "react";
+import { NavLink } from "react-router-dom";
+import './Navbar.css'
+
+
+const Navbar: FunctionComponent = (): ReactElement => {
+    return (
+        <div className="container">
+            <ul className="nav_items">
+                <li className="nav_item">
+                    <NavLink to={'/'} className={'nav_link'}>Home</NavLink>
+                </li>
+                <li className="nav_item">
+                    <NavLink to={'/'} className={'nav_link'}>News</NavLink>
+                </li>
+                <li className="nav_item">
+                    <NavLink to={'/add-news'} className={'nav_link'}>Add-Post</NavLink>
+                </li>
+                <li className="nav_item">
+                    <NavLink to={'/'} className={'nav_link'}>Blog</NavLink>
+                </li>
+                <li className="nav_item">
+                    <NavLink to={'/'} className={'nav_link'}>Messages</NavLink>
+                </li>
+            </ul>
+        </div>
+
+    )
+}
+
+export default Navbar
\ No newline at end of file