-
-
Save waflessnet/a7fa7b2528443bddf6939afd63cab441 to your computer and use it in GitHub Desktop.
angular flowbite menu sidebar toggle active (hidden default mobile)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This is an example of how I solved it. | |
steps: | |
- Add new screen in tailwind.config.js. ex mb~(mobile) | |
https://flowbite.com/docs/customize/theming/#breakpoints | |
``` | |
theme: { | |
screens: { | |
'mb': '340px', // <- new screen from small smartphone | |
'sm': '640px', | |
'md': '768px', | |
'lg': '1024px', | |
'xl': '1280px', | |
'2xl': '1536px', | |
} | |
}, | |
``` | |
- Use component sidebar (https://flowbite.com/docs/components/sidebar/) | |
in aside section , check exist id "logo-sidebar", in class end add: | |
mb:hidden sm:block | |
``` | |
<aside id="logo-sidebar" class="fixed top-0 left-0 z-40 w-64 h-screen pt-20 transition-transform -translate-x-full bg-white border-r border-gray-200 sm:translate-x-0 dark:bg-gray-800 dark:border-gray-700 mb:hidden sm:block" aria-label="Sidebar"> | |
``` | |
- Add click event "openMobile()" in button "Open Sidebar" | |
``` | |
<button (click)="openMobile()" data-drawer-target="logo-sidebar" data-drawer-toggle="logo-sidebar" aria-controls="logo-sidebar" type="button" class="inline-flex items-center p-2 text-sm text-gray-500 rounded-lg sm:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"> | |
``` | |
- Add in component (example: Dashboard compoment ) function openMobile(); | |
``` | |
import {Component, ElementRef, OnInit} from '@angular/core'; | |
import {initFlowbite} from "flowbite"; | |
@Component({ | |
selector: 'app-dashboard', | |
templateUrl: './dashboard.component.html', | |
styleUrls: ['./dashboard.component.scss'] | |
}) | |
export class DashboardComponent implements OnInit { | |
menuMobileStatus = false; | |
constructor(private el: ElementRef) { } | |
ngOnInit(): void { | |
initFlowbite(); | |
} | |
openMobile() { | |
if(!this.menuMobileStatus){ | |
this.el.nativeElement.querySelector('#logo-sidebar').classList.remove('mb:hidden'); | |
this.menuMobileStatus = true; | |
return | |
} | |
this.el.nativeElement.querySelector('#logo-sidebar').classList.add('mb:hidden'); | |
this.menuMobileStatus = false; | |
} | |
} | |
``` | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment