It correctly bundles React in production mode and optimizes the build for the best performance. Ill do this in a few other places throughout the sidenav and content sections too.

A community for learning and developing web applications using React by Facebook. The full working demo can be viewed here. I did this to update the title on the Content component, but I couldve let a router help me with this instead. In this section we will create simple react tailwind css sidebar, react tailwind admin dashboard, react tailwind dark admin panel and react tailwind sidebar in react examples with Tailwind CSS. Also, I'd consider these showoffs to be more about skill building than web dev efficiency.

Some people inside this comments has provided valuable feedback. I can only add click handlers to native elements like a, div, span, etc. Usually, Id put a logout or settings button in a sidenav footer. Haha I have an almost identical design for my web app I've been working on, menu location, responsive design, even the bottom aligned items lol. Press J to jump to the feed. React Tailwind collapsible sidebar using useState hooks. Building a decent sidenav almost always involves flexbox, and this example is no exception. If malikidrees is not suspended, they can still re-publish their posts from their dashboard. if you combine then both you can have incredible results and help you perform much more better. Install & Setup Vite + React + Typescript + Tailwind CSS 3. This helps me build mental models of how things work. Also, I really just enjoy building things. Something I have totally missed Nice work man, im also working on a project with a sidebar, Can you plz provide the github link. thanx. React, "flex flex-col h-screen p-3 bg-white shadow w-60", "flex items-center p-2 space-x-3 rounded-md", "M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6", "M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4", "M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z", "M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z", "M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1", "grid grid-cols-1 gap-6 mb-6 lg:grid-cols-3", "w-full px-4 py-5 bg-white rounded-lg shadow", "text-sm font-medium text-gray-500 truncate", "mt-1 text-3xl font-semibold text-gray-900", "absolute inset-y-0 left-0 flex items-center py-4", "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z", "w-full py-2 pl-10 text-sm rounded-md focus:outline-none", "flex flex-col h-screen p-3 bg-gray-800 shadow w-60", Laravel 9 Insert Category in Posts CRUD Example, Laravel 9 Rest Api Authentication with Vue 3 Composition Api. The animation is done with Tailwind CSS without any other external libraries. This tag could easily also be a div, but I think using the nav tag gives a clear indication of what its contents are and their intention. Don't know if I am out of pocket saying this, but why does everybody praise this kinda stuff? I know I keep stressing this point, but I do think its important. With the sidenav now complete I can take a look at the content section of the page. Thank for reading. Templates let you quickly answer FAQs or store snippets for re-use.

First, I make the sidebar menu responsive. It's a better experience for sure. Inside the module.export we simply need to add the path of our components and pages directory ( where we will use Tailwind CSS ). What about making it auto collapse on selection on mobile? It's a different workflow, plus it's about the reasons why you'd use React and tailwind over CSS/vanilla JS to begin with. Using Tailwind and React to achieve something that can be done with minor CSS and Vanilla JS? I think its a better user experience to display the active page on the content page, but that might just be my personal opinion. The last component in the sidenav is the footer. I used svg icons from Heroicons for this example. For further actions, you may consider blocking this person and/or reporting abuse.

Nice one!Is there any way you can share the code in github or similar? But, I want a footer section in the sidenav, and flexbox makes it easy to push an element to the button via margin-top: auto; on the element inside the parent flexbox container.

A header, a menu, and a footer. The page will reload when you make changes. The main thing to know about my usage of React here is that I use the useState hook to track the active page, and I pass the setActivePage method down to the child components to update the state.

See the section about running tests for more information. Looking over the code, almost every component that makes up the sidenav uses flexbox. It has support for light and dark mode and comes with a responsive side bar.

once we declared our animation we can use it on our page, you can see the final result compared to the one we want to clone.

In addition to initializing the grid on this element, Ill also set the height to 100% of the view height via h-screen to ensure that the sidenav and content sections span the entire height of the window. Built on Forem the open source software that powers DEV and other inclusive communities. A blog about web development written by a busy dad, flex items-center no-underline text-green-50 hover:text-green-100 p-3 rounded-md. Join to get notified with new tutorials, Larainfo website focuses only web language and framework tutorial PHP, Laravel, API, MySQL, AJAX, jQuery, JavaScript,tailwind css, Tailwind CSS is a utility-first CSS framework packed with classes that can be composed to build any design, directly in your markup.Next.js is a React framework with features like hybrid static and server rendering, TypeScript support, smart bundling, route pre-fetching, and more. Theyre where the click handlers are added to change the active link styles, and theyre also where the content would be changed. Once unpublished, this post will become invisible to the public For mobile user experience maybe you can close sidebar on click in order to have less interaction. I was searching for a simple layout with responsive sidebar and support for dark mode built with react and tailwind. Similar to the others, this component also uses flexbox for alignment via Tailwinds flex utility class. Start a team blog, invite your team, and start publishing. Once unpublished, all posts by malikidrees will become hidden and only accessible to themselves. Exploring new technologies as they come and go, A Simple chat app using Socket.io with NodeJS and ReactJS, Client Side React Application using GitHub GraphQL API - RepoFinder.

Get updates right in your inbox. I used React for this example, but I wont be going too deep into the details of it.

The sidenav header uses flexbox to center align the large icon with the large text. I then added a border underneath of it to break up the top from the bottom. Additionally, I cant add a click handler to a React component, NavItem in this case, to set the active page. Tailwind has a really clever utility class that I used here to add spacing between elements. Press question mark to learn the rest of the keyboard shortcuts.

Updated on May 17.

It seems there is a lot of people interested on how to do it. We're a place where coders share, stay up-to-date and grow their careers. It's totally better mobile user experience to close the sidebar on click. the last step is to add a tailwind directive in our global css file, The first things is to import some icons and add the data for our sidebar, now we have all our data and icons we can now start coding. Tailwind made this easier but not without my prior css knowledge. All the way down to the individual navigation items. In this post we will details everything you need to know to setup nextjs and tailwind css and make a cool sidebar.

Flexbox is used again for this component, but mostly to ensure that the content takes up the available space using Tailwinds flex-1 which is equivalent to flex: 1 1 0%;. Its honestly made me more confident in my layouts and how they behave on various screen sizes. The main content portion of the page is a placeholder. Live Website, Feel free to contribute and extend it in any suitable way :). Thank you for the suggestion. and only accessible to Malik-Idrees. Specifically, Ill be using Tailwinds flex with flex-col, forcing the flex-direction to column.

The text itself should usually be a link to whatever the homepage is the application. Which leads me to the sidenav example described in this post. Really learning how to use flexbox has been a revelation for me. I'll implement it.

This parent component is also where Ill track the state of the active page. As mentioned at the start, the magic that pushes the footer to the bottom of the sidenav is margin-top: auto; done through Tailwinds mt-auto class. our second step is to add our collapse icon and make it appear only as we take a mouse and hover the container as you can see, we can now start adding a little bit of animation to our project using framer motion, the first things is to import motion and useAnimation that into our code, the fisrt one is the sidebar container.We need to animation the width according to the state of our sidebar if its open or not, the second is to make our text visible and invisible and then remove or show then to the DOM with the display property, the last animation is to simple animate the opacity of our items title we don't want to make our design jump every time we open and close the sidebar. Like anything else, getting better at flexbox comes down to practice. Also, as an advice, would make the side menu close whenever a link is clicked in it. we will need a couple of library to start coding our sidebar like framer motion for animation and react-icons for our icons, now we have the packages we need to our project we can now setup tailwind to finish the setup process.

Launches the test runner in the interactive watch mode.

The Content component takes the activePage from the sidenav and displays it at the top. Your app is ready to be deployed! I made the text a little fancier by increasing the size, color, and hover effect. I'm currently improving my user dashboard for a SaaS side-project. Alignment in the sidenav was a struggle.

You can find the code on my github. we did it. See the section about deployment for more information. The nav links all sit inside of a nav tag. DEV Community A constructive and inclusive social network for software developers.

The header is where an icon or logo goes, along with the name of the application.

we know need to define the famer motion controllers and translate all the details above into our animation. Are you sure you want to hide this comment? A strong knowledge of css is beneficial when using Tailwind. I did this by using Tailwinds flex with items-center, which is equivalent to display: flex; and align-items: center; in vanilla css. Once suspended, malikidrees will not be able to comment or publish posts until their suspension is removed. Runs the app in the development mode. I dont care if I ever use what Ive built, its the knowledge and experience that Im after. As always, theres room for improvement with this sidenav. Once unsuspended, malikidrees will be able to comment and publish posts again. They can still re-publish the post if they are not suspended. No mobile menu for now! React tailwind css simple sidebar with search form. This isnt meant to be a React tutorial. The working demo can be viewed here. Luckily Tailwind makes it easy to change. You may also see any lint errors in the console. React tailwind css simple sidebar dashboard. I wanted more practice with flexbox, and I also wanted more practice with Tailwind. Nice work there it looks pretty smooth. The nav links are the cornerstone of the sidenav. The page itself will utilize css grid for the layout. Tailwind, by default, only allows me to use fractal units which take all available space. For a more detailed information about my stack, I have open sourced my React Boilerplate. I have made similar sidenavs in the past, but not with Tailwind. The build is minified and the filenames include the hashes. .css-y5tg4h{width:1.25rem;height:1.25rem;margin-right:0.5rem;opacity:0.75;fill:currentColor;}.css-r1dmb{width:1.25rem;height:1.25rem;margin-right:0.5rem;opacity:0.75;fill:currentColor;}9 min read.

Note: this is a one-way operation. The space-y-2 class I used adds vertical spacing between the links. The sidenav itself is made up of three sections.

I also had to remove the default link styles via Tailwinds no-underline, which is the same as text-decoration: none;.

I opted for settings here. 'max-w-[250px] animate duration-300 border-r border-gray-700 relative flex flex-col py-10 min-h-screen group', 'absolute hidden text-2xl text-white cursor-pointer -right-4 top-10 group-hover:block ', 'flex items-center justify-center w-full py-2 my-2 font-bold text-black bg-green-400 rounded-lg', 'mb-2 ml-4 text-sm font-bold text-gray-500', 'absolute text-2xl text-white cursor-pointer -right-4 top-10', https://www.youtube.com/watch?v=pKt2-Iws_-A.

After that, there is a menu with links to various parts of the application that will be rendered in the content section of the page.