Adding modal filter design

assets/css/rport.css

@@ -169,6 +169,10 @@ input::placeholder,textarea::placeholder {
     --tw-text-opacity: 1;
     color: #374151;
 }
+.text-theme-inverted-light,.text-theme-inverted-lighter {
+    --tw-text-opacity: 1;
+    color: #4b5563;
+}
 .text-theme-label {
     --tw-text-opacity: 1;
     color: #6b7280;
@@ -178,6 +182,18 @@ input::placeholder,textarea::placeholder {
     --tw-bg-opacity: 1;
     background-color: #fff;
 }
+.bg-theme-light {
+    --tw-bg-opacity: 1;
+    background-color: #f3f4f6;
+}
+.bg-theme-lighter {
+    --tw-bg-opacity: 1;
+    background-color: #f9fafb;
+}
+
+.bg-theme-backdrop\/75 {
+    background-color: #6b7280bf;
+}
 .bg-warning {
     background-color: #ef6c00;
     background-color: rgb(239 108 0/var(--tw-bg-opacity))

components/NewDevicesSidebar.vue

@@ -13,12 +13,12 @@
 						>
 					</form>
 					<svg
-						data-v-ca945699=""
 						xmlns="http://www.w3.org/2000/svg"
 						width="22px"
 						height="22px"
 						viewBox="0 0 24 24"
 						class="icon text-primary"
+						@click="openFilter"
 					>
 						<path
 							fill="currentColor"
@@ -38,7 +38,6 @@
 							>
 								<span class="flex items-center justify-center">
 									<svg
-										data-v-ca945699=""
 										xmlns="http://www.w3.org/2000/svg"
 										width="20px"
 										height="20px"
@@ -63,7 +62,6 @@
 									style=""
 								>
 									<svg
-										data-v-ca945699=""
 										xmlns="http://www.w3.org/2000/svg"
 										width="20px"
 										height="20px"
@@ -261,6 +259,7 @@
 				</Accordion>
 			</div>
 		</div>
+		<CustomModalFilter v-model="isFilterModalOpen" />
 	</nav>
 </template>
 
@@ -282,7 +281,11 @@ const props = defineProps({
 
 const isClientSettingOpen = ref(false);
 const selectedSettingOpt = useLocalStorage('dashboard_nav_drawer_item_lines', 1);
+const isFilterModalOpen = ref(false);
 
+const openFilter = () => {
+	isFilterModalOpen.value = true;
+};
 const toggleClientSetting = () => {
 	isClientSettingOpen.value = !isClientSettingOpen.value;
 };

components/custom/loading-spinner/LoadingSpinner.vue

@@ -0,0 +1,38 @@
+<template>
+	<span
+		class="absolute inset-0 flex items-center justify-center rounded-md bg-gray-300/10 backdrop-blur-sm"
+	><svg
+		xmlns="http://www.w3.org/2000/svg"
+		width="24px"
+		height="24px"
+		viewBox="0 0 24 24"
+		class="icon text-white mr-2 animate-spin"
+	>
+		<path
+			fill="currentColor"
+			d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z"
+			opacity=".25"
+		/>
+		<path
+			fill="currentColor"
+			d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z"
+		>
+			<animateTransform
+				attributeName="transform"
+				dur="0.75s"
+				repeatCount="indefinite"
+				type="rotate"
+				values="0 12 12;360 12 12"
+			/>
+		</path>
+	</svg>
+	</span>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped>
+
+</style>

components/custom/loading-spinner/index.ts

@@ -0,0 +1 @@
+export { default as LoadingSpinner } from './LoadingSpinner.vue';