riot.tag2('app-header', '<header class="header"> <div class="header_inner"> <nav> <a if="{!isIndex}" href="/" class="header_nav_button_logo" title="クイズメーカー | みんなのクイズプラットフォーム"> <img src="/image/logo.svg" height="24"> </a> <a href="/quiz/create" title="クイズを作る" class="header_nav_button header_nav_button_create {isCreate ? \'active\' : \'\'}"> <span class="hide_sp">クイズを作る</span> </a> <a href="/quiz/ranking" title="ランキング" class="header_nav_button header_nav_button_ranking {isRanking ? \'active\' : \'\'}"> <span class="hide_sp">ランキング</span> </a> <a href="/quiz/search" title="クイズを探す" class="header_nav_button header_nav_button_search {isSearch ? \'active\' : \'\'}"> <span class="hide_sp">クイズを探す</span> </a> <a href="/creator" title="クリエイター" class="header_nav_button header_nav_button_creator {isCreater ? \'active\' : \'\'}"> <span class="hide_sp">クリエイター</span> </a> <a href="#" title="メニュー" class="header_nav_button header_nav_button_menu" onclick="{showMenu}"> &nbsp; </a> </nav> <div class="login_button_wrapper hide_sp"> <a if="{!isLogin}" href="/login" class="header_nav_button header_nav_button_login"> ログイン </a> <a if="{isLogin}" href="#" class="header_nav_button" onclick="{showMenu}"> <i class="fas fa-bars"></i> メニュー </a> </div> <div class="header_menu"> <a if="{!isLogin}" href="/login"> <i class="fas fa-sign-in-alt"></i> ログイン </a> <a href="/users/mypage" if="{isLogin}"> <i class="far fa-user"></i> マイページ </a> <a href="/faq"> <i class="far fa-question-circle"></i> FAQ </a> <a href="https://form.run/@quiz-maker" target="_blank"> <i class="far fa-envelope"></i> お問い合わせ </a> <a href="/users/logout" if="{isLogin}"> <i class="fas fa-sign-out-alt"></i> ログアウト </a> </div> </div> </header>', 'app-header { position: fixed; top: 0; z-index: 50; width: 100%; display: flex; background-color: #FFFFFF; text-align: center; border-bottom: 1px solid #f1f1f1; } app-header .header,[data-is="app-header"] .header{ width: 100%; height: 48px; } app-header .header_inner,[data-is="app-header"] .header_inner{ width: 768px; max-width: 100%; margin: 0 auto; position: relative; box-sizing: border-box; padding: 0 8px; } app-header .header_inner nav,[data-is="app-header"] .header_inner nav{ display: flex; flex-direction: row; justify-content: flex-start; align-items: center; } app-header .header_menu,[data-is="app-header"] .header_menu{ display: none; position: absolute; background-color: #FFFFFF; font-weight: bold; right: 0; top: 48px; border-radius: 0 0 4px 4px; box-sizing: border-box; padding: 8px 16px; } app-header .header_menu a,[data-is="app-header"] .header_menu a{ color: #085bbf; display: block; text-align: center; padding: 8px 16px 8px 32px; position: relative; } app-header .header_menu i,[data-is="app-header"] .header_menu i{ position: absolute; top: 12px; left: -4px; } app-header .header_nav_button,[data-is="app-header"] .header_nav_button{ display: flex; height: 48px; color: #191916; font-weight: bold; align-items: center; margin-right: 24px; font-size: 10px; } app-header .header_nav_button:before,[data-is="app-header"] .header_nav_button:before{ content: \'\'; width: 40px; height: 40px; background-repeat: no-repeat; align-items: center; display: block; background-size: contain; } app-header .header_nav_button_create:before,[data-is="app-header"] .header_nav_button_create:before{ background-image: url(/image/header_icon_create.png); } app-header .header_nav_button_create:hover:before,[data-is="app-header"] .header_nav_button_create:hover:before,app-header .header_nav_button_create.active:before,[data-is="app-header"] .header_nav_button_create.active:before{ background-image: url(/image/header_icon_create_on.png); } app-header .header_nav_button_ranking:before,[data-is="app-header"] .header_nav_button_ranking:before{ background-image: url(/image/header_icon_ranking.png); } app-header .header_nav_button_ranking:hover:before,[data-is="app-header"] .header_nav_button_ranking:hover:before,app-header .header_nav_button_ranking.active:before,[data-is="app-header"] .header_nav_button_ranking.active:before{ background-image: url(/image/header_icon_ranking_on.png); } app-header .header_nav_button_search:before,[data-is="app-header"] .header_nav_button_search:before{ background-image: url(/image/header_icon_search.png); } app-header .header_nav_button_search:hover:before,[data-is="app-header"] .header_nav_button_search:hover:before,app-header .header_nav_button_search.active:before,[data-is="app-header"] .header_nav_button_search.active:before{ background-image: url(/image/header_icon_search_on.png); } app-header .header_nav_button_creator:before,[data-is="app-header"] .header_nav_button_creator:before{ background-image: url(/image/header_icon_creator.png); } app-header .header_nav_button_creator:hover:before,[data-is="app-header"] .header_nav_button_creator:hover:before,app-header .header_nav_button_creator.active:before,[data-is="app-header"] .header_nav_button_creator.active:before{ background-image: url(/image/header_icon_creator_on.png); } app-header .header_nav_button_login,[data-is="app-header"] .header_nav_button_login{ border: 1px solid transparent; border-radius: 4px; box-sizing: border-box; padding: 8px 8px 8px 4px; height: 40px; color: #191916; margin-right: 0px; } app-header .header_nav_button_login:hover,[data-is="app-header"] .header_nav_button_login:hover{ color: #085bbf; } app-header .header_nav_button_login:before,[data-is="app-header"] .header_nav_button_login:before{ background-image: url(/image/header_icon_login.png); } app-header .header_nav_button_login:hover:before,[data-is="app-header"] .header_nav_button_login:hover:before{ background-image: url(/image/header_icon_login_on.png); } app-header .header_nav_button_logo,[data-is="app-header"] .header_nav_button_logo{ display: flex; align-items: center; margin-right: 24px; } app-header .header_nav_button .fa-bars,[data-is="app-header"] .header_nav_button .fa-bars{ display: inline-block; margin-right: 8px; } app-header .login_button_wrapper,[data-is="app-header"] .login_button_wrapper{ display: none; align-items: center; position: absolute; height: 100%; top: 0; right: 0; } app-header h1,[data-is="app-header"] h1{ text-align: center; } app-header + * { margin-top: 48px; } @media (max-width: 768px) { app-header .header_nav_button,[data-is="app-header"] .header_nav_button{ display: flex; height: 48px; color: #191916; font-weight: bold; align-items: center; margin-right: 0px; font-size: 14px; } app-header .header_nav_button:before,[data-is="app-header"] .header_nav_button:before{ content: \'\'; width: 40px; height: 40px; background-repeat: no-repeat; align-items: center; display: block; background-size: contain; } app-header .header_nav_button_create:before,[data-is="app-header"] .header_nav_button_create:before{ background-image: url(/image/sp_header_icon_create.png); } app-header .header_nav_button_create:hover:before,[data-is="app-header"] .header_nav_button_create:hover:before,app-header .header_nav_button_create.active:before,[data-is="app-header"] .header_nav_button_create.active:before{ background-image: url(/image/sp_header_icon_create_on.png); } app-header .header_nav_button_ranking:before,[data-is="app-header"] .header_nav_button_ranking:before{ background-image: url(/image/sp_header_icon_ranking.png); } app-header .header_nav_button_ranking:hover:before,[data-is="app-header"] .header_nav_button_ranking:hover:before,app-header .header_nav_button_ranking.active:before,[data-is="app-header"] .header_nav_button_ranking.active:before{ background-image: url(/image/sp_header_icon_ranking_on.png); } app-header .header_nav_button_search:before,[data-is="app-header"] .header_nav_button_search:before{ background-image: url(/image/sp_header_icon_search.png); } app-header .header_nav_button_search:hover:before,[data-is="app-header"] .header_nav_button_search:hover:before,app-header .header_nav_button_search.active:before,[data-is="app-header"] .header_nav_button_search.active:before{ background-image: url(/image/sp_header_icon_search_on.png); } app-header .header_nav_button_menu:before,[data-is="app-header"] .header_nav_button_menu:before{ background-image: url(/image/sp_header_menu.png); } app-header .header_nav_button_creator:before,[data-is="app-header"] .header_nav_button_creator:before{ background-image: url(/image/sp_header_icon_creator.png); } app-header .header_nav_button_creator:hover:before,[data-is="app-header"] .header_nav_button_creator:hover:before,app-header .header_nav_button_creator.active:before,[data-is="app-header"] .header_nav_button_creator.active:before{ background-image: url(/image/sp_header_icon_creator_on.png); } app-header .header_nav_button_login,[data-is="app-header"] .header_nav_button_login{ border: 1px solid #191916; border-radius: 4px; background-color: #085bbf; box-sizing: border-box; padding: 8px 8px 8px 4px; height: 40px; color: #FFFFFF; margin-right: 0px; } app-header .header_nav_button_login:before,[data-is="app-header"] .header_nav_button_login:before{ background-image: url(/image/header_icon_login.png); } app-header .header_nav_button_login:hover:before,[data-is="app-header"] .header_nav_button_login:hover:before{ background-image: url(/image/header_icon_login_on.png); } app-header .header_nav_button_logo,[data-is="app-header"] .header_nav_button_logo{ margin-right: 0px; max-width: 26%; width: 156px; } app-header .header_nav_button_logo img,[data-is="app-header"] .header_nav_button_logo img{ max-width: 100%; } app-header .menu_botton_wrapper,[data-is="app-header"] .menu_botton_wrapper{ position: absolute; top: 8px; right: 8px; } app-header .header_inner nav,[data-is="app-header"] .header_inner nav{ justify-content: space-between; } }', '', function(opts) {
        var self = this;
        this.isIndex = true;
        this.isCreate = true;
        this.isRanking = true;
        this.isSearch = true;
        this.isLogin = false;
        this.pathName = '';

        this.on('mount' , function(){
            self.pathName = location.pathname;
            self.isIndex = self.pathName == '/';
            self.isCreate = self.pathName.indexOf('/quiz/edit') != -1;
            self.isCreater = self.pathName.indexOf('/creator') != -1;
            self.isRanking = self.pathName.indexOf('/quiz/ranking') != -1;
            self.isSearch = self.pathName.indexOf('/quiz/search') != -1;
            self.update();

            $.ajax(SERVER_URL + '/users/isLogin')
            .done(function(data) {
                self.isLogin = data.isLogin;
                self.update();
                $('.login_button_wrapper').css('display', 'flex');
            });
        });

        this.showMenu = function(event) {
            event.preventDefault();
            if ($('.header_menu').is(':visible')) {
                $('.header_menu').slideUp(300);
            }
            else {
                $('.header_menu').slideDown(300);
            }
        }.bind(this)

        $(function(){
            $('.content').on('click',function(){
                $('.header_menu').slideUp(300);
            });
        })
});