Orphaned changes

app.vue

@@ -1,23 +1,30 @@
 
 <template lang="pug">
 .flex.gap-10.ml-4.mr-2
-  VerticalNav(v-if="cvCookie")
+  VerticalNav(v-if="cvCookie && width > 900")
   .flex.flex-col.gap-5.min-h-screen.grow
-    CVHeader
+    div(class="flex flex-col justify-center items-center")
+      form.well.well-sm
+        VerticalNavHamburger(v-if="cvCookie && width <= 900" :hamburgerOpen="hamburgerOpen")
+    CVHeader(:hamburgerOpen="hamburgerOpen" @hamburger="hamburgerOpen = !hamburgerOpen")
     NuxtPage
 CVFooter
 </template>
 
 <script setup lang="ts">
+import { useWindowSize } from '@vueuse/core'
+const { width, height } = useWindowSize()
 const runtime = useRuntimeConfig()
 const router = useRouter()
 const routes = ref(router.getRoutes())
+const hamburgerOpen = ref(false)
 const route = useRoute()
 const cvCookie = useCookie('cvtoken')
 const cvuser = useCookie('cvuser')
 const isSearch = computed(() => route.path == "/Search/")
 const isFamilyPage = computed(() => route.path.includes("/Page/"))
 
+
 if(!cvCookie.value && !isSearch.value && !isFamilyPage.value){
   await navigateTo('/Search/?search=')
 }

components/CVContainer.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-.container.overflow-hidden.mt-4.mx-auto.place-content-center.font-sans.well.well-sm(class="w-5/6 sm:p-6")
+.container.overflow-hidden.mt-4.place-content-center.font-sans.well.well-sm(class="lg:p-6 mx-auto w-5/6 ")
     slot
 </template>
 

components/CVFooter.vue

@@ -27,14 +27,11 @@ const submit = async () => {
     if (response?.success) {
         isSubmitted.value = true;
         console.log('Data submitted successfully.');
-        //console.log("Submit?", isSubmitted.value)
     } else {
         console.error('Error submitting data.');
     }
 }
 
-//console.log("Submitted?", isSubmitted.value)
-
 </script>
 
 <template lang="pug">
@@ -66,11 +63,4 @@ div
 </template>
 
 <style scoped>
-.absolute {
-    position: absolute;
-}
-
-.relative {
-    position: relative;
-}
 </style>

components/CVHeader.vue

@@ -1,8 +1,11 @@
 <script lang="ts" setup>
 import type { User, Page } from "@/types.d.ts"
 import { donationFormat, dateFormat } from '@/utils'
-//import searchOnEnter from '@/Search.vue'
-//import pageSearch from '@Search.vue'
+import { useWindowSize } from '@vueuse/core'
+const { width, height } = useWindowSize()
+
+const props = defineProps<{ hamburgerOpen: boolean }>()
+const emit = defineEmits(["hamburger"])
 const cvuser = useCookie<User>('cvuser');
 const cvtoken = useCookie('cvtoken');
 const isAdvocateAdmin = computed(() => cvuser.value?.user_role == "admin" || cvuser.value?.user_role == "advocate")
@@ -22,6 +25,10 @@ const onEnter = async() => {
 
 }
 
+const handleHamburgerClick = () => {
+  emit('hamburger', !props.hamburgerOpen)
+}
+
 </script>
 
 <template lang="pug">
@@ -48,7 +55,12 @@ ClientOnly
       DropdownMenu(:has-submenus="true" :num-submenus="6"
         :submenus="[{ title: 'Our Story', to: 'https://carsonsvillage.org/about-us/our-family/' }, { title: 'Our Testimonies', to: 'https://carsonsvillage.org/our-testimonials/' }, { title: 'In The News', to: 'https://carsonsvillage.org/about-us/in-the-news/' }, { title: 'Newsletter Archive', to: 'https://carsonsvillage.org/about-us/newsletter-archive/' }, { title: 'Our Team >', submenus: [{ title: 'Advocates', to: 'https://carsonsvillage.org/about-us/advocates/' }, { title: 'Clinical Consultants', to: 'https://carsonsvillage.org/about-us/clinical-consultants/' }, { title: 'Support Team', to: 'https://carsonsvillage.org/about-us/meet-our-team/' }]}, { title: 'Board of Directors', to: 'https://carsonsvillage.org/about-us/board-of-directors/' }]" :dropdownMinWidth="150" :nestedDropdownMinWidth="150")
         | ABOUT&nbsp;US
-
+      button.items-center.px-2.py-2.text-sm.rounded-md.cursor-pointer(
+        class='hover:text-black bg-white'  
+        @click="handleHamburgerClick"
+        v-if="width <= 900"
+      ) 
+        p.uppercase.white.w-max.font-bold |||
     div.max-w-min.mx-auto.flex.gap-2(v-else)
       a.w-20.items-center.px-2.py-2.text-sm.font-medium.rounded-md.text-blue-999.cursor-pointer(
         class='hover:text-black bg-white'
@@ -68,12 +80,14 @@ ClientOnly
         | RESOURCES
       NavLinkButton(to='https://carsonsvillage.org/get-involved/' target="_blank")
         p.pl-2.uppercase.white.w-max.text-black-999 GET INVOLVED
+
       DropdownMenu(:has-submenus="true" :num-submenus="6"
         :submenus="[{ title: 'Our Story', to: 'https://carsonsvillage.org/about-us/our-family/' }, { title: 'Our Testimonies', to: 'https://carsonsvillage.org/our-testimonials/' }, { title: 'In The News', to: 'https://carsonsvillage.org/about-us/in-the-news/' }, { title: 'Newsletter Archive', to: 'https://carsonsvillage.org/about-us/newsletter-archive/' }, { title: 'Our Team >', submenus: [{ title: 'Advocates', to: 'https://carsonsvillage.org/about-us/advocates/' }, { title: 'Clinical Consultants', to: 'https://carsonsvillage.org/about-us/clinical-consultants/' }, { title: 'Support Team', to: 'https://carsonsvillage.org/about-us/meet-our-team/' }]}, { title: 'Board of Directors', to: 'https://carsonsvillage.org/about-us/board-of-directors/' }]" :dropdownMinWidth="150" :nestedDropdownMinWidth="150")
         | ABOUT&nbsp;US
-
-    .flex.w-max.px-2.pt-2(v-if="isNotSearch")
-      input(class="border border-gray-300 py-2 px-4 rounded-lg focus:outline-none focus:border-black-500" 
+      button(@click="handleHamburgerClick" v-if="width <= 900")
+        p.pl-2.uppercase.white.w-max.text-black-999 |||
+    .flex.w-max.px-2.pt-2.gap-2(v-if="isNotSearch")
+      input(id="search" class="border border-gray-300 py-2 px-4 rounded-lg focus:outline-none focus:border-black-500" 
       type="search" placeholder=" " v-model="searchQuery" v-on:keyup.enter="onEnter" style="height: 40px")
       NuxtLink.inline(:to="`/Search/?search=${searchQuery}&isPageList=0`")
         img(src="/CVSearchIcon.png" style="height: 40px")

components/NavLinkButtonHamburger.vue

@@ -0,0 +1,28 @@
+<template lang="pug">
+NuxtLink.items-center.text-7xl.font-medium.rounded-md.cursor-pointer.no-border.relative(style="text-align: center; overflow: visible;" class='text-gray-999 hover:text-black transition duration-300' :to="to" active-class="active")
+  span.button-content
+    slot
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{ to: string }>()
+</script>
+
+<style scoped>
+  .button-content::before {
+    content: '';
+    position: absolute;
+    left: 300px;
+    top: 12px;
+    transform: translateY(0px);
+    width: 2px;
+    height: 50px;
+    background-color: transparent;
+    transition: background-color 0.3s;
+  }
+  .no-border:hover .button-content::before,
+  .active .button-content::before {
+    background-color: rgb(70, 184, 67);
+  } 
+</style>
+

components/VerticalNavHamburger.vue

@@ -0,0 +1,59 @@
+<script lang="ts" setup>
+import type { User, Page } from "@/types.d.ts"
+import { donationFormat, dateFormat } from '@/utils'
+//import searchOnEnter from '@/Search.vue'
+//import pageSearch from '@Search.vue'
+
+const props = defineProps<{ hamburgerOpen: boolean }>()
+const cvuser = useCookie<User>('cvuser');
+const cvtoken = useCookie('cvtoken');
+const isAdvocateAdmin = computed(() => cvuser.value?.user_role == "admin" || cvuser.value?.user_role == "advocate")
+const isAdmin = computed(() => cvuser.value?.user_role == "admin")
+const cuid = computed(() => cvuser.value?.cuid)
+const familyCuid = computed(() => cvuser.value?.familyCuid)
+const isLoggedIn = computed(() => cvuser.value)
+const pages = ref<Page[]>([])
+const searchQuery = ref('');
+const route = useRoute()
+const isNotSearch = computed(() => route.path !== "/Search/")
+const toggle = ref(true);
+
+const onEnter = async() => {
+  // Navigate to the search page with the entered query
+  await navigateTo (`/Search/?searchbr
+        .bar.mx-9(style="border-top: 0.5px solid #646464;")=${searchQuery.value}&isPageList=0`);
+
+}
+</script>
+
+<template lang="pug">
+  .text-center.p-2.pt-32.pr-12(v-if="hamburgerOpen")
+    div.gap-2(v-if="isLoggedIn && toggle")
+      NavLinkButtonHamburger(:to="`/pageList/${cuid}/?fromUsers=0`" v-if="isAdvocateAdmin" :class="{'!text-black border-green-999 bg-white': route.path.includes('/page') || route.path.includes('/Page')}") 
+        p.uppercase.white.mb-2.w-max Pages
+      .bar.mx-20(style="border-top: 0.5px solid #646464;")
+      NavLinkButtonHamburger(to='/EditPage/0' :class="{'!text-black border-green-999 bg-white': route.path.includes('/EditPage')}") 
+        p.uppercase.white.mb-2.w-max New page
+      .bar.mx-20(style="border-top: 0.5px solid #646464;")
+      NavLinkButtonHamburger( v-if="isAdvocateAdmin" to='/Users' :class="{'!text-black border-green-999 bg-white': route.path.includes('/Users')}") 
+        p.uppercase.white.mb-2.w-max Users
+      .bar.mx-20(style="border-top: 0.5px solid #646464;")
+      NavLinkButtonHamburger( v-if="isAdvocateAdmin" to='/EmailList' :class="{'!text-black border-green-999 bg-white': route.path.includes('/EmailList')}") 
+        p.uppercase.white.mb-2.w-max Email List
+      .bar.mx-20(style="border-top: 0.5px solid #646464;")
+      NavLinkButtonHamburger( v-if="isAdvocateAdmin" to='/EditUser/0' :class="{'!text-black border-green-999 bg-white': route.path.includes('/EditUser')}") 
+        p.uppercase.white.mb-2.w-max Invite user
+      .bar.mx-20(style="border-top: 0.5px solid #646464;")
+      NavLinkButtonHamburger( v-if="isAdvocateAdmin" to='/EditFamily' :class="{'!text-black border-green-999 bg-white': route.path.includes('/EditFamily')}") 
+        p.uppercase.white.mb-2.w-max Edit Family
+      .bar.mx-20(style="border-top: 0.5px solid #646464;")
+      NavLinkButtonHamburger(to="/" :class="{'!text-black border-green-999 bg-white': route.path == '/'}") 
+        p.uppercase.white.mb-2.w-max Profile
+      .bar.mx-20(style="border-top: 0.5px solid #646464;")
+      NavLinkButtonHamburger(v-if="isAdmin" to='/FamilyTransactionList' :class="{'!text-black border-green-999 bg-white': route.path == '/FamilyTransactionList'}") 
+        p.uppercase.white.mb-2.w-max Donations
+      .bar.mx-20(style="border-top: 0.5px solid #646464;")
+      NavLinkButtonHamburger(v-if="isAdvocateAdmin" to='/FamilyReports' :class="{'!text-black border-green-999 bg-white': route.path == '/FamilyReports'}")
+        p.uppercase.white.mb-2.w-max Family Reports
+</template>
+

components/imagePreview.vue

@@ -75,7 +75,7 @@ const removeImage = async (image: Image, isPreview: boolean) => {
         emit("profileImage", emptyImage)
         previewCuid.value = ""
     }
-    if(image?.url === props.profileImage.url &&  imagesTemp.length !=0){
+    if(image?.url === props.profileImage.url && imagesTemp.length !=0){
       emit("profileImage", imagesTemp[0])
     }
 }