I try to do a sidebar that we can collapse (hide) or display, the goal is that the sidebar kind of push the content on the right.
I've done that, but when I display the sidebar the content is compressed/not pushed, we keep the responsivity.
If I add flex-shrink-0 to the main part, it works well for the sidebar push content behavior, but I totally loose responsivity.
I would like somthink like https://fontawesome.com/ when the view is minimised, I don't know how explain it.
#sidebar.collapsing.width {
height: auto;
width: 0;
overflow: hidden;
transition: width .35s ease;
}<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>The page title</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf"
crossorigin="anonymous"></script>
</head>
<body>
<div class="d-flex align-items-stretch vh-100">
<nav>
<div id="sidebar" class="h-100 collapse width show">
<div class="h-100 d-flex flex-column p-2 text-white bg-dark" style="width: 280px;">
<a class="m-2" href="#">
<img src="https://via.placeholder.com/110x50?text=Logo" alt="Aviron Tours Métropole">
</a>
<hr>
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link text-light" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" href="#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" href="#">Link 3</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" href="#">Link 4</a>
</li>
</ul>
<hr class="mt-auto">
<ul class="nav flex-column small">
<li class="nav-item">
<a class="nav-link link-secondary" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link link-secondary" href="#">Link 2</a>
</li>
</ul>
<hr>
<div class="dropdown">
<a href="#" class="d-flex align-items-center text-white text-decoration-none dropdown-toggle"
id="dropdownUser1" data-bs-toggle="dropdown" aria-expanded="false">
<img src="https://robohash.org/JD.png?set=set4"
alt="mdo" width="32" height="32" class="rounded-circle me-2">
<strong>John Doe</strong>
</a>
<ul class="dropdown-menu dropdown-menu-dark text-small shadow" aria-labelledby="dropdownUser1">
<li><a class="dropdown-item" href="#">My profile</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Logout</a></li>
</ul>
</div>
</div>
</div>
</nav>
<div class="flex-grow-1 overflow-auto bg-light">
<nav class="d-flex bg-white shadow-sm" style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
<button id="toggle-sidebar" class="btn ms-2 me-3 py-3" type="button" data-bs-toggle="collapse"
data-bs-target="#sidebar" aria-expanded="true" aria-controls="sidebar">
<span class="bi bi-list"></span>
</button>
<ol class="breadcrumb mb-0 pt-3">
<li class="breadcrumb-item">
<a href="#">
<span class="bi bi-house-door-fill"></span> Home
</a>
</li>
</ol>
</nav>
<main class="my-3 px-3">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae tellus suscipit, ultrices mauris a,
cursus nunc. Morbi odio enim, congue a dignissim et, rutrum ac nunc. Donec maximus ipsum nec diam
facilisis, quis aliquam justo pretium. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
posuere cubilia curae; Sed porta sollicitudin nisi, tempus luctus dui semper scelerisque. Vivamus quis
turpis arcu. Aenean efficitur tortor vel neque ultricies mattis. Quisque eu pretium metus, sed pulvinar
nisl. Proin scelerisque ex non lacus ornare egestas. Pellentesque vel rhoncus tellus. Nullam laoreet
sapien nec enim blandit, nec pretium dolor tempus. Aliquam erat volutpat. Ut sit amet felis vulputate,
auctor neque at, tempus ipsum. Quisque tempus bibendum ultricies. Praesent non lectus tortor.
</p>
<p>
Integer hendrerit lectus non quam efficitur dapibus. Vestibulum blandit nisi at neque tincidunt aliquet.
Aenean rutrum risus sed eros imperdiet, sit amet venenatis justo faucibus. Proin at vestibulum sapien.
Nunc mollis odio ultricies, vulputate lacus quis, auctor elit. Curabitur vitae sem sed ipsum pretium
ullamcorper. Nunc rutrum, purus blandit ullamcorper luctus, mauris neque ultricies orci, a aliquam risus
tellus et erat. Suspendisse id risus sodales, varius enim at, rutrum purus.
</p>
<p>
Donec porta urna porta nisl eleifend ultricies. Aenean iaculis congue neque vitae posuere. Donec vitae
pellentesque leo, sed convallis eros. Fusce auctor scelerisque justo, sit amet lobortis augue tempus sit
amet. Aliquam erat volutpat. Duis id est tortor. Suspendisse arcu turpis, lobortis non auctor vitae,
accumsan sit amet risus. Suspendisse finibus mi bibendum libero elementum, vel malesuada elit sagittis.
</p>
<p>
Aenean in ipsum neque. Quisque ligula erat, maximus sed porta a, mattis et massa. Morbi a sapien
molestie, interdum sapien sed, tristique lectus. Integer hendrerit, lacus quis volutpat sodales, eros
nisi bibendum urna, non pharetra enim velit eu lectus. Nam dignissim nibh nec nunc finibus eleifend.
Praesent consequat molestie odio et auctor. Sed faucibus urna vel pretium viverra. Proin non mi eu
mauris mollis mattis eu quis ante. Sed auctor porttitor tellus, non porta diam posuere et. Integer
aliquam mi nulla, ac porttitor lacus efficitur vitae. Fusce tortor arcu, mollis eu lectus at, fringilla
mollis nisl. Integer quis aliquam risus. Phasellus vitae rhoncus dolor. Aenean eu urna a velit convallis
auctor.
</p>
<p>
Nam nunc ante, feugiat nec commodo ac, blandit nec sapien. Maecenas eget tempor nunc. Vivamus eu
malesuada ante. Sed porta elementum nunc ut vestibulum. Quisque facilisis eros aliquam, tristique quam
eu, scelerisque metus. Nulla ultricies elit at diam posuere, eu lobortis mauris pellentesque.
Pellentesque pulvinar tortor sit amet neque suscipit consectetur.
</p>
<p>
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Etiam commodo
diam purus, nec dapibus neque aliquet eget. Aliquam in lobortis urna, nec bibendum sem. Praesent eget
ultricies neque. Morbi pharetra in velit id tristique. Mauris tristique sodales lacus accumsan gravida.
Integer sed lorem nec urna egestas mollis vitae id turpis. Sed non dolor odio. Etiam congue nunc pretium
nibh bibendum, vitae maximus dui dapibus. Donec euismod venenatis nisl, vel laoreet eros efficitur
molestie. Fusce pharetra, enim nec eleifend imperdiet, tellus quam bibendum tellus, vel blandit orci
sapien ut erat.
</p>
<p>
Nam bibendum nisi id scelerisque feugiat. Vestibulum cursus arcu sed elit blandit, ac hendrerit magna
iaculis. Mauris suscipit mauris a porttitor tempor. Vestibulum quis euismod risus, dictum blandit dui.
Praesent et sapien in dui blandit aliquam. Integer quis auctor augue. Ut efficitur aliquam condimentum.
Aenean dolor nibh, gravida non elit eget, euismod laoreet ipsum. Vestibulum iaculis diam sed felis
cursus pulvinar. Proin a purus varius, pulvinar quam nec, fringilla nisl. Morbi in nulla nisl. Sed in
ipsum quis lorem volutpat feugiat. Proin finibus consequat nisi varius ultrices. Donec ultricies finibus
tellus, aliquet viverra sapien tincidunt nec. Suspendisse mollis imperdiet vehicula. Sed commodo purus
vel mauris vulputate accumsan.
</p>
<p>
Proin ac massa quis orci dapibus interdum. Aenean semper ipsum ac urna pharetra ultrices. Nunc id
vehicula urna. Integer sollicitudin, enim sit amet fermentum dapibus, elit nisl convallis augue, eget
imperdiet velit ex vel nisl. Pellentesque feugiat libero sed felis pulvinar tempus. Suspendisse non
lacus ex. Quisque facilisis dolor augue, ac mollis est consequat non. Mauris sed libero vestibulum,
dignissim metus ut, bibendum leo. Praesent viverra sem eget imperdiet consequat. Vestibulum dapibus erat
eu elit ornare porta. Nunc tristique leo eget turpis luctus, sit amet lacinia odio elementum. Donec eget
dignissim quam, eleifend pharetra lorem. Sed aliquet molestie arcu mollis bibendum. Nullam efficitur
odio ut nibh euismod fermentum.
</p>
<p>
Vivamus laoreet ultrices orci, a cursus purus porttitor eget. Donec ut blandit turpis. Maecenas arcu
tellus, pretium et nibh sed, pulvinar tempor arcu. Cras tempor a risus a molestie. Vestibulum ante ipsum
primis in faucibus orci luctus et ultrices posuere cubilia curae; Etiam vitae massa neque. Integer vel
pretium tellus. Praesent in metus eget mauris porttitor faucibus. Donec aliquam, mi viverra rutrum
tempus, neque lorem luctus urna, a suscipit metus leo vitae quam. Integer vestibulum vulputate purus a
euismod.
</p>
<p>
Etiam vel magna felis. Donec sollicitudin condimentum ipsum, eu auctor dolor fermentum id. Pellentesque
tristique vitae lorem quis accumsan. Sed laoreet arcu sit amet varius fringilla. Class aptent taciti
sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed pellentesque rhoncus dolor,
vel molestie augue sollicitudin ut. Vestibulum in felis vitae nibh condimentum euismod. Suspendisse id
purus sapien. Vivamus sapien diam, iaculis vel massa sed, ultricies dignissim ligula. Fusce interdum non
massa ut lacinia. Mauris facilisis sodales faucibus. Sed hendrerit facilisis mi lobortis aliquam. Proin
ullamcorper erat pulvinar neque imperdiet, et tempor odio finibus. Vestibulum tortor nisl, venenatis
placerat odio at, commodo tincidunt diam.
</p>
</main>
</div>
</div>
</body>
</html>
