Time to simplify and modernize your menus. Get rid of the floating group hacks and start utilizing a better way to display your navigation menus. AppDrawer is built to be as user-friendly as possible, without losing the additional customization functionality.
As of right now, since AppDrawer is still being worked on, expect more features to be released.
Placement: Adjust where you want your drawer to open (Left, Right, Top, Bottom).
Fully responsive: AppDrawer will work on any device, fit on any screen, and function normally like it should. No need to hassle with how the drawer works, just provide your content and you’re good to go!
Multiple instances: AppDrawer can have multiple instances on a page. As long as you provide the dynamic properties (such as unique identifiers you assign), your drawers will be seamless throughout your application.
Contained instances: You can contain your drawers into a specified container.
Lock: Disable the drawer from being closed dynamically or statically.
Overlay: Toggle the overlay on or off in which the user can click/press to close the drawer.
Overlay Click: Allow the user to click/press the over to close the drawer. As of right now, this only works on page load. It cannot be updated live.
States & Events: Turn your drawers into fully dynamic machines.
UPCOMING UPDATES:
These updates won’t apply until the plugin is released for public use. Improvements that you see below will happen after this plugin is released.
AppDrawer is expected to be released within the next 24-48 hours.
Scoot (GC-DRAWER ELEMENT):
Easily move your content with the drawer. Works with the width you set for your drawer.
Improvements to come (after next update):
Animation speed and type.
Min width for the scoot to apply.
Fully loaded event, after close, after open.
make it so VH/VW/% works better when a scrollbar is visible. Will likely add a “scrollbar width” bypass property to include the default scroll bar width, or whatever you have your app’s scrollbar set to. This is better for responsive purposes. Otherwise the other measurable units will likely cause issues with the width of the drawer with mobile devices.
Sheet (New ELEMENT: GC-SHEET):
Add a draggable content box on the bottom of your page. Include any content you want. Customize the way it works.
Responsive
Draggable
Can be styled (using CSS for now, but will add styling soon).
Manage workflows with states/triggers.
Improvements to come (after release):
More customization (like button appearing, colors, etc)
Pull tab that is always visible (toggleable)
default height of the “opened” sheet.
Additional events (dragging, pressed, etc)
General improvements to come (after release):
Add a property to disallow scrolling when opened.
The properties will be more user-friendly (some of the names/labels are not “professional” just yet as I haven’t put everything together just yet).
Animation style & speed settings for the drawer.
Updated documentation and description
Notion page for full functionality break-down.
Multiple demos to demonstrate the many ways you can utilize this, and even a comparison of workflows if you use the “standard floating group method”.
May add skeleton UI loaders, but not sure.
draggable toggle menu (slide menu open).
Overall, as you guys can see I am adding quite the functionality to this. I really want this to be a great plugin that saves time, is fast, and is fully efficient.
I still have a few more copies I’d like to give away if you guys are okay with providing me input on how it helps improve your application, or how I can make it better.
AppDrawer has been approved and added to the marketplace! The price may increase as more functionality and/or improvements have been made.
Recent Updates
Version 1.0.1
General:
Updated the demo site to include multiple examples of functionality.
Drawer Element:
Properties are now more simplified.
Added an action for the drawer to toggle (so you can use events directly with the element, rather than use the “universal toggle”). This is separate from the already included “Universal Toggle” which targets a drawer by its ID.
Drawer “Minimum Width” now works as intended.
Allow scrolling when opened (yes/no).
Removed label and header. It’s not needed as you can just build your own.
SHEET:
– Add error handling
– Add hover effect on the close button
– Add a state “Sheet Dragging” - when the user is currently dragging the sheet (yes/no).
– Add the locking functionality.
– Spawn a pull tab.
Scoot responsiveness (right now it shows signs of breakage).
Animation settings (don’t have time to add currently).
Create a comparison page for using the floating group method versus the AppDrawer method.
Possible rename of the plugin (as it’s more focused towards multiple variances of navigation utilities at this point).
Possible element to be introduced: DragDrawer As it stands, I may be able to incorporate the same functionality in the existing drawer, and just setup a boolean value to accept whether or not the drawer should be a “drag drawer” but we’ll see.
BETA FUNCTIONALITY IS MARKED WITH ASTERISKS IN ELEMENT PROPERTIES.
I have an issue with the initial height for sheet doesn’t reflect the value, it’s either half or full.
I also have a suggestion: can you make the entire top part controls the sheet instead of only the handle, or better still when dragging the whole sheet down closes it like native ios ?
Yes of course. I’ll look into this. I may be depreciating the sheet element and turn it into its own plugin as the coding is becoming a bit more sophisticated for just one plugin. If that is the case, I’ll send out a free copy to those that have subscribed or purchased the plugin.
Expect an update in this regards as I am working on a total revamp on my business and other plugin updates.
Hey @JustinC - appreciate the business! Apologies about the plugin giving you issues. I hope that I can hopefully get you on your way.
Can you please show me your exact setup? You need to make sure you’re creating a content area of your own, assign it an element ID, feed that ID to the drawer element, and it should work.
In order to “know” what drawer to open, you use the elements “states” id.
As for the demo, apologies about how it’s not fully functional – I’m in the process of creating all new demo pages for all my plugins.
Tried putting everything directly onto the page. Not sure why I get the error. I think a Loom video linked to your demo is in order to show people how to set this up. Here’s my setup;
Our time zones might be completely different. If you have a chance join my Discord for real-time conversation.
I will make a video showing how to set it up right!
EDIT: Also notice your project is not responsive. You’ll need to make sure your pages are using the responsive mode (non-fixed) in order for this plugin to work correctly. As you notice in the video I have for you below, I setup the containers and put them inside an invisible container which loads on every page. There is no visible “sidebar” on the editor. It’s just there. You have to add your content separately and then use the element itself to call your content.
Dynamic content updates when modifying/updating content-id
New Properties
Backdrop: Fixes background color issues
Box Shadow: Add custom CSS box-shadow to the panel
Shortcut: Set a keyboard shortcut to activate the drawer
‘ESC’ to Close: Enable/disable closing with the ESC key
Use Storage: Remember drawer state on page reload
Redraw Elements: Reload content like maps or iFrames
Redraw Time: Set interval for content redraw
Show Disabled Cursor on Overlay
Custom Animations
Custom States
Data Control
Debug Mode: For development purposes
Fullscreen Mode
Shortcut Enabled
Changed Properties
Size: Reverted to dynamic width/height with custom unit support
Placement: Now uses fixed set of options (use conditionals for dynamic placement)
New States
Current Content ID
Data Received (Thing)
Data Received (Things)
Drawer Initialized
Drawer Requested Close
New/Improved Triggers
Drawer Has Opened
Drawer Has Closed
User Requested Drawer Closure
Data Received
New Events
User Requested Close: Works with the “Lock” function
Drawer Initialized: Indicates when the drawer is ready for use
Drawer is Focused: When the drawer is currently focused.
Fixes
ESC key behavior
Lock functionality
Event firing (now only once)
Scroll lock when drawer is closed
Contained drawer now scoots
Notes
Custom animations are currently in BETA. They use JS syntax with Arrays and Objects: "[...],{...}". This feature is intended for advanced users who can set up and tweak animations to their needs.
This comprehensive update to the App Drawer component took approximately two weeks to complete. The extensive changes and new features required careful development, testing, and refinement to ensure a robust and versatile drawer solution for various use cases. Thanks to @GH5T for the time spent on such amazing updates.
Updated demo and video walk-through to come very soon.
As it stands, I may be able to incorporate the same functionality in the existing drawer, and just setup a boolean value to accept whether or not the drawer should be a “drag drawer” but we’ll see.
Probe Element
Global Actions
Drawer-Specific Actions