Responsive sidebar tailwind css
Question
I've been struggling with making responsive sidebar for so long with tailwindcss. Currently it looks like this
it looks fine when i have it on 1920x1080 screen, but not on bigger or smaller screens. When I scale it smaller the text is too close to each other and it doesnt look good image
i want it to hide that sidebar when the resolution is small, and instead of that sidebar there will be a button that will open sidebar, also when i zoom in (with ctrl + PLUS) that sidebar (zoomed in)
my html current code
<div class="scale-90">
<div class="flex flex-wrap w-full h-screen">
<div class="xs:w-3/12 xs:h-128 w-3/12 visible xm:invisible bg-gradient-to-tr rounded-3xl from-black via-gray-900 to-black p-3 shadow-lg ">
<div class="h-screen sticky top-0">
<div class="flex space-x-4 p-2 mt-4 mb-8 justify-center ">
<img class="h-20 align-middle" src="src/assets/fx-culture.png" alt="James Bhatta">
</div>
<div class="mr-32">
<div class="flex justify-center mr-16">
<img class="h-12 align-middle rounded-full" src="src/assets/logo1.png">
</div>
<ul class="space-y-10 text-sm">
<li>
<a class="flex items-center mr-16 space-x-3 justify-center text-gray-500 text-xl p-2 font-medium">
<span>Hello</span>
</a>
<a class="flex items-center ml-5 mb-20 space-x-3 justify-center text-white text-xl p-2 font-medium">
<span>Kristian Kotlar</span>
</a>
</li>
<li>
<a href="#" class="flex items-center space-x-3 justify-center text-gray-500 transition ease-in-out delay-50 text-2xl p-2 font-medium hover:text-white focus:shadow-outline">
<span>My profile</span>
</a>
</li>
<li>
<a href="#" class="flex items-center ml-10 space-x-3 justify-center text-gray-500 transition ease-in-out delay-50 p-2 text-2xl font-medium hover:text-white focus:shadow-outline">
<span>Subscriptions</span>
</a>
</li>
<li>
<a href="#" class="flex items-center space-x-3 justify-center text-white transition ease-in-out delay-50 p-2 text-2xl font-medium hover:text-white focus:shadow-outline">
<span>Academy</span>
</a>
</li>
<li>
<a href="#" class="flex items-center space-x-3 justify-center text-gray-500 transition ease-in-out delay-50 p-2 text-2xl font-medium hover:text-white focus:shadow-outline">
<span>Calendar</span>
</a>
</li>
<li>
<a href="#" class="flex items-center mt-32 space-x-3 justify-center text-gray-500 transition ease-in-out delay-50 p-2 text-2xl font-medium hover:text-white focus:shadow-outline">
<span>Settings</span>
</a>
</li>
<li>
<a href="" class="flex items-center space-x-3 justify-center text-gray-500 transition ease-in-out delay-50 p-2 text-2xl font-medium hover:text-white focus:shadow-outline">
<span>Sign Out</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="xs:w-8/12 w-8/12 xs:ml-20 xm:12/12 bg-white rounded-3xl">
<div class="grid place-items-center min-h-screen">
<div class="p-4 justify-items-center xs:justify-items-start max-w-5xl grid gap-x-24 gap-y-8 xs:gap-y-12 xs:gap-x-128 xs:grid-cols-3 xs:p-1 ">
<h1 class="text-4xl font-extrathick xs:col-span-3 xs:grid xs:gap-4 xs:grid-cols-3">Webinars</h1>
<div class="h-64 w-64 bg-gray-100 xs:h-auto xs:square rounded-xl">
<img src="src/assets/logo.png" class="mx-auto">
<h1 class="text-3xl font-extralight text-gray-500 text-center">
<span class="">Beginners</span>
</h1>
</div>
<div class="h-64 w-64 bg-gray-100 xs:h-auto xs:square rounded-xl">
<img src="src/assets/logo.png" class="mx-auto">
<h1 class="text-3xl font-extralight text-gray-500 text-center">
<span class="">Advanced</span>
</h1>
</div>
<div class="h-64 w-64 bg-gray-100 xs:h-auto xs:square rounded-xl">
<img src="src/assets/logo.png" class="mx-auto">
<h1 class="text-3xl font-extralight text-gray-500 text-center">
<span class="">Professional</span>
</h1>
</div>
<h1 class="text-4xl font-extrathick xs:col-span-3 xs:grid xs:gap-4 xs:grid-cols-3">Academy</h1>
<div class="h-96 w-256 overflow-auto inline-block ">
<table class="min-w-full">
<tbody>
<tr class="bg-gray-200">
<td class="p-3 px-6 py-4 text-gray-700">
asdasdasdasdasd
</td>
<td class="px-6 text-gray-700">
1:27:21
</td>
</tr>
<tr class="pt-8">
<td class="px-6 py-4 text-gray-700">
asdasdasdasdasdsssssssssssss
</td>
<td class="px-6 text-gray-700">
0:19:21
</td>
</tr>
<tr class="bg-gray-200">
<td class="p-3 px-6 py-4 text-gray-700">
asdasdasdasdasd
</td>
<td class="px-6 text-gray-700">
0:20:21
</td>
</tr>
<tr class="pt-8">
<td class="px-6 py-4 text-gray-700">
asdasdasdasdasdsssssssssssss
</td>
<td class="px-6 text-gray-700">
1:13:37
</td>
</tr>
<tr class="bg-gray-200">
<td class="p-3 px-6 py-4 text-gray-700">
asdasdasdasdasd
</td>
<td class="px-6 text-gray-700">
0:55:01
</td>
</tr>
<tr class="pt-8">
<td class="px-6 py-4 text-gray-700">
asdasdasdasdasdsssssssssssss
</td>
<td class="px-6 text-gray-700">
1:13:37
</td>
</tr>
<tr class="bg-gray-200">
<td class="p-3 px-6 py-4 text-gray-700">
asdasdasdasdasd
</td>
<td class="px-6 text-gray-700">
0:55:01
</td>
</tr>
</tbody>
</table>
</div>
<div class="h-96 w-256 xs:ml-36 bg-gray-100 rounded-xl">
</div>
</div>
</div>
</div>
</div>
</div>
and my tailwind.config.js file
const defaultTheme = require("tailwindcss/defaultTheme");
module.exports = {
content: [
"./index.html",
"./src/**/*.{vue,js,ts,jsx,tsx}",
],
theme: {
extend: {
width: {
'256': '30rem',
},
height: {
'128': '61rem',
},
},
screens: {
xs: "1390px",
md: "1040px",
xdd: "1000px",
...defaultTheme.screens,
}
},
plugins: [],
}
1 answers
solution1
0 2021-12-30 14:52:13
To hide the side bar on small screens, you can simply hide the sidebar by default and on larger screens you'll show it. You can read more about it on Tailwind documentation
Also add a toggle icon that will show on smaller screens and be hidden on larger screens and finally you can add Javascript to display the hidden sidebar as an overlay on smaller screens.
I did a quick implementation of this on codepen (although without the Javascript toggle function), feel free to copy the code and add your javascript toggle function.
<script src="https://cdn.tailwindcss.com"></script> <div class="scale-90"> <button aria-expanded="true" aria-controls="sidebar" class="lg:hidden text-gray-600 hover:text-gray-900 cursor-pointer rounded"> <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h6a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path> </svg> <svg class="w-6 h-6 hidden" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path> </svg> </button> <div class="flex flex-wrap w-full h-screen"> <div class="hidden lg:block xs:w-3/12 xs:h-128 w-3/12 visible xm:invisible bg-gradient-to-tr rounded-3xl from-black via-gray-900 to-black p-3 shadow-lg "> <div class="h-screen sticky top-0"> <div class="flex space-x-4 p-2 mt-4 mb-8 justify-center "> <img class="h-20 align-middle" src="src/assets/fx-culture.png" alt="James Bhatta"> </div> <div class="mr-32"> <div class="flex justify-center mr-16"> <img class="h-12 align-middle rounded-full" src="src/assets/logo1.png"> </div> <ul class="space-y-10 text-sm"> <li> <a class="flex items-center mr-16 space-x-3 justify-center text-gray-500 text-xl p-2 font-medium"> <span>Hello</span> </a> <a class="flex items-center ml-5 mb-20 space-x-3 justify-center text-white text-xl p-2 font-medium"> <span>Kristian Kotlar</span> </a> </li> <li> <a href="#" class="flex items-center space-x-3 justify-center text-gray-500 transition ease-in-out delay-50 text-2xl p-2 font-medium hover:text-white focus:shadow-outline"> <span>My profile</span> </a> </li> <li> <a href="#" class="flex items-center ml-10 space-x-3 justify-center text-gray-500 transition ease-in-out delay-50 p-2 text-2xl font-medium hover:text-white focus:shadow-outline"> <span>Subscriptions</span> </a> </li> <li> <a href="#" class="flex items-center space-x-3 justify-center text-white transition ease-in-out delay-50 p-2 text-2xl font-medium hover:text-white focus:shadow-outline"> <span>Academy</span> </a> </li> <li> <a href="#" class="flex items-center space-x-3 justify-center text-gray-500 transition ease-in-out delay-50 p-2 text-2xl font-medium hover:text-white focus:shadow-outline"> <span>Calendar</span> </a> </li> <li> <a href="#" class="flex items-center mt-32 space-x-3 justify-center text-gray-500 transition ease-in-out delay-50 p-2 text-2xl font-medium hover:text-white focus:shadow-outline"> <span>Settings</span> </a> </li> <li> <a href="" class="flex items-center space-x-3 justify-center text-gray-500 transition ease-in-out delay-50 p-2 text-2xl font-medium hover:text-white focus:shadow-outline"> <span>Sign Out</span> </a> </li> </ul> </div> </div> </div> <div class="xs:w-8/12 w-8/12 xs:ml-20 xm:12/12 bg-white rounded-3xl"> <div class="grid place-items-center min-h-screen"> <div class="p-4 justify-items-center xs:justify-items-start max-w-5xl grid gap-x-24 gap-y-8 xs:gap-y-12 xs:gap-x-128 xs:grid-cols-3 xs:p-1 "> <h1 class="text-4xl font-extrathick xs:col-span-3 xs:grid xs:gap-4 xs:grid-cols-3">Webinars</h1> <div class="h-64 w-64 bg-gray-100 xs:h-auto xs:square rounded-xl"> <img src="src/assets/logo.png" class="mx-auto"> <h1 class="text-3xl font-extralight text-gray-500 text-center"> <span class="">Beginners</span> </h1> </div> <div class="h-64 w-64 bg-gray-100 xs:h-auto xs:square rounded-xl"> <img src="src/assets/logo.png" class="mx-auto"> <h1 class="text-3xl font-extralight text-gray-500 text-center"> <span class="">Advanced</span> </h1> </div> <div class="h-64 w-64 bg-gray-100 xs:h-auto xs:square rounded-xl"> <img src="src/assets/logo.png" class="mx-auto"> <h1 class="text-3xl font-extralight text-gray-500 text-center"> <span class="">Professional</span> </h1> </div> <h1 class="text-4xl font-extrathick xs:col-span-3 xs:grid xs:gap-4 xs:grid-cols-3">Academy</h1> <div class="h-96 w-256 overflow-auto inline-block "> <table class="min-w-full"> <tbody> <tr class="bg-gray-200"> <td class="p-3 px-6 py-4 text-gray-700"> asdasdasdasdasd </td> <td class="px-6 text-gray-700"> 1:27:21 </td> </tr> <tr class="pt-8"> <td class="px-6 py-4 text-gray-700"> asdasdasdasdasdsssssssssssss </td> <td class="px-6 text-gray-700"> 0:19:21 </td> </tr> <tr class="bg-gray-200"> <td class="p-3 px-6 py-4 text-gray-700"> asdasdasdasdasd </td> <td class="px-6 text-gray-700"> 0:20:21 </td> </tr> <tr class="pt-8"> <td class="px-6 py-4 text-gray-700"> asdasdasdasdasdsssssssssssss </td> <td class="px-6 text-gray-700"> 1:13:37 </td> </tr> <tr class="bg-gray-200"> <td class="p-3 px-6 py-4 text-gray-700"> asdasdasdasdasd </td> <td class="px-6 text-gray-700"> 0:55:01 </td> </tr> <tr class="pt-8"> <td class="px-6 py-4 text-gray-700"> asdasdasdasdasdsssssssssssss </td> <td class="px-6 text-gray-700"> 1:13:37 </td> </tr> <tr class="bg-gray-200"> <td class="p-3 px-6 py-4 text-gray-700"> asdasdasdasdasd </td> <td class="px-6 text-gray-700"> 0:55:01 </td> </tr> </tbody> </table> </div> <div class="h-96 w-256 xs:ml-36 bg-gray-100 rounded-xl"> </div> </div> </div> </div> </div> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Responsive Fixed Sidebar CSS
Dropdown menu inside sidebar using Tailwind CSS
CSS For responsive sidebar and main content?
Responsive sidebar interaction using CSS
How to create responsive grid layout in tailwind css?
Tailwind CSS responsive behavior on nextjs app
How to add heading section before sidebar with tailwind css
Fixed width sidebar isn't the right size in Tailwind CSS
Pushing sidebar down in responsive CSS and HTML website
How to make two grid responsive layout in tailwind css
Related Tags