Menu is now a Vue component. Kinda.
このコミットが含まれているのは:
コミット
6140fe99d5
|
@ -17,6 +17,9 @@ window.Vue = require('vue');
|
||||||
|
|
||||||
// Vue.component('example', require('./components/Example.vue'));
|
// Vue.component('example', require('./components/Example.vue'));
|
||||||
|
|
||||||
|
// Global.
|
||||||
|
Vue.component('global-menu', require('./components/Global/Menu.vue'));
|
||||||
|
|
||||||
// Homepage.
|
// Homepage.
|
||||||
Vue.component('new-items', require('./components/Home/New.vue'));
|
Vue.component('new-items', require('./components/Home/New.vue'));
|
||||||
Vue.component('hot-items', require('./components/Home/Hot.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">
|
||||||
|
|
||||||
|
</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>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="app">
|
<div id="app">
|
||||||
<nav class="navbar navbar-default navbar-static-top">
|
<div><global-menu /></div>
|
||||||
<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">
|
|
||||||
|
|
||||||
</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>
|
|
||||||
@yield('content')
|
@yield('content')
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
新しいイシューから参照