From 6140fe99d5b5ac18752226794e10dde4cafa9375 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=83=86=E3=82=AF=E3=83=8B=E3=82=AB=E3=83=AB=E8=AB=8F?=
 =?UTF-8?q?=E8=A8=AA=E5=AD=90?= <david@sudomail.ne.jp>
Date: Thu, 1 Feb 2018 04:52:15 +0900
Subject: [PATCH] Menu is now a Vue component. Kinda.

---
 resources/assets/js/app.js                    |  3 +
 .../assets/js/components/Global/Menu.vue      | 67 +++++++++++++++++++
 .../assets/js/components/Global/Sidebar.vue   | 23 -------
 resources/views/layouts/app.blade.php         | 57 +---------------
 4 files changed, 71 insertions(+), 79 deletions(-)
 create mode 100644 resources/assets/js/components/Global/Menu.vue
 delete mode 100644 resources/assets/js/components/Global/Sidebar.vue

diff --git a/resources/assets/js/app.js b/resources/assets/js/app.js
index 9cc79ef..6b6f54f 100644
--- a/resources/assets/js/app.js
+++ b/resources/assets/js/app.js
@@ -17,6 +17,9 @@ window.Vue = require('vue');
 
 // Vue.component('example', require('./components/Example.vue'));
 
+// Global.
+Vue.component('global-menu', require('./components/Global/Menu.vue'));
+
 // Homepage.
 Vue.component('new-items', require('./components/Home/New.vue'));
 Vue.component('hot-items', require('./components/Home/Hot.vue'));
diff --git a/resources/assets/js/components/Global/Menu.vue b/resources/assets/js/components/Global/Menu.vue
new file mode 100644
index 0000000..62ebee6
--- /dev/null
+++ b/resources/assets/js/components/Global/Menu.vue
@@ -0,0 +1,67 @@
+<template>
+    <span>
+        <nav class="navbar navbar-default navbar-static-top">
+            <div class="container">
+                <div class="navbar-header">
+                    <!-- Collapsed Hamburger -->
+                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-collapse" aria-expanded="false">
+                        <span class="sr-only">Toggle Navigation</span>
+                        <span class="icon-bar"></span>
+                        <span class="icon-bar"></span>
+                        <span class="icon-bar"></span>
+                    </button>
+
+                    <!-- Branding Image -->
+                    <a class="navbar-brand" href="/">
+                        Hack Store
+                    </a>
+                </div>
+
+                <div class="collapse navbar-collapse" id="app-navbar-collapse">
+                    <!-- Left Side Of Navbar -->
+                    <ul class="nav navbar-nav">
+                        &nbsp;
+                    </ul>
+
+                    <!-- Right Side Of Navbar -->
+                    <ul class="nav navbar-nav navbar-right">
+                        <!-- Authentication Links -->
+                        <!-- If logged out -->
+                            <li><a href="/login">Login</a></li>
+                            <li><a href="/register">Register</a></li>
+                        <!-- Else -->
+                            <li class="dropdown">
+                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" aria-haspopup="true">
+                                    Username <span class="caret"></span>
+                                </a>
+
+                                <ul class="dropdown-menu">
+                                    <li><a href="/upload">Upload</a></li>
+                                    <li>
+                                        <a href="/logout"
+                                            onclick="event.preventDefault();
+                                                     document.getElementById('logout-form').submit();">
+                                            Logout
+                                        </a>
+
+                                        <form id="logout-form" action="/logout" method="POST" style="display: none;">
+                                            <!--{{ csrf_field() }}-->
+                                        </form>
+                                    </li>
+                                </ul>
+                            </li>
+                    </ul>
+                </div>
+            </div>
+        </nav>
+    </span>
+</template>
+
+<script>
+    export default {
+        name: 'global-menu',
+        mounted() {
+            console.log('Component mounted.')
+        }
+    }
+</script>
diff --git a/resources/assets/js/components/Global/Sidebar.vue b/resources/assets/js/components/Global/Sidebar.vue
deleted file mode 100644
index 601e61c..0000000
--- a/resources/assets/js/components/Global/Sidebar.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-<template>
-    <div class="container">
-        <div class="row">
-            <div class="col-md-8 col-md-offset-2">
-                <div class="panel panel-default">
-                    <div class="panel-heading">Example Component</div>
-
-                    <div class="panel-body">
-                        I'm an example component!
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-    export default {
-        mounted() {
-            console.log('Component mounted.')
-        }
-    }
-</script>
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index 15f4383..7d36e21 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -15,62 +15,7 @@
 </head>
 <body>
     <div id="app">
-        <nav class="navbar navbar-default navbar-static-top">
-            <div class="container">
-                <div class="navbar-header">
-
-                    <!-- Collapsed Hamburger -->
-                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-collapse" aria-expanded="false">
-                        <span class="sr-only">Toggle Navigation</span>
-                        <span class="icon-bar"></span>
-                        <span class="icon-bar"></span>
-                        <span class="icon-bar"></span>
-                    </button>
-
-                    <!-- Branding Image -->
-                    <a class="navbar-brand" href="{{ url('/') }}">
-                        {{ config('app.name', 'Laravel') }}
-                    </a>
-                </div>
-
-                <div class="collapse navbar-collapse" id="app-navbar-collapse">
-                    <!-- Left Side Of Navbar -->
-                    <ul class="nav navbar-nav">
-                        &nbsp;
-                    </ul>
-
-                    <!-- Right Side Of Navbar -->
-                    <ul class="nav navbar-nav navbar-right">
-                        <!-- Authentication Links -->
-                        @guest
-                            <li><a href="{{ route('login') }}">@lang('navbar.login')</a></li>
-                            <li><a href="{{ route('register') }}">@lang('navbar.register')</a></li>
-                        @else
-                            <li class="dropdown">
-                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" aria-haspopup="true">
-                                    {{ Auth::user()->name }} <span class="caret"></span>
-                                </a>
-
-                                <ul class="dropdown-menu">
-                                    <li><a href="{{ route('upload') }}">@lang('navbar.upload')</a></li>
-                                    <li>
-                                        <a href="{{ route('logout') }}"
-                                            onclick="event.preventDefault();
-                                                     document.getElementById('logout-form').submit();">
-                                            @lang('navbar.logout')
-                                        </a>
-
-                                        <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
-                                            {{ csrf_field() }}
-                                        </form>
-                                    </li>
-                                </ul>
-                            </li>
-                        @endguest
-                    </ul>
-                </div>
-            </div>
-        </nav>
+        <div><global-menu /></div>
         @yield('content')
         
     </div>