默认情况下，我需要制作一个折叠的侧边栏，单击该按钮即可显示和隐藏，这是我使用的模板： link to the template
如果按Ctrl + Shift + i，您会看到侧边栏已最小化，并且显示了一个汉堡包按钮以打开并隐藏侧边栏，如何在页面加载时默认将其设置为？
这是我的代码：
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Création de Production</title>
<link rel="apple-touch-icon" sizes="76x76" href="../assets/img/apple-icon.png">
<link rel="icon" type="image/png" href="../assets/img/favicon.png">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport' />
<!-- Fonts and icons -->
<link rel="stylesheet" type="text/css" href="../assets/css/css.css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons" />
<link rel="stylesheet" href="../assets/css/font-awesome.min.css">
<!-- CSS Files -->
<link href="../assets/css/material-dashboard.css?v=2.1.1" rel="stylesheet" />
</head>
<body>
<div class="wrapper ">
<div class="sidebar" data-color="purple" data-background-color="white" data-image="../assets/img/sidebar-1.jpg">
<!--
Tip 1: You can change the color of the sidebar using: data-color="purple | azure | green | orange | danger"
Tip 2: you can also add an image using data-image tag
-->
<div class="logo" align="center">
<img class="img-responsive center-blockmx-auto d-block" src={{ asset('/images/logo.svg') }} width="60%">
<a href="#" class="simple-text logo-normal">
</a>
</div>
<div class="sidebar-wrapper">
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="./Admin">
<i class="material-icons">dashboard</i>
<p>Tableau de Bord</p>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./Creation_produit">
<i class="material-icons">category</i>
<p>Création Produit</p>
</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="./Creation_production">
<i class="material-icons">timeline</i>
<p>Création Production</p>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./Creation_poste">
<i class="material-icons">tablet_android</i>
<p>Création Poste</p>
</a>
</li>
</ul>
</div>
</div>
<div class="main-panel">
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-transparent navbar-absolute fixed-top ">
<div class="container-fluid">
<div class="navbar-wrapper">
<ol class="breadcrumb">
<!--<li class="breadcrumb-item"><a href="#">Edition Rapports</a></li>-->
<li class="breadcrumb-item active" aria-current="page">Edition Rapports</li>
</ol>
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" aria-controls="navigation-index" aria-expanded="false" aria-label="Toggle navigation">
<span class="sr-only">Toggle navigation</span>
<span class="navbar-toggler-icon icon-bar"></span>
<span class="navbar-toggler-icon icon-bar"></span>
<span class="navbar-toggler-icon icon-bar"></span>
</button>
<div class="collapse navbar-collapse justify-content-end">
<!--<form class="navbar-form">
<div class="input-group no-border">
<input type="text" value="" class="form-control" placeholder="Rechercher...">
<button type="submit" class="btn btn-white btn-round btn-just-icon">
<i class="material-icons">search</i>
<div class="ripple-container"></div>
</button>
</div>
</form>-->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">
<i class="material-icons">dashboard</i>
<p class="d-lg-none d-md-block">
Stats
</p>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">notifications</i>
<span class="notification">5</span>
<p class="d-lg-none d-md-block">
Some Actions
</p>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
<!--<a class="dropdown-item" href="#">1</a>
<a class="dropdown-item" href="#">2</a>
<a class="dropdown-item" href="#">3</a>
<a class="dropdown-item" href="#">Another Notification</a>
<a class="dropdown-item" href="#">Another One</a>-->
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="#pablo" id="navbarDropdownProfile" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">person</i>
<p class="d-lg-none d-md-block">
Compte
</p>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownProfile">
<a class="dropdown-item" href="#">
<div class="alert alert-danger success-block">
<strong>Bienvenue</strong>
</div>
<a class="dropdown-item" href="#">Profile</a>
<!--<a class="dropdown-item" href="#">Settings</a>-->
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="{{ url('/login/logout') }}">Déconnection</a>
</div>
</li>
</ul>
</div>
</nav>
<!-- End Navbar -->
<div class="content">
<div class="container-fluid">
<div class="row">
...