diff --git a/src/assets/icons/admin.svg b/src/assets/icons/admin.svg
new file mode 100644
index 0000000000000000000000000000000000000000..e75e106806f0bf9e3d18092b4b60efdd75fe7a0e
--- /dev/null
+++ b/src/assets/icons/admin.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"><path d="M680-280q25 0 42.5-17.5T740-340q0-25-17.5-42.5T680-400q-25 0-42.5 17.5T620-340q0 25 17.5 42.5T680-280Zm0 120q31 0 57-14.5t42-38.5q-22-13-47-20t-52-7q-27 0-52 7t-47 20q16 24 42 38.5t57 14.5ZM480-80q-139-35-229.5-159.5T160-516v-244l320-120 320 120v227q-19-8-39-14.5t-41-9.5v-147l-240-90-240 90v188q0 47 12.5 94t35 89.5Q310-290 342-254t71 60q11 32 29 61t41 52q-1 0-1.5.5t-1.5.5Zm200 0q-83 0-141.5-58.5T480-280q0-83 58.5-141.5T680-480q83 0 141.5 58.5T880-280q0 83-58.5 141.5T680-80ZM480-494Z" fill="#ffffff"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/friends.svg b/src/assets/icons/friends.svg
new file mode 100644
index 0000000000000000000000000000000000000000..477ecd983896167b9096b67b753919ec0c693a0e
--- /dev/null
+++ b/src/assets/icons/friends.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"><path d="M40-160v-112q0-34 17.5-62.5T104-378q62-31 126-46.5T360-440q66 0 130 15.5T616-378q29 15 46.5 43.5T680-272v112H40Zm720 0v-120q0-44-24.5-84.5T666-434q51 6 96 20.5t84 35.5q36 20 55 44.5t19 53.5v120H760ZM360-480q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 66-47 113t-113 47Zm400-160q0 66-47 113t-113 47q-11 0-28-2.5t-28-5.5q27-32 41.5-71t14.5-81q0-42-14.5-81T544-792q14-5 28-6.5t28-1.5q66 0 113 47t47 113ZM120-240h480v-32q0-11-5.5-20T580-306q-54-27-109-40.5T360-360q-56 0-111 13.5T140-306q-9 5-14.5 14t-5.5 20v32Zm240-320q33 0 56.5-23.5T440-640q0-33-23.5-56.5T360-720q-33 0-56.5 23.5T280-640q0 33 23.5 56.5T360-560Zm0 320Zm0-400Z" fill="#ffffff"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/remove-white.svg b/src/assets/icons/remove-white.svg
new file mode 100644
index 0000000000000000000000000000000000000000..1abbf52b6a7043c78bb9c09ba2a23d9927367f13
--- /dev/null
+++ b/src/assets/icons/remove-white.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M640-520v-80h240v80H640Zm-280 40q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 66-47 113t-113 47ZM40-160v-112q0-34 17.5-62.5T104-378q62-31 126-46.5T360-440q66 0 130 15.5T616-378q29 15 46.5 43.5T680-272v112H40Zm80-80h480v-32q0-11-5.5-20T580-306q-54-27-109-40.5T360-360q-56 0-111 13.5T140-306q-9 5-14.5 14t-5.5 20v32Zm240-320q33 0 56.5-23.5T440-640q0-33-23.5-56.5T360-720q-33 0-56.5 23.5T280-640q0 33 23.5 56.5T360-560Zm0-80Zm0 400Z" fill="#ffffff"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/remove.svg b/src/assets/icons/remove.svg
new file mode 100644
index 0000000000000000000000000000000000000000..725da3649b62a3cb50d518536a66eadf9b0f9bb1
--- /dev/null
+++ b/src/assets/icons/remove.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M640-520v-80h240v80H640Zm-280 40q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 66-47 113t-113 47ZM40-160v-112q0-34 17.5-62.5T104-378q62-31 126-46.5T360-440q66 0 130 15.5T616-378q29 15 46.5 43.5T680-272v112H40Zm80-80h480v-32q0-11-5.5-20T580-306q-54-27-109-40.5T360-360q-56 0-111 13.5T140-306q-9 5-14.5 14t-5.5 20v32Zm240-320q33 0 56.5-23.5T440-640q0-33-23.5-56.5T360-720q-33 0-56.5 23.5T280-640q0 33 23.5 56.5T360-560Zm0-80Zm0 400Z"/></svg>
\ No newline at end of file
diff --git a/src/components/BaseComponents/Menu.vue b/src/components/BaseComponents/Menu.vue
index 01f51f6d27942905236879a50568050475cfe3e8..c98a41c225e89cb0df4ddc69d378d9c74b75c197 100644
--- a/src/components/BaseComponents/Menu.vue
+++ b/src/components/BaseComponents/Menu.vue
@@ -36,10 +36,14 @@
<ul class="dropdown-menu dropdown-username-content">
<li><a class="dropdown-item text-white dropdown-username-link" href="#"
@click="toUserProfile"><img src="@/assets/icons/person.svg">User Profile</a></li>
+ <li><a class="dropdown-item text-white dropdown-username-link" href="#"
+ @click="toFriends"><img src="@/assets/icons/friends.svg">Friends</a></li>
<li><a class="dropdown-item text-white dropdown-username-link" href="#"
@click="toSetting"><img src="@/assets/icons/settings.svg">Setting</a></li>
<li><a class="dropdown-item text-white dropdown-username-link" href="#"
@click="toFeedback"><img src="@/assets/icons/feedback.svg">Feedback</a></li>
+ <li><a class="dropdown-item text-white dropdown-username-link" href="#"
+ @click="toSetting"><img src="@/assets/icons/admin.svg">Admin table</a></li>
<li><a class="dropdown-item text-white dropdown-username-link" href="#"
@click="toLogout"><img src="@/assets/icons/logout.svg">Log out</a></li>
</ul>
@@ -88,6 +92,9 @@ function toFeedback() {
router.push('/feedback')
}
+function toFriends() {
+ router.push('/friends')
+}
function toUserProfile() {
router.push('/profile')
diff --git a/src/views/User/UserFriendsView.vue b/src/views/User/UserFriendsView.vue
index 82002ed2e947d45cae28cf2b93813a25ce33f258..aecf58aa5804b64b0a9f6f3463fb102ac8d7ed32 100644
--- a/src/views/User/UserFriendsView.vue
+++ b/src/views/User/UserFriendsView.vue
@@ -1,285 +1,381 @@
<template>
<div class="container">
<h1>Your Friends</h1>
-<div class="row">
- <div class="col-lg-3">
- <div class="card card-one">
- <div class="header">
- <div class="avatar">
- <img src="https://bootdey.com/img/Content/avatar/avatar2.png" alt="">
+ <button class="btn btn-primary pull-right my-3" @click="addFriend">+ Add Friend</button>
+ <div class="row">
+ <div class="col-lg-3">
+ <div class="card card-one">
+ <div class="header">
+ <div class="avatar">
+ <img src="https://bootdey.com/img/Content/avatar/avatar2.png" alt="">
+ </div>
+ </div>
+ <h3>Amillie Price</h3>
+ <div class="desc">
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit et cupiditate deleniti.
+ </div>
+ <div class="contacts">
+ <a class="text removeFriend" data-bs-toggle="collapse" href="#collapseExample" role="button"
+ aria-expanded="false" aria-controls="collapseExample">
+ See more
+ </a>
+
+ <div class="collapse" id="collapseExample">
+ <button class="btn btn-danger">
+
+ <h5> <img src="@/assets/icons/remove-white.svg" style="width: 30px"> Remove friend</h5>
+ </button>
+ </div>
+ </div>
</div>
</div>
- <h3>Amillie Price</h3>
- <div class="desc">
- Lorem ipsum dolor sit amet, consectetur adipisicing elit et cupiditate deleniti.
- </div>
- <div class="contacts">
- <a href="#"><i class="fas fa-plus"></i></a>
- <a href="#"><i class="fab fa-whatsapp"></i></a>
- <a href="#"><i class="fas fa-envelope"></i></a>
- <div class="clear"></div>
- </div>
- </div>
- </div>
- <div class="col-lg-3">
- <div class="card card-one">
- <div class="header">
- <div class="avatar">
- <img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="">
+ <div class="col-lg-3">
+ <div class="card card-one">
+ <div class="header">
+ <div class="avatar">
+ <img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="">
+ </div>
+ </div>
+ <h3>Victoria Fox</h3>
+ <div class="desc">
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit et cupiditate deleniti.
+ </div>
+ <div class="contacts">
+ <a class="text removeFriend" data-bs-toggle="collapse" href="#collapseExample" role="button"
+ aria-expanded="false" aria-controls="collapseExample">
+ See more
+ </a>
+
+ <div class="collapse" id="collapseExample">
+ <button class="btn btn-danger">
+
+ <h5> <img src="@/assets/icons/remove-white.svg" style="width: 30px"> Remove friend</h5>
+ </button>
+ </div>
+ </div>
</div>
</div>
- <h3>Victoria Fox</h3>
- <div class="desc">
- Lorem ipsum dolor sit amet, consectetur adipisicing elit et cupiditate deleniti.
- </div>
- <div class="contacts">
- <a href="#"><i class="fas fa-plus"></i></a>
- <a href="#"><i class="fab fa-whatsapp"></i></a>
- <a href="#"><i class="fas fa-envelope"></i></a>
- <div class="clear"></div>
- </div>
- </div>
- </div>
- <div class="col-lg-3">
- <div class="card card-one">
- <div class="header">
- <div class="avatar">
- <img src="https://bootdey.com/img/Content/avatar/avatar3.png" alt="">
+ <div class="col-lg-3">
+ <div class="card card-one">
+ <div class="header">
+ <div class="avatar">
+ <img src="https://bootdey.com/img/Content/avatar/avatar3.png" alt="">
+ </div>
+ </div>
+ <h3>Coray Shoe</h3>
+ <div class="desc">
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit et cupiditate deleniti.
+ </div>
+ <div class="contacts">
+ <a class="text removeFriend" data-bs-toggle="collapse" href="#collapseExample" role="button"
+ aria-expanded="false" aria-controls="collapseExample">
+ See more
+ </a>
+
+ <div class="collapse" id="collapseExample">
+ <button class="btn btn-danger">
+
+ <h5> <img src="@/assets/icons/remove-white.svg" style="width: 30px"> Remove friend</h5>
+ </button>
+ </div>
+ </div>
</div>
</div>
- <h3>Coray Shoe</h3>
- <div class="desc">
- Lorem ipsum dolor sit amet, consectetur adipisicing elit et cupiditate deleniti.
- </div>
- <div class="contacts">
- <a href="#"><i class="fas fa-plus"></i></a>
- <a href="#"><i class="fab fa-whatsapp"></i></a>
- <a href="#"><i class="fas fa-envelope"></i></a>
- <div class="clear"></div>
- </div>
- </div>
- </div>
- <div class="col-lg-3">
- <div class="card card-one">
- <div class="header">
- <div class="avatar">
- <img src="https://bootdey.com/img/Content/avatar/avatar2.png" alt="">
+ <div class="col-lg-3">
+ <div class="card card-one">
+ <div class="header">
+ <div class="avatar">
+ <img src="https://bootdey.com/img/Content/avatar/avatar2.png" alt="">
+ </div>
+ </div>
+ <h3>Christiano Mooray</h3>
+ <div class="desc">
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit et cupiditate deleniti.
+ </div>
+ <div class="contacts">
+ <a class="text removeFriend" data-bs-toggle="collapse" href="#collapseExample" role="button"
+ aria-expanded="false" aria-controls="collapseExample">
+ See more
+ </a>
+
+ <div class="collapse" id="collapseExample">
+ <button class="btn btn-danger">
+
+ <h5> <img src="@/assets/icons/remove-white.svg" style="width: 30px"> Remove friend</h5>
+ </button>
+ </div>
+ </div>
</div>
</div>
- <h3>Christiano Mooray</h3>
- <div class="desc">
- Lorem ipsum dolor sit amet, consectetur adipisicing elit et cupiditate deleniti.
- </div>
- <div class="contacts">
- <a href="#"><i class="fas fa-plus"></i></a>
- <a href="#"><i class="fab fa-whatsapp"></i></a>
- <a href="#"><i class="fas fa-envelope"></i></a>
- <div class="clear"></div>
- </div>
</div>
- </div>
-</div>
-
-<div class="row">
- <div class="col-lg-3">
- <div class="card card-one">
- <div class="header">
- <div class="avatar">
- <img src="https://bootdey.com/img/Content/avatar/avatar4.png" alt="">
+
+ <div class="row">
+ <div class="col-lg-3">
+ <div class="card card-one">
+ <div class="header">
+ <div class="avatar">
+ <img src="https://bootdey.com/img/Content/avatar/avatar4.png" alt="">
+ </div>
+ </div>
+ <h3>Lynda West</h3>
+ <div class="desc">
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit et cupiditate deleniti.
+ </div>
+ <div class="contacts">
+ <a class="text removeFriend" data-bs-toggle="collapse" href="#collapseExample" role="button"
+ aria-expanded="false" aria-controls="collapseExample">
+ See more
+ </a>
+
+ <div class="collapse" id="collapseExample">
+ <button class="btn btn-danger">
+
+ <h5> <img src="@/assets/icons/remove-white.svg" style="width: 30px"> Remove friend</h5>
+ </button>
+ </div>
+ </div>
</div>
</div>
- <h3>Lynda West</h3>
- <div class="desc">
- Lorem ipsum dolor sit amet, consectetur adipisicing elit et cupiditate deleniti.
- </div>
- <div class="contacts">
- <a href="#"><i class="fas fa-plus"></i></a>
- <a href="#"><i class="fab fa-whatsapp"></i></a>
- <a href="#"><i class="fas fa-envelope"></i></a>
- <div class="clear"></div>
- </div>
- </div>
- </div>
- <div class="col-lg-3">
- <div class="card card-one">
- <div class="header">
- <div class="avatar">
- <img src="https://bootdey.com/img/Content/avatar/avatar2.png" alt="">
+ <div class="col-lg-3">
+ <div class="card card-one">
+ <div class="header">
+ <div class="avatar">
+ <img src="https://bootdey.com/img/Content/avatar/avatar2.png" alt="">
+ </div>
+ </div>
+ <h3>Jayden G</h3>
+ <div class="desc">
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit et cupiditate deleniti.
+ </div>
+ <div class="contacts">
+ <a class="text removeFriend" data-bs-toggle="collapse" href="#collapseExample" role="button"
+ aria-expanded="false" aria-controls="collapseExample">
+ See more
+ </a>
+
+ <div class="collapse" id="collapseExample">
+ <button class="btn btn-danger">
+
+ <h5> <img src="@/assets/icons/remove-white.svg" style="width: 30px"> Remove friend</h5>
+ </button>
+ </div>
+ </div>
</div>
</div>
- <h3>Jayden G</h3>
- <div class="desc">
- Lorem ipsum dolor sit amet, consectetur adipisicing elit et cupiditate deleniti.
- </div>
- <div class="contacts">
- <a href="#"><i class="fas fa-plus"></i></a>
- <a href="#"><i class="fab fa-whatsapp"></i></a>
- <a href="#"><i class="fas fa-envelope"></i></a>
- <div class="clear"></div>
- </div>
- </div>
- </div>
- <div class="col-lg-3">
- <div class="card card-one">
- <div class="header">
- <div class="avatar">
- <img src="https://bootdey.com/img/Content/avatar/avatar3.png" alt="">
+ <div class="col-lg-3">
+ <div class="card card-one">
+ <div class="header">
+ <div class="avatar">
+ <img src="https://bootdey.com/img/Content/avatar/avatar3.png" alt="">
+ </div>
+ </div>
+ <h3>Julia Ann</h3>
+ <div class="desc">
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit et cupiditate deleniti.
+ </div>
+ <div class="contacts">
+ <a class="text removeFriend" data-bs-toggle="collapse" href="#collapseExample" role="button"
+ aria-expanded="false" aria-controls="collapseExample">
+ See more
+ </a>
+
+ <div class="collapse" id="collapseExample">
+ <button class="btn btn-danger">
+
+ <h5> <img src="@/assets/icons/remove-white.svg" style="width: 30px"> Remove friend</h5>
+ </button>
+ </div>
+ </div>
</div>
</div>
- <h3>Julia Ann</h3>
- <div class="desc">
- Lorem ipsum dolor sit amet, consectetur adipisicing elit et cupiditate deleniti.
- </div>
- <div class="contacts">
- <a href="#"><i class="fas fa-plus"></i></a>
- <a href="#"><i class="fab fa-whatsapp"></i></a>
- <a href="#"><i class="fas fa-envelope"></i></a>
- <div class="clear"></div>
- </div>
- </div>
- </div>
- <div class="col-lg-3">
- <div class="card card-one">
- <div class="header">
- <div class="avatar">
- <img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="">
+ <div class="col-lg-3">
+ <div class="card card-one">
+ <div class="header">
+ <div class="avatar">
+ <img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="">
+ </div>
+ </div>
+ <h3>Ava Ray</h3>
+ <div class="desc">
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit et cupiditate deleniti.
+ </div>
+ <div class="contacts">
+ <a class="text removeFriend" data-bs-toggle="collapse" href="#collapseExample" role="button"
+ aria-expanded="false" aria-controls="collapseExample">
+ See more
+ </a>
+
+ <div class="collapse" id="collapseExample">
+ <button class="btn btn-danger">
+
+ <h5> <img src="@/assets/icons/remove-white.svg" style="width: 30px"> Remove friend</h5>
+ </button>
+ </div>
+ </div>
</div>
</div>
- <h3>Ava Ray</h3>
- <div class="desc">
- Lorem ipsum dolor sit amet, consectetur adipisicing elit et cupiditate deleniti.
- </div>
- <div class="contacts">
- <a href="#"><i class="fas fa-plus"></i></a>
- <a href="#"><i class="fab fa-whatsapp"></i></a>
- <a href="#"><i class="fas fa-envelope"></i></a>
- <div class="clear"></div>
- </div>
- </div>
- </div>
- <div class="col-lg-3">
- <div class="card card-one">
- <div class="header">
- <div class="avatar">
- <img src="https://bootdey.com/img/Content/avatar/avatar7.png" alt="">
+ <div class="col-lg-3">
+ <div class="card card-one">
+ <div class="header">
+ <div class="avatar">
+ <img src="https://bootdey.com/img/Content/avatar/avatar7.png" alt="">
+ </div>
+ </div>
+ <h3>Maria Shwenstiger</h3>
+ <div class="desc">
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit et cupiditate deleniti.
+ </div>
+ <div class="contacts">
+ <a class="text removeFriend" data-bs-toggle="collapse" href="#collapseExample" role="button"
+ aria-expanded="false" aria-controls="collapseExample">
+ See more
+ </a>
+
+ <div class="collapse" id="collapseExample">
+ <button class="btn btn-danger">
+
+ <h5> <img src="@/assets/icons/remove-white.svg" style="width: 30px"> Remove friend</h5>
+ </button>
+ </div>
+ </div>
</div>
</div>
- <h3>Maria Shwenstiger</h3>
- <div class="desc">
- Lorem ipsum dolor sit amet, consectetur adipisicing elit et cupiditate deleniti.
- </div>
- <div class="contacts">
- <a href="#"><i class="fas fa-plus"></i></a>
- <a href="#"><i class="fab fa-whatsapp"></i></a>
- <a href="#"><i class="fas fa-envelope"></i></a>
- <div class="clear"></div>
- </div>
- </div>
- </div>
- <div class="col-lg-3">
- <div class="card card-one">
- <div class="header">
- <div class="avatar">
- <img src="https://bootdey.com/img/Content/avatar/avatar3.png" alt="">
+ <div class="col-lg-3">
+ <div class="card card-one">
+ <div class="header">
+ <div class="avatar">
+ <img src="https://bootdey.com/img/Content/avatar/avatar3.png" alt="">
+ </div>
+ </div>
+ <h3>Kate Perry</h3>
+ <div class="desc">
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit et cupiditate deleniti.
+ </div>
+ <div class="contacts">
+ <a class="text removeFriend" data-bs-toggle="collapse" href="#collapseExample" role="button"
+ aria-expanded="false" aria-controls="collapseExample">
+ See more
+ </a>
+
+ <div class="collapse" id="collapseExample">
+ <button class="btn btn-danger">
+
+ <h5> <img src="@/assets/icons/remove-white.svg" style="width: 30px"> Remove friend</h5>
+ </button>
+ </div>
+ </div>
</div>
</div>
- <h3>Kate Perry</h3>
- <div class="desc">
- Lorem ipsum dolor sit amet, consectetur adipisicing elit et cupiditate deleniti.
- </div>
- <div class="contacts">
- <a href="#"><i class="fas fa-plus"></i></a>
- <a href="#"><i class="fab fa-whatsapp"></i></a>
- <a href="#"><i class="fas fa-envelope"></i></a>
- <div class="clear"></div>
- </div>
- </div>
- </div>
- <div class="col-lg-3">
- <div class="card card-one">
- <div class="header">
- <div class="avatar">
- <img src="https://bootdey.com/img/Content/avatar/avatar6.png" alt="">
+ <div class="col-lg-3">
+ <div class="card card-one">
+ <div class="header">
+ <div class="avatar">
+ <img src="https://bootdey.com/img/Content/avatar/avatar6.png" alt="">
+ </div>
+ </div>
+ <h3>Robart Gibbs</h3>
+ <div class="desc">
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit et cupiditate deleniti.
+ </div>
+ <div class="contacts">
+ <a class="text removeFriend" data-bs-toggle="collapse" href="#collapseExample" role="button"
+ aria-expanded="false" aria-controls="collapseExample">
+ See more
+ </a>
+
+ <div class="collapse" id="collapseExample">
+ <button class="btn btn-danger">
+
+ <h5> <img src="@/assets/icons/remove-white.svg" style="width: 30px"> Remove friend</h5>
+ </button>
+ </div>
+ </div>
</div>
</div>
- <h3>Robart Gibbs</h3>
- <div class="desc">
- Lorem ipsum dolor sit amet, consectetur adipisicing elit et cupiditate deleniti.
- </div>
- <div class="contacts">
- <a href="#"><i class="fas fa-plus"></i></a>
- <a href="#"><i class="fab fa-whatsapp"></i></a>
- <a href="#"><i class="fas fa-envelope"></i></a>
- <div class="clear"></div>
- </div>
- </div>
- </div>
- <div class="col-lg-3">
- <div class="card card-one">
- <div class="header">
- <div class="avatar">
- <img src="https://bootdey.com/img/Content/avatar/avatar5.png" alt="">
+ <div class="col-lg-3">
+ <div class="card card-one">
+ <div class="header">
+ <div class="avatar">
+ <img src="https://bootdey.com/img/Content/avatar/avatar5.png" alt="">
+ </div>
+ </div>
+ <h3>Anna Winslet</h3>
+ <div class="desc">
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit et cupiditate deleniti.
+ </div>
+ <div class="contacts">
+ <a class="text removeFriend" data-bs-toggle="collapse" href="#collapseExample" role="button"
+ aria-expanded="false" aria-controls="collapseExample">
+ See more
+ </a>
+
+ <div class="collapse" id="collapseExample">
+ <button class="btn btn-danger">
+
+ <h5> <img src="@/assets/icons/remove-white.svg" style="width: 30px"> Remove friend</h5>
+ </button>
+ </div>
+ </div>
</div>
+
</div>
- <h3>Anna Winslet</h3>
- <div class="desc">
- Lorem ipsum dolor sit amet, consectetur adipisicing elit et cupiditate deleniti.
- </div>
- <div class="contacts">
- <a href="#"><i class="fas fa-plus"></i></a>
- <a href="#"><i class="fab fa-whatsapp"></i></a>
- <a href="#"><i class="fas fa-envelope"></i></a>
- <div class="clear"></div>
- </div>
+ <nav aria-label="Page navigation example">
+ <ul class="pagination">
+ <li class="page-item"><a class="page-link" href="#">Previous</a></li>
+ <li class="page-item"><a class="page-link" href="#">1</a></li>
+ <li class="page-item"><a class="page-link" href="#">2</a></li>
+ <li class="page-item"><a class="page-link" href="#">3</a></li>
+ <li class="page-item"><a class="page-link" href="#">Next</a></li>
+ </ul>
+ </nav>
</div>
</div>
-</div>
-</div>
- </template>
-
- <script setup lang="ts">
- import { useRouter, useRoute } from 'vue-router';
- import { ref, onMounted, computed } from "vue";
-
-
- import { useUserInfoStore } from '@/stores/UserStore';
-
- const userStore = useUserInfoStore();
-
- const createdQuizzes = ref(1);
- const createdQuizzesIsEmpty = ref(null);
- const coAuthorQuizzes = ref(null);
- const coAuthorQuizzesIsEmpty = ref(null);
- const router = useRouter();
-
- let userid = ref("");
-
- async function fetchUserData() {
-
- }
-
- async function fetchLibrary() {
-
- }
-
- // Define the navigateToQuiz method
- const navigateToFriend = (frinedID) => {
-
- };
-
- const removeFriend = (friendID) => {
-
- };
-
- onMounted(fetchUserData);
- </script>
-
- <style scoped>
- body {
+</template>
+
+<script setup lang="ts">
+import { useRouter, useRoute } from 'vue-router';
+import { ref, onMounted, computed } from "vue";
+
+
+import { useUserInfoStore } from '@/stores/UserStore';
+
+const userStore = useUserInfoStore();
+
+const createdQuizzes = ref(1);
+const createdQuizzesIsEmpty = ref(null);
+const coAuthorQuizzes = ref(null);
+const coAuthorQuizzesIsEmpty = ref(null);
+const router = useRouter();
+
+let userid = ref("");
+
+async function fetchUserData() {
+
+}
+
+function addFriend() {
+ router.push('/add-friend');
+}
+
+// Define the navigateToQuiz method
+const navigateToFriend = (frinedID) => {
+
+};
+
+const removeFriend = (friendID) => {
+
+};
+
+onMounted(fetchUserData);
+</script>
+
+<style scoped>
+body {
background-color: #f0f6ff;
color: #28384d;
}
+
/*social */
.card-one {
position: relative;
@@ -287,8 +383,10 @@
background: #fff;
box-shadow: 0 10px 7px -5px rgba(0, 0, 0, 0.4);
}
+
.card {
margin-bottom: 35px;
+ padding-bottom: 1rem;
box-shadow: 0 10px 20px 0 rgba(26, 44, 57, 0.14);
border: none;
}
@@ -543,96 +641,22 @@ ul.friend-list .right p {
color: #777;
}
-.card-one .contacts {
- width: 200px;
- max-width: 100%;
- margin: 0 auto 3rem;
-}
-
-.card-one .contacts a {
- display: block;
- width: 33.333333%;
+#gallery li {
+ width: 24%;
float: left;
- text-align: center;
- color: #c8c;
-}
-
-.card-one .contacts a:hover {
- color: #333;
-}
-
-.card-one .contacts a:hover .fa::before {
- color: #fff;
-}
-
-.card-one .contacts a:hover .fa::after {
- width: 100%;
- height: 100%;
-}
-
-.card-one .contacts a .fa {
- position: relative;
- width: 40px;
- height: 40px;
- line-height: 39px;
- overflow: hidden;
- text-align: center;
- font-size: 1.3em;
-}
-
-.card-one .contacts a .fa:before {
- position: relative;
- z-index: 1;
-}
-
-.card-one .contacts a .fa::after {
- content: '';
- position: absolute;
- top: 50%;
- left: 50%;
- width: 0;
- height: 0;
- -webkit-transform: translate(-50%, -50%);
- transform: translate(-50%, -50%);
- background: #c8c;
- transition: width .3s, height .3s;
-}
-
-.card-one .contacts a:last-of-type .fa {
- line-height: 36px;
-}
-
-.card-one .footer {
- position: relative;
- padding: 1rem;
- background-color: #3afe;
- text-align: center;
-}
+ margin: 6px;
-.card-one .footer a {
- padding: 0 1rem;
- color: #e2e2e2;
- transition: color .4s;
}
-.card-one .footer a:hover {
- color: #c8c;
+.removeFriend {
+ text-wrap: nowrap;
}
-.card-one .footer::before {
- content: '';
- position: absolute;
- top: -27px;
- left: 50%;
- margin-left: -15px;
- border: 15px solid transparent;
- border-bottom-color: #3afe;
-}
+.contacts {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
-#gallery li {
- width: 24%;
- float: left;
- margin: 6px;
-
}
- </style>
\ No newline at end of file
+</style>
\ No newline at end of file