Create discussion

- Add new discussion class
- Feature to discuss and report user

front/dist/resources/style/style.css

@@ -686,3 +686,128 @@ div.modal-report-user{
     max-width: calc(800px - 60px); /* size of modal - padding*/
 }
 
+/*MESSAGE*/
+.discussion{
+    position: fixed;
+    right: -300px;
+    width: 220px;
+    height: 100%;
+    background-color: #000000;
+    padding: 20px;
+}
+.discussion.active{
+    right: 0;
+}
+.discussion .toggle-btn{
+    display: none;
+    cursor: pointer;
+    height: 50px;
+    width: 50px;
+    background-color: #2d2d2dba;
+    position: absolute;
+    top: calc(50% - 25px);
+    margin-left: -125px;
+    border-radius: 50%;
+    border: none;
+    transition: all 0.5s ease;
+}
+.discussion .toggle-btn.active{
+    display: block;
+}
+.discussion .toggle-btn:hover {
+    transform: scale(1.1) rotateY(3.142rad);
+}
+.discussion .toggle-btn img{
+    width: 26px;
+    height: 26px;
+    margin: 13px 5px;
+}
+.discussion p{
+    color: white;
+    font-size: 22px;
+    padding-left: 10px;
+    margin: 0;
+}
+
+.discussion .participants{
+    height: 200px;
+    margin: 10px 0;
+}
+
+.discussion .participants .participant{
+    display: flex;
+    margin: 5px 10px;
+    background-color: #ffffff69;
+    padding: 5px;
+    border-radius: 15px;
+    cursor: pointer;
+}
+
+.discussion .participants .participant:hover{
+    background-color: #ffffff;
+}
+.discussion .participants .participant:hover p{
+    color: black;
+}
+
+.discussion .participants .participant:before {
+    content: '';
+    height: 10px;
+    width: 10px;
+    background-color: #1e7e34;
+    position: absolute;
+    margin-left: 18px;
+    border-radius: 50%;
+    margin-top: 18px;
+}
+
+.discussion .participants .participant img{
+    width: 26px;
+    height: 26px;
+}
+
+.discussion .participants .participant p{
+    font-size: 16px;
+    margin-left: 10px;
+    margin-top: 8px;
+}
+
+.discussion .participants .participant button.report-btn{
+    cursor: pointer;
+    position: absolute;
+    background-color: #2d2d2dba;
+    right: 34px;
+    margin: 0px;
+    padding: 6px 0px;
+    border-radius: 15px;
+    border: none;
+    color: white;
+    width: 0px;
+    overflow: hidden;
+    transition: all .5s ease;
+}
+
+.discussion .participants .participant:hover button.report-btn{
+    width: 70px;
+}
+
+.discussion .messages{
+    position: absolute;
+    height: calc(100% - 300px);
+}
+
+.discussion .messages .message{
+    margin: 5px;
+    float: right;
+    text-align: right;
+}
+
+.discussion .messages .message.me{
+    float: left;
+    text-align: left;
+}
+
+.discussion .messages .message p{
+    font-size: 12px;
+}
+