optimized layer control elements

lib/src/Components/AppShell/SideBar.tsx

@@ -10,6 +10,7 @@ export interface Route {
   name: string
   submenu?: Route[]
   blank?: boolean
+  color?: string
 }
 
 /**
@@ -35,7 +36,7 @@ export function SideBar({ routes, bottomRoutes }: { routes: Route[]; bottomRoute
     <nav
       id='sidenav'
       className={`${appState.sideBarOpen ? 'tw:translate-x-0' : 'tw:-translate-x-full'}
-          ${appState.sideBarSlim ? 'tw:w-14' : 'tw:w-48'}
+          ${appState.sideBarSlim ? 'tw:w-15' : 'tw:w-48'}
           ${appState.embedded ? 'tw:mt-5.5 tw:h-[calc(100dvh-22px)]' : 'tw:mt-16 tw:h-[calc(100dvh-64px)]'}
           tw:fixed tw:left-0 tw:transition-all tw:duration-300 tw:top-0 tw:z-10035 
           tw:overflow-hidden tw:shadow-xl tw:dark:bg-zinc-800`}
@@ -62,7 +63,12 @@ export function SideBar({ routes, bottomRoutes }: { routes: Route[]; bottomRoute
                       if (screen.width < 640 && !appState.sideBarSlim) toggleSidebarOpen()
                     }}
                   >
-                    {route.icon}
+                    <div
+                      className='tw:p-1.5 tw:rounded-selector tw:text-white'
+                      style={{ backgroundColor: route.color ?? '#777' }}
+                    >
+                      {route.icon}
+                    </div>
                     <span
                       className={`${appState.sideBarSlim ? 'tw:hidden' : ''}`}
                       data-te-sidenav-slim='false'
@@ -104,7 +110,7 @@ export function SideBar({ routes, bottomRoutes }: { routes: Route[]; bottomRoute
                         target={route.blank ? '_blank' : '_self'}
                         to={route.path}
                         className={({ isActive }) =>
-                          `${isActive ? 'tw:font-semibold  tw:bg-base-200 tw:rounded-none!' : 'tw:font-normal tw:rounded-none!'}`
+                          `tw:px-4 ${isActive ? 'tw:font-semibold  tw:bg-base-200 tw:rounded-none!' : 'tw:font-normal tw:rounded-none!'}`
                         }
                         onClick={() => {
                           if (screen.width < 640 && !appState.sideBarSlim) toggleSidebarOpen()

lib/src/Components/Map/Subcomponents/AddButton.tsx

@@ -40,26 +40,31 @@ export default function AddButton({
           >
             <SVG src={PlusSVG} className='tw:h-5 tw:w-5' />
           </label>
-          <ul tabIndex={0} className='tw:dropdown-content tw:pr-1 tw:list-none'>
+          <ul
+            tabIndex={0}
+            className='tw:dropdown-content tw:list-none tw:rounded tw:bg-base-100 tw:w-62 tw:p-0 tw:overflow-hidden'
+          >
             {layers.map(
               (layer) =>
                 layer.api?.createItem &&
                 hasUserPermission(layer.api.collectionName!, 'create', undefined, layer) &&
                 layer.listed && (
                   <li key={layer.name}>
-                    <a>
-                      <div className='tw:tooltip tw:tooltip-left' data-tip={layer.menuText}>
+                    <a
+                      className='tw:cursor-pointer'
+                      onClick={() => {
+                        triggerAction(layer)
+                      }}
+                      onTouchEnd={(e) => {
+                        triggerAction(layer)
+                        e.preventDefault()
+                      }}
+                    >
+                      <div className='tw:flex tw:flex-row tw:hover:bg-base-200 tw:p-2'>
                         <button
                           tabIndex={0}
-                          className='tw:z-500 tw:border-0 tw:p-0 tw:mb-3 tw:w-10 tw:h-10 tw:cursor-pointer tw:rounded-full tw:mouse tw:drop-shadow-md tw:transition tw:ease-in tw:duration-200 tw:focus:outline-hidden tw:flex tw:items-center tw:justify-center'
+                          className='tw:z-500 tw:border-0 tw:p-0 tw:w-9 tw:h-9 tw:cursor-pointer tw:rounded-selector tw:mouse tw:drop-shadow-md tw:transition tw:ease-in tw:duration-200 tw:focus:outline-hidden tw:flex tw:items-center tw:justify-center'
                           style={{ backgroundColor: layer.menuColor || '#777' }}
-                          onClick={() => {
-                            triggerAction(layer)
-                          }}
-                          onTouchEnd={(e) => {
-                            triggerAction(layer)
-                            e.preventDefault()
-                          }}
                         >
                           <img
                             src={appState.assetsApi.url + layer.markerIcon.image}
@@ -69,6 +74,9 @@ export default function AddButton({
                             }}
                           />
                         </button>
+                        <div className='tw:ml-2 tw:flex tw:flex-col'>
+                          <p className='tw:font-bold tw:text-current tw:pt-2.5'>{layer.menuText}</p>
+                        </div>
                       </div>
                     </a>
                   </li>

lib/src/Components/Map/Subcomponents/Controls/LayerControl.tsx

@@ -38,8 +38,9 @@ export function LayerControl({ expandLayerControl = false }: { expandLayerContro
                         id={layer.name}
                         onChange={() => toggleVisibleLayer(layer)}
                         type='checkbox'
-                        className='tw:checkbox tw:checkbox-xs tw:checkbox-success'
+                        className='tw:checkbox tw:checkbox-xs tw:checkbox-success tw:text-white'
                         checked={isLayerVisible(layer)}
+                        style={{ backgroundColor: layer.menuColor, borderColor: layer.menuColor }}
                       />
                       <span className='tw:text-sm tw:label-text tw:mx-2 tw:cursor-pointer'>
                         {layer.name}