Rebuild General Layout to Nuxt UI PRO Dashboard

spaces/app.vue

@@ -3,9 +3,7 @@ const supabase = useSupabaseClient()
 const user = useSupabaseUser()
 const route = useRoute()
 const tenants = (await supabase.from("tenants").select()).data
-
 const dataStore = useDataStore()
-
 const viewport = useViewport()
 
 /*watch(viewport.breakpoint, (newBreakpoint, oldBreakpoint) => {
@@ -13,6 +11,10 @@ const viewport = useViewport()
 })*/
 
 
+
+
+
+
 useHead({
   meta: [
     { name: 'viewport', content: 'width=device-width, initial-scale=1' }
@@ -45,6 +47,28 @@ useSeoMeta({
 </template>
 
 <style>
+/* width */
+::-webkit-scrollbar {
+  width: 5px;
+  height: 5px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+  background: rgb(2,6,23);
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+  background: grey;
+  border-radius: 5px;
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+  background: #69c350;
+}
+
 
 #logo img{
   height: 15vh;
@@ -58,24 +82,12 @@ useSeoMeta({
   flex-direction: row;
   flex-wrap: wrap;
   overflow-y: scroll;
-  -ms-overflow-style: none;  /* IE and Edge */
-  scrollbar-width: none;  /* Firefox */
-}
-
-.documentList::-webkit-scrollbar {
-  display: none;
 }
 
 .scrollList {
   overflow-y: scroll;
   height: 85vh;
   margin-top: 1em;
-  -ms-overflow-style: none;  /* IE and Edge */
-  scrollbar-width: none;  /* Firefox */
-}
-
-.scrollList::-webkit-scrollbar {
-  display: none;
 }
 
 
@@ -101,16 +113,4 @@ useSeoMeta({
   }
 
 
-
-.table > div {
-  width: 78vw;
-  height: 90vh;
-  overflow: scroll !important;
-  -ms-overflow-style: none;  /*!* IE and Edge *!*/
-  scrollbar-width: none;  /*!* Firefox *!*/
-}
-
-.table > div::-webkit-scrollbar {
-  display: none;
-}
 </style>