feat: implementation of users module of the admin dashboard (#29)

Co-authored-by: Anwarul Islam <anwaarulislaam@gmail.com>

packages/hoppscotch-sh-admin/src/components/app/Header.vue

@@ -5,12 +5,12 @@
     <div class="flex items-center">
       <button
         @click="isOpen = true"
-        class="text-gray-200 focus:outline-none lg:hidden mr-2"
+        class="text-gray-200 focus:outline-none md:hidden mr-2"
       >
         <icon-lucide-menu class="text-gray-300 w-6" />
       </button>
 
-      <div class="mr-3 mt-2">
+      <div class="mr-3 mt-2 xs:hidden md:block">
         <button @click="expandSidebar">
           <icon-lucide-sidebar-open
             v-if="isExpanded"

packages/hoppscotch-sh-admin/src/components/app/Modal.vue

@@ -41,7 +41,7 @@
         <div class="px-6 py-4 text-left modal-content">
           <!--Title-->
           <div class="flex items-center justify-between pb-3">
-            <p class="text-2xl ml-3 font-bold">{{ title }}</p>
+            <p class="text-2xl ml-3 font-bold text-gray-300">{{ title }}</p>
             <div class="z-50 cursor-pointer modal-close" @click="open = false">
               <svg
                 class="text-white fill-current"
@@ -79,6 +79,10 @@ defineProps({
   button: {
     type: String,
   },
+  requireButton: {
+    type: Boolean,
+    default: true,
+  },
 });
 </script>
 

packages/hoppscotch-sh-admin/src/components/app/Sidebar.vue

@@ -9,8 +9,8 @@
     <!-- End Backdrop -->
 
     <div
-      :class="isOpen ? 'translate-x-0 ease-out' : '-translate-x-full ease-in'"
-      class="flex fixed inset-y-0 left-0 z-30 overflow-y-auto transition duration-300 transform bg-neutral-200 dark:bg-neutral-900 lg:translate-x-0 lg:static lg:inset-0 border-r border-gray-300 dark:border-gray-600"
+      :class="isOpen ? '' : '!-translate-x-full ease-in'"
+      class="sidebar-container transform !md:translate-x-0 ease-out"
     >
       <div :class="isExpanded ? 'w-64' : 'w-full'">
         <div class="flex items-center justify-start mt-6 ml-6">
@@ -98,3 +98,12 @@ const activeClass =
 const inactiveClass =
   'border-gray-900 text-gray-500 hover:bg-gray-600 hover:bg-opacity-25 hover:text-gray-100';
 </script>
+
+<style scoped>
+.sidebar-container {
+  @apply fixed md:static md:translate-x-0 md:inset-0 inset-y-0 left-0 z-30;
+  @apply transition duration-300;
+
+  @apply flex overflow-y-auto bg-neutral-200 dark:bg-neutral-900 border-r border-gray-300 dark:border-gray-600;
+}
+</style>

packages/hoppscotch-sh-admin/src/components/app/Toast.vue

@@ -0,0 +1,28 @@
+<template>
+  <div
+    :class="`fixed bottom-0 right-0 mb-4 mr-4 bg-zinc-500 text-gray-800 px-6 py-3 rounded-md z-50 transition-opacity duration-300 ${
+      state.isVisible ? 'opacity-100' : 'opacity-0'
+    }`"
+    @click="close"
+  >
+    {{ message }}
+  </div>
+</template>
+
+<script setup lang="ts">
+import { reactive } from 'vue';
+
+defineProps({
+  message: {
+    type: String,
+    required: true,
+  },
+});
+const state = reactive({
+  isVisible: true,
+});
+
+const close = () => {
+  state.isVisible = false;
+};
+</script>