ARTICLE AD BOX
I have this in my css:
.navbar-collapse { ... display: flex; ... } .drawer { position: absolute; top: 100%; left: 0; width: 100%; background-color: red; &.collapse { display: none; } &.collapsing { display: inherit; // These variables will be set via the Directive. animation-duration: var(--collapse-duration, 350ms); animation-timing-function: var(--collapse-transition, ease); animation-fill-mode: forwards; } &.show { display: inherit; } &.is-opening { animation-name: slideDown; } &.is-closing { animation-name: slideUp; } }I'm thinking since the .drawer class is just a layout modifier, to reset the display state is to just inherit back again from the parent (which in this case is the navbar-collapse).
After some digging, GPT and Gemini says it is a code smell (well I doubt that since you know. AI) but this got me thinking if it's actually true because the code above makes the drawer tied to it's parent but I think it's still the right decision here since it's just a layout modifier and display has to brought back from whatever the parent display is.
Also I have this class that has margin-top: auto; which of course relies on the parent's display to work, for that reason I can't really change the display in the drawer class.
PS: The parent actually is a .navbar and .navbar-collapse is just a modifier when the navbar will collapse. but the idea is the same. to inherit whatever the state of the .navbar-collapse.
