authentication implementation

layouts/default.vue

@@ -221,7 +221,8 @@
             </span>
 
           </nuxt-link>
-          <nuxt-link to="/about-us">
+          <nuxt-link to="/about-us"
+          >
             <span class="flexBox gap-[0.6vw]"
             :class="{ 'text-primaryGreen': $route.path === '/about-us' }"
             >
@@ -263,13 +264,24 @@
           </nuxt-link>
         </div>
 
-        <nuxt-link to="/account">
+        <nuxt-link to="/account" v-if="authUser">
           <img
             src="/images/Profile.png"
             alt="profile"
             class="h-[3.698vw] w-[3.698vw] rounded-full p-[0.521vw]"
           />
         </nuxt-link>
+        <nuxt-link to="/login" v-else>
+          <svg 
+          class="h-[3.698vw] w-[3.698vw] rounded-full p-[0.521vw]"
+          viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path opacity="0.4" d="M13.5 2.25C10.5525 2.25 8.15625 4.64625 8.15625 7.59375C8.15625 10.485 10.4175 12.825 13.365 12.9262C13.455 12.915 13.545 12.915 13.6125 12.9262C13.635 12.9262 13.6462 12.9262 13.6687 12.9262C13.68 12.9262 13.68 12.9262 13.6912 12.9262C16.5712 12.825 18.8325 10.485 18.8437 7.59375C18.8437 4.64625 16.4475 2.25 13.5 2.25Z" fill="#878787"/>
+            <path d="M19.2151 15.9187C16.0763 13.8262 10.9576 13.8262 7.79633 15.9187C6.36758 16.875 5.58008 18.1687 5.58008 19.5525C5.58008 20.9362 6.36758 22.2187 7.78508 23.1637C9.36008 24.2212 11.4301 24.75 13.5001 24.75C15.5701 24.75 17.6401 24.2212 19.2151 23.1637C20.6326 22.2075 21.4201 20.925 21.4201 19.53C21.4088 18.1462 20.6326 16.8637 19.2151 15.9187Z" fill="#878787"/>
+            </svg>
+
+        </nuxt-link>
+          
+          
       </div>
     </nav>
   </div>
@@ -277,6 +289,7 @@
 
 
 <script setup>
+const { authUser } = useAuth();
   const openSearchBox = () =>{
    
     if (process.client) {