【Chobiitカスタマイズ集・その②】サイドバーを非表示にする！

#はじめに
今回も今回とて、Chobiitのカスタマイズについて紹介したいと思います！
Chobiitとは、株式会社ノベルワークスが提供している
Cybozu社のkintoneとの外部連携サービスです。
詳しくはこちらをご参照ください！→https://www.novelworks.jp/chobiit

#Chobiitのサイドバーってどこ？？
画像赤枠の部分になります。

最近「クリックする箇所を最小限にしたい＝サイドバーを非表示にしたい」という
お声を頂くことが増えてきました。
今回はこの赤枠の部分を非表示にするカスタマイズをご紹介致します！

#手順①：サイドバーを非表示にする

hide_sidebar.css

/*サイドバーを非表示*/
#sidebar {
    display: none;
}

/*list-app-custom.jsでのモバイル版対応の影響回避*/
#content{
    height: 100vh;
}

/*ヘッダーを左詰め*/
.header {
    padding-left: 0px;
}

/*レコード詳細画面のボタンを左詰め*/
.follow {
    left: 0;
}

上記で作成したCSSをChobiitに設定します。
設定方法や設定場所については、下記のURLを参照してください。
→https://www.novelworks.jp/chobiit/customize/

設定してみると…サイドバーが消えました！

ただし、ここで問題発生です。
サイドバーと一緒に、ホームへの遷移ボタン（赤色の枠）も消えてしまいました。
そのため、ロゴ＋表示名（黄色の枠）からホームへ遷移させる実装をしましょう！

#手順②：アプリ一覧画面に遷移する処理

list-app-custom.js

$(function () {

    //sibar
    //モバイル版：サイドバー非表示
    $('#rowOffCanvas').removeClass('row-offcanvas');
    $('#rowOffCanvas').removeClass('row-offcanvas-left');
    $('.d-sm-block').remove();

    //モバイル版：ロゴを表示
    $('.logo').siblings().show();
    
    //モバイル版：表示名を表示
    $('.logo').siblings().css('font-size', '0.9rem');
    
    //ロゴのカーソル形状を設定
    $('.logo').css('cursor', 'pointer');
    
    //表示名のカーソル形状を設定
    $('.logo').siblings().css('cursor', 'pointer');
    
    //ロゴをクリックしたらアプリ一覧画面に遷移
    $('.logo').click(function () {
        location.href = location.origin + '/list_app.html';
    });
    
    //表示名をクリックしたらアプリ一覧画面に遷移
    $('.logo').siblings().click(function () {
        location.href = location.origin + '/list_app.html';
    });

});

これで解決です！