Added side bar menu

TerribleCoding · TerribleCoding · commit 3b1f97f20782 · 2021-07-23T19:54:27.000+02:00
diff --git a/README.md b/README.md
@@ -59,7 +59,7 @@ Note: _The order of this list might not match the order these features will be a
 
 _Release date: ???????????????????????_
 
-_Work Time: 9h 10m_
+_Work Time: 10h_
 
 #### v1.2
 
diff --git a/index.html b/index.html
@@ -6,6 +6,7 @@
     <script src="https://cdn.jsdelivr.net/npm/p5@1.3.0/lib/p5.js"></script>
     <link rel="stylesheet" type="text/css" href="style.css">
     <link rel="icon" type="image/x-icon" href="assets/ico/favicon.ico">
+    <link rel='stylesheet' href='https://cdn-uicons.flaticon.com/uicons-regular-rounded/css/uicons-regular-rounded.css'>
 </head>
 
 <body>
@@ -16,13 +17,18 @@ <h1>
         <img src="assets/ico/tool-logo.png" alt="AnySection" class="tool-logo">
         <h3>Select a profile shape</h3>
     </div>
-    <div class="container" id="container"></div>
-    <!--
-    <div class="menu">
-        <a href="../lang.html"><img src="assets/ico/translate.svg" class="ico"></a>
-        <a href="pages/math.html"><img src="assets/ico/math.svg" class="ico"></a>
+
+    <div id="main">
+        <div class="container" id="container"></div>
+
+        <div class="menu">
+            <a href="pages/equations.html"><i class="fi-rr-square-root"></i><span>Equations</span></a>
+            <a href="https://github.com/TerribleCoding/AnySection" target="_blank"><i class="fi-rr-book"></i></i><span>Help</span></a>
+            <a href=""><i class="fi-rr-copyright"></i><span>Credits</span></a>
+            <a href="https://www.buymeacoffee.com/terriblecoding" target="_blank"><i class="fi-rr-dollar"></i><span>Support</span></a>
+        </div>
     </div>
-    -->
+
     <script src="script.js"></script>
     <div class="copyright">
         <p class="copyright">Project developed by</p>
diff --git a/style.css b/style.css
@@ -6,7 +6,7 @@
     --color-4: #ffffff;
     --color-5: #df5327;
     --side-margin: 16px;
-    --side-bar: 0px; /*30px;*/
+    --side-bar: 10rem;
 }
 
 body {
@@ -92,20 +92,57 @@ a.thumbnail {
     width: 140px;
 }
 
+#main {
+    display: flex;
+}
+
 .container {
     display: inline-block;
-    padding: 0 48px 0 48px; /*16px for side bar*/
+    padding: 0 16px;
     margin: 0 auto 0 auto;
-    text-align: center;
+    /*text-align: center;*/
     width: calc(100% - 2 * var(--side-margin) - var(--side-bar) - 4 * 16px);
 }
 
 .menu {
     float: right;
     margin-top: 24px;
     padding: 16px;
-    text-align: right;
     width: var(--side-bar);
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    flex-grow: 0;
+}
+
+.menu > a {
+    color: var(--color-1);
+    border: solid 3px var(--color-1);
+    border-radius: 0.5em;
+    padding: 0.5em;
+    display: flex;
+    flex-direction: row-reverse;
+    align-items: center;
+    width: 1.5em;
+    height: 1.5em;
+    transition: 0.2s ease-out;
+    overflow: hidden;
+    margin-bottom: 2em;
+}
+
+.menu > a:hover {
+    width: 100%;
+    background-color: var(--color-1);
+    color: var(--color-4);
+}
+
+.menu span {
+    padding-right: 2ch;
+}
+
+.menu i {
+    font-size: 150%;
+    margin-top: 0.15em;
 }
 
 img.ico {
