Top menu nav color and shadow

[damsfx]

wn-tailwindui-plugin/skins/tailwindui/layouts/_menu-top.php

Lines 13 to 17 in cceeac9

	<?php if ($menuLocation === 'top'): ?>
	bg-gray-800
	<?php else: ?>
	bg-gray-800 md:bg-white md:shadow
	<?php endif; ?>

1 - Why switch to a white background?

I find the bar not contrasting enough in the overall interface.

I would prefer even a light color:

2 - For me, the shadow is not visible.

For it to be visible, a relative position and z-index must be added to the .layout-topmenu element.
Also I would have chosen a wider shadow (shadow-md).

Actual - invisible shadow:

With shadow visible :

With shadow-md visible :

I would be pleased to hear your thoughts on this.

[LukeTowers]

@damsfx I would agree with those assessments. As far as colour goes I actually want this plugin to have a light theme and a dark theme with the colour matching between the top bar and the side bar for each version, but for now fixing the shadow to show (the size of it seems fine to me without further changes for now).

[mjauvin]

I personally think the top bar serves no actual purpose when the menu is on the left. It breaks the otherwise great look of the backend layout.

[LukeTowers]

@mjauvin it doesn't serve much of a purpose yet but it will. The plan is to have a backend-wide search bar in the top left of it as well as a few more additions on the right to the quick actions menu like a quick create button and notification management

[bennothommo]

I'm having a play around with this skin for a client at the moment. I can see the rationale for that user bar based on what @LukeTowers wants to do with it going forward, but to offer a counterpoint, the reason that some people prefer side menus (including myself) is the maximise the amount of vertical space for the actual page or function being used, and to take advantage of the amount of width modern monitors have.

Unfortunately, the user bar negates that benefit because it takes up the same amount of space as it would having the main nav at the top, whilst also decreasing the amount of space horizontally too.

See the following:

Top nav

Side nav

Effectively, the usable viewport for the Backend itself is shrunk a little bit if someone uses the side nav option.

Ideally, it would be nice to have the user functions condensed into the side nav, but I can understand if that might be difficult.

[LukeTowers]

What I'd like to have is for the side menu layout to have the ability to collapse down to the icon only mode with the press of a button like a mobile menu and then re-show the full size version when hovering over it or clicking the button again.