Laravel でサイドバーを作りたい

Laravel　5.5で構築しています。Bootstrapをデザインで用いています（Bootstrapはcssファイルを公式サイトからダウンロードし、public>cssフォルダにアップロードして使用しています）

やりたいこと

[1]管理画面を作るのに、サイドメニューを付けたのですが、変な隙間ができてしまって困ってます…
この、隙間をなくしたいです。

[2]緑色のサイドメニューを、できれば、フッターまで伸ばしたいです。（フッター部分までサイドメニューの緑色がいくようにしたいです）

[3]サイドメニューをスマホで見た時にハンバーガーメニューになるようにしたいです。
Bootstrapのハンバーガーメニューを参考に記載してみましたが、スマホサイズにした時に、デフォルトで緑色のサイドメニュー部分が表示されてしまって、ハンバーガーをクリックすると引っ込む…というようになってしまいます。

↑スマホの時。ハンバーガーメニューは表示されますが、緑色サイドメニューがデフォルトで表示されている状態です。ハンバーガーメニューを2回クリックすると緑色サイドメニューは閉じます。

これを、デフォルトでは緑色のサイドメニューは表示されず、ハンバーガーをクリックすると表示されるようにしたいのです。

###コードです。

会員一覧html


<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>CatsClover</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        
        <!-- ↓今回記載 -->
        <link rel="stylesheet" type="text/css" href="/css/bootstrap.css">
        <link rel="stylesheet" type="text/css" href="/css/mysheet.css">
        <!-- <link rel="stylesheet" href="http://7e42b13ce36046daba8bef447f6bbf6f.vfs.cloud9.us-east-1.amazonaws.com/css/bootstrap.css"> -->
        
        <!-- bootstrap-datepickerを読み込む -->
        <link rel="stylesheet" type="text/css" href="../bootstrap-datepicker-1.6.4-dist/css/bootstrap-datepicker.min.css">
        <script type="text/javascript" src="../bootstrap-datepicker-1.9.0-dist/js/bootstrap-datepicker.min.js"></script>
        <script type="text/javascript" src="../bootstrap-datepicker-1.9.0-dist/locales/bootstrap-datepicker.ja.min.js"></script>
        
        
    </head>
    
    <body>
    <div id="wrapper">   
    
        
        <header class="">
    <nav class="navbar navbar-expand-sm navbar-warning bg-navbar border-bottom"> 
    <div id="admin_topvar">
        <ul>
            <li>
            <a class="navbar-logo" href="">CatsClover管理者ページ</a>
            </li>
                         <li class="nav-item">
                <a href="" class="nav-link" onclick="event.preventDefault(); document.getElementById('logout-form').submit();">
                    <i class="fas fa-sign-out-alt"></i>ログアウト
                </a>
                <form id="logout-form" action="" method="POST" style="display: none;">
                    <input type="hidden" name="_token" value="lMdDbH4DdIJ4hFDGihY8PecCMXJwfSjrlThIsRsu">
                </form>
            </li>
        </ul>    
    </div>     
    
<!-- ハンバーガーメニュー部分です。サイドメニューを指定　-->    
    <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#sidebar">
            <span class="navbar-toggler-icon"></span>
    </button>    
    </nav>    
</header>

 
  <div class="row">
      <div class="clearfix"></div>
           <div class="col-md-2" id="sidebar">
                <div class="sidebar-contents">
                    <ul class="nav-sidebar">
                        <li  class="active" ><a href="">会員一覧</a></li>
                        <li ><a href="">Cats一覧</a></li>
                        <li ><a href="">Photo一覧</a></li>
            
                    </ul>
                </div>              
           </div>
           <div class="col-md-10 mt-5 pr-5">  
               <h1>会員一覧</h1>
                   <table class="table table-striped mt-5">
                     会員のテーブル　省略
                   </table>
        
           </div>
  </div>
        
        
            <!-- footer -->

  <footer class="text-center border-top pt-3 pb-3 small">
  	© All rights reserved by cats-clover.
  </footer>

        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
        <script defer src="https://use.fontawesome.com/releases/v5.7.2/js/all.js"></script>
    
    </div>
    </body>
</html>

cssです。
mysheet.css　（bootstrapのcssにこちらでオリジナル部分をプラスしてしまいました）

footer {
    background-color: #d4e5ce;
    height: 50px;
    width: 100%;
    position: absolute;/*←絶対位置*/
    bottom: 0;
  
}


#wrapper {
    min-height: 100vh;
    position: relative;/*←相対位置*/
    padding-bottom: 50px;/*←footerの高さ*/
    box-sizing: border-box;/*←全て含めてmin-height:100vhに*/
}




.navbar-toggler{
  border-color: #ffffff;
}

.navbar-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(75,75,75,1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

/*管理画面*/
#admin_topvar ul li {
  display: inline-block;
}


.copy {
  text-align: center;
}

#sidebar {
  padding: 0;
  align-items: stretch /*コンテンツの分だけになる。*/

}

#sidebar ul{
  width: 100%;

}

#sidebar li{
  list-style: none;
  margin: 0;
  width: 100%;
  background-color: #91cd79;

}

#sidebar ul li a{
    display: block;
    padding: 10px 16px;
    color: #fff;
    text-decoration: none;
    transition: background-color .2s linear;
}

#sidebar ul li.active a {
    background-color: #ADD99B;
}

#sidebar ul li a:hover {
    background-color: #ADD99B;
}

アドバイスいただけますと幸いです。
よろしくお願いいたします。

m.ts10806

2020/03/02 21:05

Laravel全く関係ないのでは

mikeko0901

2020/03/03 14:15

仰る通り、Laravel関係ありませんでした… 申し訳ございません。

行動規範の内容に同意します

回答1件

ベストアンサー

ulはcssリセットなどで上書きしないと

css
1ul {
2    display: block;
3    list-style-type: disc;
4    margin-block-start: 1em;
5    margin-block-end: 1em;
6    margin-inline-start: 0px;
7    margin-inline-end: 0px;
8    padding-inline-start: 40px;
9}

のスタイルが反映されているので、

css
1#sidebar ul {
2  margin: 0;
3  padding: 0;
4}

のように記載を行えば左側の余白がなくなると思います。

投稿2020/03/02 15:42

jackmiwamiwa

総合スコア400

mikeko0901

2020/03/03 14:15

できました！ありがとうございます！

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

Laravel でサイドバーを作りたい

やりたいこと

関連した質問