Menu is now a Vue component. Kinda.

このコミットが含まれているのは:
テクニカル諏訪子 2018-02-01 04:52:15 +09:00
コミット 6140fe99d5
4個のファイルの変更71行の追加79行の削除

ファイルの表示

@ -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'));

ファイルの表示

@ -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>

ファイルの表示

@ -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>

ファイルの表示

@ -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>