Comments (6)
Yes will implement that with tailwind only.
also, as of now we will be opening the hidden part of sidebar only on hovering on it?
from shelf.nu.
Yes please check the comment/video from @jurrejansen above. He explained how it should behave.
from shelf.nu.
Hi @DonKoko
I was thinking about taking a similar approach as Mailchimp
Screen.Recording.2023-04-03.at.11.59.10.mov
How does the user open the folded sidebar?
By hovering over the sidebar -> sidebar expands absolute -> with top right icon the user would be able to keep the sidebar in an open state (when clicked sidebar pushes the main content to the right)
How does the user log-out when sidebar is folded?
When hovered, the sidebar would always be in an open state
As you can see in the screen recording Mailchimp is not using an animation. I would be happy to prototype one or we can skip (for MVP).
The behaviour described above is a bit different than what I had in mind when doing the designs. Let me know if you're down with this or not. Then I'll update / expand the design where needed.
from shelf.nu.
Okey i see. I personally find this very annoying functionality with this thing popping in and out the whole time, It just feels not so smooth, but I am open for giving it a test. Thanks for clarifying.
from shelf.nu.
What are your views on this example of foldable sidebar @DonKoko ?
Demo: https://www.cssscript.com/demo/smooth-collapsible-sidebar-navigation/
Code: https://www.cssscript.com/smooth-collapsible-sidebar-navigation/
should we follow the same approach?
from shelf.nu.
@hunar1312 yes, i like that its just a bunch of css. We do have already existing tooling to implement this tho using tailwind. So tailwind has all the classes to manage the folding and twMerge can help you dynamically merge classes.
Here is an example how you can dynamically merge tailwind classes based on a condition: https://github.com/Shelf-nu/shelf.nu/blob/dev/app/components/shared/button.tsx#L46-L48
from shelf.nu.
Related Issues (20)
- [Feature request]: Who performed last scan HOT 7
- [Feature request]: Improve Activity (Changes) automatic logging HOT 1
- [Feature request]: See all team members or link to them from admin dashboard
- Allow super admin to import assets for any workspace
- [Bug]: Camera continues scanning during redirect is happening HOT 1
- fix: don't prompt user to choose plan, when registering via a team workspace invite
- feature: build version validation
- Destroy all sessions on pwd reset HOT 6
- improvement: add kit column to booking PDF export HOT 7
- feat: add isEnterprise flag to CustomTierLimit
- [Feature request]: Implement "Self Service Plus" User Type with Enhanced Booking Capabilities HOT 4
- [Feature request]: Streamline Process for Linking Existing Assets to New QR Tags HOT 5
- [Bug]: Reported null
- chore: refactor ControlledActionButton to works immilar as to the bulk actions buttons
- [Improvement request]: Improve front-end of Asset page HOT 5
- [Feature request]: Improve UX of empty fields on asset pages HOT 1
- fix: bulk actions should be completely disabled for self service users HOT 1
- [BUG]: issues rendering long workspaces name on live
- [Bug]: I've set up a custom field of type Date, and when viewing an asset with this field set, it always shows one day earlier than I entered.
- [Bug]: Old Build Detected (Windows installable app)
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from shelf.nu.