siimee/frontend/src/views/home.vue

<template>
  <div id="home">
    <div class="content-wrapper">
      <div class="content">
        <main-header />
        <profile-cards :uid="uid" :users="swipables" />
      </div>
    </div>
    <sidebar />
  </div>
</template>

<script>
import mainHeader from '../shared/MainHeader.vue'
import sidebar from '../shared/Sidebar.vue'
import profileCards from '../components/TinderCard.vue'
export default {
  name: "home",
  components: { mainHeader, profileCards, sidebar },
  data() {
    return {
      swipables: [],
      uid: "",
    };
  },
  created() {
    // this.uid = auth.currentUser?.uid || "99999";
    this.uid = "99999"
    this.getUsers()
  },
  methods: {
    getUsers() {
      const users = []
      this.swipables = users.filter(u => (u.id = Date.now() + (Math.random() * 100000).toFixed()))
    },
  },
};
</script>
<style lang="postcss">
html
  background-color: #f9f9f9
.wrapper
  position: relative
.content
  margin-left: 320px
  clear: both
  overflow: auto
  background: #f9f9ff
  min-height: 100vh
  &-wrapper
    float: right
    width: 100%

@media only screen and (max-width: 768px)
  .content
    margin-left: 0
</style>