commit ac59aec134b2c3a1c76f6012bda5105d3f243e51
Author: Dominik Poch <dpoch@email.cz>
Date:   Tue Apr 12 23:45:39 2022 +0200

    Created a layout of the annotation screen
    
    Created a layout with  empty panels. They will be done in other branches.

diff --git a/webapp/components/annotation/annotationPanel.tsx b/webapp/components/annotation/annotationPanel.tsx
new file mode 100644
index 0000000..15e41f2
--- /dev/null
+++ b/webapp/components/annotation/annotationPanel.tsx
@@ -0,0 +1,13 @@
+/**
+ * Creates a panel in the annotation screen that contains a list of annotations.
+ * @returns Panel with a list of annotations.
+ */
+function AnnotationPanel() {
+    return (
+        <div>
+            <p>Panel with a list of annotations</p>
+        </div>
+    );
+}
+
+export default AnnotationPanel;
diff --git a/webapp/components/annotation/documentAnnotationView.tsx b/webapp/components/annotation/documentAnnotationView.tsx
new file mode 100644
index 0000000..1032f77
--- /dev/null
+++ b/webapp/components/annotation/documentAnnotationView.tsx
@@ -0,0 +1,13 @@
+/**
+ * Creates an annotation view of a document.
+ * @returns The annotation view.
+ */
+function DocumentAnnotationView() {
+    return (
+        <div>
+            <p>Main view with a rendered document</p>
+        </div>
+    );
+}
+
+export default DocumentAnnotationView;
diff --git a/webapp/components/annotation/tagPanel.tsx b/webapp/components/annotation/tagPanel.tsx
new file mode 100644
index 0000000..93109a1
--- /dev/null
+++ b/webapp/components/annotation/tagPanel.tsx
@@ -0,0 +1,13 @@
+/**
+ * Creates a panel in the annotation screen that contains a list of tag.
+ * @returns Panel with a list of tags.
+ */
+function TagPanel() {
+    return (
+        <div>
+            <p>Panel with a list of tags</p>
+        </div>
+    );
+}
+
+export default TagPanel;
diff --git a/webapp/components/navigation/userNavBar.tsx b/webapp/components/navigation/userNavBar.tsx
new file mode 100644
index 0000000..c80bca1
--- /dev/null
+++ b/webapp/components/navigation/userNavBar.tsx
@@ -0,0 +1,13 @@
+/**
+ * Creates a navigation bar of a normal user (annotator).
+ * @returns Navigation bar of a user.
+ */
+function UserNavBar() {
+    return (
+        <div>
+            <p>Navigation bar of a normal user.</p>
+        </div>
+    );
+}
+
+export default UserNavBar;
diff --git a/webapp/layouts/annotationLayout.tsx b/webapp/layouts/annotationLayout.tsx
new file mode 100644
index 0000000..e079905
--- /dev/null
+++ b/webapp/layouts/annotationLayout.tsx
@@ -0,0 +1,37 @@
+import { Layout } from 'antd';
+import AnnotationPanel from '../components/annotation/annotationPanel';
+import DocumentAnnotationView from '../components/annotation/documentAnnotationView';
+import TagPanel from '../components/annotation/tagPanel';
+import 'antd/dist/antd.css';
+import styles from '/styles/annotation.module.scss';
+import UserNavBar from '../components/navigation/userNavBar';
+
+const { Header, Content, Footer, Sider } = Layout;
+
+/**
+ * Creates a layout of a document annotation screen. It contains a panel with a list of tags and a panel with a list of annotations.
+ * @returns Annotation layout.
+ */
+function AnnotationLayout() {
+    return (
+        <Layout>
+            <Header>
+                <UserNavBar />
+            </Header>
+            <Layout hasSider>
+                <Sider className={styles.leftSidePanel}>
+                    <TagPanel />
+                </Sider>
+                <Content className={styles.mainView}>
+                    <DocumentAnnotationView />
+                </Content>
+                <Sider className={styles.rightSidePanel}>
+                    <AnnotationPanel />
+                </Sider>
+            </Layout>
+            <Footer></Footer>
+        </Layout>
+    );
+}
+
+export default AnnotationLayout;
diff --git a/webapp/pages/annotation.tsx b/webapp/pages/annotation.tsx
new file mode 100644
index 0000000..6b2b9e5
--- /dev/null
+++ b/webapp/pages/annotation.tsx
@@ -0,0 +1,11 @@
+import AnnotationLayout from '../layouts/annotationLayout';
+
+/**
+ * Creates an annotation screen.
+ * @returns The annotation screen.
+ */
+function Annotation() {
+    return <AnnotationLayout />;
+}
+
+export default Annotation;
diff --git a/webapp/styles/annotation.module.scss b/webapp/styles/annotation.module.scss
new file mode 100644
index 0000000..9a8afad
--- /dev/null
+++ b/webapp/styles/annotation.module.scss
@@ -0,0 +1,26 @@
+%lightBackground {
+    background: white;
+}
+
+%sidePanel {
+    @extend %lightBackground;
+    overflow: auto;
+    height: 100vh;
+    position: sticky;
+    top: 0;
+}
+
+.leftSidePanel {
+    @extend %sidePanel;
+    left: 0;
+}
+
+.rightSidePanel {
+    @extend %sidePanel;
+    right: 0;
+}
+
+.mainView {
+    @extend %lightBackground;
+    margin: 20px;
+}
\ No newline at end of file
