add in details

src/App.vue

@@ -1,38 +1,72 @@
 <template>
-  <div id="app">
-    <app-grid></app-grid>
+  <div>
+    <app-navigation></app-navigation>
+    <main>
+      <app-grid></app-grid>
+    </main>
   </div>
 </template>
 
 <script>
 import AppGrid from "./components/AppGrid.vue";
+import AppNavigation from "./components/AppNavigation.vue";
 
 export default {
   components: {
+    AppNavigation,
     AppGrid
   }
 };
 </script>
 
 <style lang="scss">
 body {
+  width: 100vw;
+  margin: 0;
+  background: #1d1f20;
+  color: #d1d7da;
+  font-family: "Avenir", Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+main {
   display: flex;
+  width: 100vw;
   flex-direction: row;
   justify-content: center;
   align-items: center;
-  overflow: hidden;
-  width: 100vw;
-  background: #1d1f20;
 }
 
 #app {
   height: $app-height;
   width: $app-width;
-  overflow: hidden;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
   text-align: center;
+}
+
+h1,
+h2,
+h3 {
+  //font-family: "Prata", serif;
   color: white;
-  margin-top: 60px;
+  font-weight: normal;
+}
+
+h1 {
+  font-size: 40px;
+}
+
+.tags {
+  padding-bottom: 10px;
+  span {
+    padding: 4px 15px;
+    border: 1px solid;
+    border-radius: 1000px;
+    margin-right: 10px;
+    font-size: 12px;
+    background: black;
+    text-transform: uppercase;
+    letter-spacing: 0.15em;
+  }
 }
 </style>

src/components/AppDetails.vue

@@ -1,23 +1,34 @@
 <template>
   <div class="scene -detail">
     <div class="detail">
-      <img>
       <div class="content">
-        <div class="title">Great Horned Owl</div>
-        <div class="creator">Krystine Lopez</div>
-        <div
-          class="description"
-        >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure cum, est amet delectus, blanditiis voluptatem laborum pariatur consequatur quae voluptate, nisi. Laborum adipisci iste earum distinctio, fugit, quas ipsa impedit.</div>
+        <h2 class="title">{{ currentItem.restaurant }}</h2>
+        <div class="tags">
+          <span v-for="tag in currentItem.tags" :key="currentItem.tag">{{ tag }}</span>
+        </div>
+        <p class="description">{{ currentItem.desc }}</p>
       </div>
     </div>
   </div>
 </template>
 
 <script>
-export default {};
+export default {
+  props: {
+    currentItem: {
+      type: Object,
+      required: true
+    }
+  }
+};
 </script>
 
 <style lang="scss" scoped>
+.scene.-detail {
+  position: absolute;
+  top: 500px;
+}
+
 .detail {
   color: white;
   width: $app-width;
@@ -26,44 +37,27 @@ export default {};
   display: flex;
   flex-direction: column;
 
-  > img {
-    height: auto;
-    width: 100%;
-    height: auto;
-    flex: 0 1 auto;
-    z-index: 1;
-  }
-
-  > .content {
-    background: #232323;
+  .content {
+    background: #1d1f20;
     flex: 1 0 auto;
     padding: 2rem 1.5rem;
-    animation: slide-down 0.6s ease-in-out;
-
-    @keyframes slide-down {
-      from {
-        transform: translateY(-100%);
-      }
-      to {
-        transform: translateY(0);
-      }
-    }
 
-    > * {
+    * {
       margin-bottom: 1rem;
     }
 
-    > .title {
+    .title {
       font-size: 2rem;
+      margin-top: 0;
       text-transform: uppercase;
     }
 
-    > .creator {
+    .creator {
       opacity: 0.6;
       margin-top: -0.5rem;
     }
 
-    > .description {
+    .description {
       line-height: 1.5;
     }
   }

src/components/AppGrid.vue

@@ -1,7 +1,8 @@
 <template>
-  <div class="scene -gallery" ref="gallery">
+  <div class="scene -gallery" ref="gallery" id="app">
+    <h1>Restaurants In Your Area</h1>
     <div
-      @click="expand(item.name, $event)"
+      @click="expand(item, $event)"
       v-for="item in food"
       class="item"
       :key="item.name"
@@ -11,7 +12,7 @@
       <img :src="`${item.name}.jpg`" :alt="item.name" :ref="item.name">
       <h4>{{ item.restaurant }}</h4>
     </div>
-    <app-details v-if="isShowing"></app-details>
+    <app-details v-if="isShowing" :currentItem="currentItem"></app-details>
   </div>
 </template>
 
@@ -26,6 +27,7 @@ export default {
   data() {
     return {
       isShowing: false,
+      currentItem: null,
       rects: {
         first: null,
         last: null
@@ -40,13 +42,14 @@ export default {
   methods: {
     expand(item, event) {
       const itemEl = event.target;
-      const elImg = this.$refs[item][0];
+      const elImg = this.$refs[item.name][0];
 
       this.rects.first = itemEl.getBoundingClientRect();
       this.rects.last = this.$refs.gallery.getBoundingClientRect();
 
       if (!this.isShowing) {
         this.isShowing = true;
+        this.currentItem = item;
 
         let deltaW = this.rects.first.left - this.rects.last.left;
         let deltaH = this.rects.first.top - this.rects.last.top;
@@ -66,11 +69,12 @@ export default {
           y: 0,
           scale: 1,
           transformOrigin: "0 0",
-          zIndex: 1,
+          zIndex: 0,
           ease: Sine.easeIn
         });
 
         this.isShowing = false;
+        this.currentItem = null;
       }
     }
   }
@@ -89,6 +93,7 @@ export default {
   overflow-y: scroll;
 
   &.-gallery {
+    position: relative;
     flex-direction: row;
     flex-wrap: wrap;
     justify-content: space-between;
@@ -100,7 +105,6 @@ export default {
       flex-shrink: 0;
       height: auto;
       min-height: $app-width / 3;
-      // overflow: hidden;
     }
   }
 }
@@ -122,4 +126,9 @@ export default {
 h4 {
   margin-top: 0;
 }
+
+h1 {
+  text-align: center;
+  width: 100%;
+}
 </style>

src/components/AppLogo.vue

@@ -0,0 +1,35 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 100 100"
+    aria-labelledby="logo"
+    role="presentation"
+  >
+    <title id="logo">Food Logo</title>
+    <path
+      class="cls-1"
+      d="M84.142,51.814V70.763a1.3,1.3,0,0,1-1.3,1.3h0a1.3,1.3,0,0,1-1.3-1.3V54.611a6.754,6.754,0,0,0-1.978-4.775h0V38.142a13.384,13.384,0,0,1,4.578-10.079h0Z"
+    ></path>
+    <path
+      class="cls-1"
+      d="M49.15,26.25A23.75,23.75,0,1,0,72.9,50,23.75,23.75,0,0,0,49.15,26.25Zm0,40.25A16.5,16.5,0,1,1,65.65,50,16.519,16.519,0,0,1,49.15,66.5Z"
+    ></path>
+    <circle cx="49.15" cy="50" r="14.5"></circle>
+    <path
+      class="cls-1"
+      d="M17.535,30.438v7.938a1,1,0,0,1-2,0V30.438H14.14v7.938a1,1,0,0,1-2,0V30.438H10.775v8.613a2.763,2.763,0,0,0,2.762,2.762v28.95a1.3,1.3,0,0,0,2.6,0V41.813A2.763,2.763,0,0,0,18.9,39.051V30.438Z"
+    ></path>
+  </svg>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style scoped>
+svg {
+  width: 80px;
+  height: 80px;
+  fill: currentColor;
+}
+</style>

src/components/AppNavigation.vue

@@ -0,0 +1,51 @@
+<template>
+  <nav>
+    <app-logo></app-logo>
+    <span class="title">Dinner's On Me</span>
+    <span class="login">Log In</span>
+  </nav>
+</template>
+
+<script>
+import AppLogo from "./AppLogo.vue";
+
+export default {
+  components: {
+    AppLogo
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+nav {
+  height: 80px;
+  background: #0f1010;
+  margin-bottom: 30px;
+  padding: 0 30px;
+  display: flex;
+  position: relative;
+}
+
+.title {
+  text-transform: uppercase;
+  letter-spacing: 0.18em;
+  margin: 28px 20px;
+  font-size: 18px;
+}
+
+.login {
+  position: absolute;
+  right: 30px;
+  margin: 20px 20px;
+  border: 1px solid currentColor;
+  padding: 8px 30px;
+  border-radius: 1000px;
+  transition: 0.3s all ease;
+  cursor: pointer;
+  background: black;
+  &:hover {
+    background: rgb(87, 16, 16);
+    transition: 0.3s all ease;
+  }
+}
+</style>