네비게이션 컴포넌트

client/components/Navbar.vue

@@ -0,0 +1,117 @@
+<template>
+  <div>
+    <header class="nav-opt-sprite nav-locate-us nav-lang-en nav-ssl nav-unrec">
+      <div class="container-fluid desktop-nav">
+        <div class="row">
+          <!-- Logo -->
+          <div class="col-sm-2">
+            <div class="logo-area">
+              <a href="#">
+                <img src="/img/logo.png" alt="Logo" class="img-fluid">
+              </a>
+            </div>
+          </div>
+
+          <!-- Search bar -->
+          <div class="col-sm-6 pt-0"></div>
+
+          <div class="col-sm-4"></div>
+        </div>
+
+        <div class="row">
+
+          <div class="col-xl-2 col-lg-2 col-md-2 col-sm-2 pl-2">
+            <div class="nav-global-location">
+              <nuxt-link to="/address" class="nav-a nav-a-2">
+                <div id="nav-packard-glow-loc-icon" class="nav-sprite"></div>
+                <div class="glow-ingress-block">
+                  <span id="glow-ingress-line1" class="nav-line-2">Deliver to </span>
+                  <span id="glow-ingress-line2" class="nav-line-2">Califonia</span>
+                </div>
+              </nuxt-link>
+            </div>
+          </div>
+
+          <!-- Shopping -->
+          <div class="col-xl-6 col-lg-5 col-md-4 col-sm-6 p-0">
+           <div class="nav-fill">
+             <div class="nav-shop">
+               <nuxt-link to="/history" class="nav-a nav-a-2 nav-single-row-link">
+                <span class="nav-line-2">
+                  Browsing Hostory
+                  <span class="nav-icon nav-arrow" style="visibility: visible"></span>
+                </span>
+               </nuxt-link>
+             </div>
+           </div>
+
+           <div class="nav-xshop-container">
+             <div class="nav-xshop">
+               <a href="#" class="nav-a">Todas'deal</a>
+               <a href="#" class="nav-a">Todas'deal</a>
+               <a href="#" class="nav-a">Todas'deal</a>
+               <a href="#" class="nav-a">Todas'deal</a>
+               <a href="#" class="nav-a">Todas'deal</a>
+             </div>
+           </div>
+          </div>
+
+          <!--Account and order-->
+          <div class="col-xl-4 col-lg-5 col-md-6 col-sm-4 p-0">
+            <div class="nav-tools">
+              <a href="" id="icp-nav-flyout" class="nav-a nav-a-2 icp-link-style-2">
+                <span class="icp-nav-link-inner">
+                  <span class="nav-line-1">
+                    <span class="icp-nav-globe-img-2"></span>
+                    <span class="icp-nav-language">EN</span>
+                  </span>
+
+                  <span class="nav-line-2">
+                    &nbsp;
+                    <span class="nav-icon nav-arrow" style="visibility: visible"></span>
+                  </span>
+
+                </span>
+              </a>
+              <span class="icp-nav-link-border"></span>
+
+              <nuxt-link
+                to="/register"
+                class="nav-a nav-a-2"
+                id="nav-link-accountList"
+                tabindex="0"
+              >
+                <span class="nav-line-1">Hello, Sign in</span>
+                <span class="nav-line-2">
+                  Account &amp; Lists
+                  <span class="nav-icon nav-arrow" style="visiblity: visible"></span>
+                </span>
+              </nuxt-link>
+
+              <nuxt-link to="/orders" class="nav-a nav-a-2 nav-single-row-link">
+                <span class="nav-line-1"></span>
+                <span class="nav-line-2">Orders</span>
+              </nuxt-link>
+
+              <nuxt-link to="/cart" class="nav-a nav-a-2" id="nav-cart">
+                <span aria-hidden="true" class="nav-line-1"></span>
+                <span aria-hidden="true" class="nav-line-2">Cart</span>
+                <span class="nav-cart-icon nav-sprite"></span>
+                <span aria-hidden="true" class="nav-cart-count nav-cart-0">0</span>
+              </nuxt-link>
+            </div>
+          </div>
+        </div>
+
+
+
+      </div>
+    </header>
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>

client/layouts/default.vue

@@ -1,55 +1,19 @@
 <template>
   <div>
+    <Navbar />
     <nuxt />
   </div>
 </template>
 
-<style>
-html {
-  font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI',
-    Roboto, 'Helvetica Neue', Arial, sans-serif;
-  font-size: 16px;
-  word-spacing: 1px;
-  -ms-text-size-adjust: 100%;
-  -webkit-text-size-adjust: 100%;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-  box-sizing: border-box;
-}
-
-*,
-*:before,
-*:after {
-  box-sizing: border-box;
-  margin: 0;
-}
-
-.button--green {
-  display: inline-block;
-  border-radius: 4px;
-  border: 1px solid #3b8070;
-  color: #3b8070;
-  text-decoration: none;
-  padding: 10px 30px;
+<script>
+import Navbar from '~/components/Navbar'
+export default {
+  components: {
+    Navbar
+  }
 }
+</script>
 
-.button--green:hover {
-  color: #fff;
-  background-color: #3b8070;
-}
-
-.button--grey {
-  display: inline-block;
-  border-radius: 4px;
-  border: 1px solid #35495e;
-  color: #35495e;
-  text-decoration: none;
-  padding: 10px 30px;
-  margin-left: 15px;
-}
+<style>
 
-.button--grey:hover {
-  color: #fff;
-  background-color: #35495e;
-}
 </style>