Make panels resizable

front/package.json

@@ -10,8 +10,11 @@
   "dependencies": {
     "axios": "^0.21.1",
     "core-js": "^3.6.5",
+    "emoji-js": "^3.5.0",
     "markdown-it": "^12.0.6",
     "moment": "^2.29.1",
+    "splitpanes": "^3.0.4",
+    "string-strip-html": "^8.3.0",
     "vue": "^3.1.1",
     "vue-router": "^4.0.8",
     "vue3-markdown-it": "^1.0.9",

front/src/views/Home.vue

@@ -1,35 +1,54 @@
 <template>
-  <div id="home">
+  <splitpanes class="default-theme">
-    <Streams />
+    <pane size="10" min-size="5">
-    <Content />
+      <Streams />
-    <Rules />
+    </pane>
-  </div>
+    <pane size="55">
+      <Content />
+    </pane>
+    <pane size="35" min-size="15">
+      <Rules />
+    </pane>
+    <!-- <pane>
+      <iframe src="https://chat.hackersanddesigners.nl"></iframe>
+    </pane> -->
+  </splitpanes>
 </template>
 
 <script>
-import Streams from '../components/Streams'
+import Streams from "../components/Streams";
-import Content from '../components/Content'
+import Content from "../components/Content";
-import Rules   from '../components/Rules'
+import Rules from "../components/Rules";
+import { Splitpanes, Pane } from "splitpanes";
+import "splitpanes/dist/splitpanes.css";
 
 export default {
-  name: 'Home',
+  name: "Home",
   components: {
     Streams,
     Content,
     Rules,
+    Splitpanes,
+    Pane,
   },
-}
+};
 </script>
 
 <style>
-
 #home {
   position: relative;
   box-sizing: border-box;
   height: 100%;
   width: 100%;
   display: flex;
-  
 }
 
+.splitpanes--vertical .splitpanes__pane {
+  overflow-y: scroll;
+}
+
+iframe {
+  width: 100%;
+  height: 100%;
+}
 </style>