3 files changed, 76 insertions, 5 deletions
diff --git a/front/src/Emelents/Elements.css b/front/src/Emelents/Elements.css
new file mode 100644
index 0000000..8a50296
--- /dev/null
+++ b/front/src/Emelents/Elements.css
@@ -0,0 +1,56 @@
+.Sidebar {
+    --width: 300px;
+    height: 100%;
+    min-width: var(--width);
+    max-width: var(--width);
+    min-height: 1000px;
+    background-color: var(--colorscheme-white);
+    border: 2px solid var(--colorscheme-gray);
+    color: var(--colorscheme-gray);
+
+
+    background: var(--colorscheme-white);
+    background-image: radial-gradient(var(--colorscheme-gray) 1px, transparent 0);
+    background-size: 4px 4px;
+}
+
+.Topbar {
+    text-transform: uppercase;
+    display: flex;
+    flex-direction: column;
+}
+
+.Topbar > h1 {
+    margin-bottom: 0px;
+}
+
+.TopbarContents {
+    border-top: 2px solid var(--colorscheme-black);
+    display: flex;
+}
+
+.TopbarContents > h2 {
+    --width: 280px;
+    min-width: var(--width);
+    max-width: var(--width);
+    min-height: 30px;
+    padding: 5px;
+    margin-top: 0px;
+    background-color: var(--colorscheme-black);
+    color: var(--colorscheme-white);
+    text-align: center;
+}
+
+.SidebarContents {
+    --width: 260px;
+    min-width: var(--width);
+    max-width: var(--width);
+    background-color: var(--colorscheme-white);
+    color: var(--colorscheme-gray);
+    margin: 20px;
+}
+
+.SidebarContents > h1 {
+    color: var(--colorscheme-gray);
+    text-align: center;
+}
diff --git a/front/src/Emelents/Sidebar.tsx b/front/src/Emelents/Sidebar.tsx
index c5a4a9c..b138de6 100644
--- a/front/src/Emelents/Sidebar.tsx
+++ b/front/src/Emelents/Sidebar.tsx
@@ -1,12 +1,15 @@
+import './Elements.css';
+
 function Sidebar() {
     return (
         <nav className='Sidebar'>
-            <h1> Test </h1>
-            <ul>
-            <li> <a href="/classes"> Class list </a> </li>
-            </ul>
+            <div className='SidebarContents'>
+                <h1> Contents </h1>
+                <ul>
+                </ul>
+            </div>
         </nav>
-    )
+    );
 }
 
 export default Sidebar;
diff --git a/front/src/Emelents/Topbar.tsx b/front/src/Emelents/Topbar.tsx
new file mode 100644
index 0000000..6c4ef74
--- /dev/null
+++ b/front/src/Emelents/Topbar.tsx
@@ -0,0 +1,12 @@
+function Topbar() {
+    return (
+        <div className="Topbar">
+            <h1> View from the edge </h1>
+            <div className="TopbarContents">
+                <h2> Lifepath </h2>
+            </div>
+        </div>
+    );
+}
+
+export default Topbar;