Fire Reddit Components

Login-widget.vue

<template>
  <form
    class=" flex justify-items-end  flex-col  items-end p-2 border-gray-600 border mb-3"
  >
    <div class="flex">
      <input
        type="text"
        placeholder="Email"
        class=" border-gray-600 border px-3 py-1 w-1/2 mr-3 focus:outline-none focus:border-primaryDark"
        v-model="form.email"
      />
      <input
        type="text"
        placeholder="Email"
        class=" border-gray-600 border px-3 py-1 w-1/2 focus:outline-none focus:border-primaryDark"
        v-model="form.passwor"
      />
    </div>
    <div>
      <a href="#">Forgot password?</a>
      <button class=" bg-gray-200 mt-2 px-3 border-gray-600 border">
        Login
      </button>
    </div>
  </form>
</template>

Navbar.vue

<template>
  <section class="navbar bg-primary mb-5">
    <nav class="navbar__inner container mx-auto flex items-end justify-between">
      <nuxt-link class="navbar__logo" to="/"></nuxt-link>

      <div class="navbar__user-menu bg-primaryLight" v-if="isloggedIn">
        Howdy
        <a class="font-bold" href="#"> /r/rayhan </a>
        <a class="text-xs text-gray-700" href="#">
          (settings)
        </a>
        <span class="font-thin">|</span>
        <a href="#" to="/notifications"> Notifications (14) </a>
        <span class="font-thin">|</span>
        <a href="#" class="cursor-pointer">Logout</a>
      </div>

      <div class="navbar__user-menu bg-primaryLight" v-else>
        Want to join?
        <button class="link">Login</button>
        or
        <button class="link">Signup</button>
        in a seconds.
      </div>
    </nav>
  </section>
</template>

<script>
export default {
  data() {
    return {
      isloggedIn: false
    };
  }
};
</script>