From fa85b372cab45a52b9b935054a515605a6281a32 Mon Sep 17 00:00:00 2001
From: Sebastian Stein <git@codepassion.de>
Date: Tue, 25 Jun 2024 13:45:33 +0200
Subject: [PATCH] - fixed position of ChevronRightIcon

---
 src/Components/AppShell/SideBar.tsx | 133 ++++++++++++++--------------
 1 file changed, 65 insertions(+), 68 deletions(-)

diff --git a/src/Components/AppShell/SideBar.tsx b/src/Components/AppShell/SideBar.tsx
index 79f7881f..480a3c92 100644
--- a/src/Components/AppShell/SideBar.tsx
+++ b/src/Components/AppShell/SideBar.tsx
@@ -61,84 +61,81 @@ export function SideBar({ routes, bottomRoutes }: { routes: route[], bottomRoute
   let params = new URLSearchParams(window.location.search);
 
   return (
-    <nav
-      id="sidenav"
-      className={`group tw-fixed tw-left-0 ${embedded ? 'tw-mt-0' : 'tw-mt-16' } tw-top-0 tw-z-[10035] tw-h-[calc(100dvh-64px)] tw--translate-x-full tw-overflow-hidden tw-shadow-xl data-[te-sidenav-slim='true']:tw-hidden data-[te-sidenav-slim-collapsed='true']:tw-w-[56px] data-[te-sidenav-slim='true']:tw-w-[56px] data-[te-sidenav-hidden='false']:tw-translate-x-0 dark:tw-bg-zinc-800 [&[data-te-sidenav-slim-collapsed='true'][data-te-sidenav-slim='false']]:tw-hidden [&[data-te-sidenav-slim-collapsed='true'][data-te-sidenav-slim='true']]:[display:unset]`}
-      data-te-sidenav-init
-      data-te-sidenav-hidden="true"
-      data-te-sidenav-mode="side"
-      data-te-sidenav-slim="true"
-      data-te-sidenav-content="#app-content"
-      data-te-sidenav-slim-collapsed="true"
-      data-te-sidenav-slim-width="56"
-      data-te-sidenav-width="160">
-      <div className='tw-flex tw-flex-col tw-h-[calc(100dvh-64px)]'>
-        <ul className="tw-menu tw-w-full tw-bg-base-100 tw-text-base-content tw-p-0" data-te-sidenav-menu-ref>
-          {
-            routes.map((route, k) => {
-              return (
-                <li className="" key={k}>
-                  {
-                    route.submenu ?
-                      <SidebarSubmenu {...route} /> :
-                      (<NavLink 
-                        end
-                        target={route.blank ? "_blank" : "_self"}
-                        to={`${route.path}${params && '?'+params}`}
-                        className={({ isActive }) => `${isActive ? 'tw-font-semibold  tw-bg-base-200 !tw-rounded-none' : 'tw-font-normal !tw-rounded-none'}`} onClick={() => {
-                          if (screen.width < 640 && !slim) instance.toggle();
-                        }}>
-                        {route.icon}<span className="group-[&[data-te-sidenav-slim-collapsed='true']]:data-[te-sidenav-slim='false']:tw-hidden" data-te-sidenav-slim="false">{route.name}</span>
-                        {
-                          location.pathname.includes(route.path) && route.path.length > 1 || location.pathname === route.path ? (<span className="tw-absolute tw-inset-y-0 tw-left-0 tw-w-1 tw-rounded-tr-md tw-rounded-br-md tw-bg-primary "
-                            aria-hidden="true"></span>) : null
-                        }
-                      </NavLink>)
-                  }
-
-                </li>
-              )
-            })
-          }
-        </ul>
-
-        <div id="slim-toggler" className='tw-w-full tw-bg-base-100  tw-flex-1 tw-grid tw-place-items-end' aria-haspopup="true" >
-          <div className='tw-w-full'>
+      <nav
+          id="sidenav"
+          className={`group tw-fixed tw-left-0 tw-top-0 tw-z-[10035] tw-h-[var(--sidebar-height)] tw--translate-x-full tw-overflow-hidden tw-shadow-xl data-[te-sidenav-slim='true']:tw-hidden data-[te-sidenav-slim-collapsed='true']:tw-w-[56px] data-[te-sidenav-slim='true']:tw-w-[56px] data-[te-sidenav-hidden='false']:tw-translate-x-0 dark:tw-bg-zinc-800 [&[data-te-sidenav-slim-collapsed='true'][data-te-sidenav-slim='false']]:tw-hidden [&[data-te-sidenav-slim-collapsed='true'][data-te-sidenav-slim='true']]:[display:unset]`}
+          style={{
+            height: embedded ? '100vh' : 'calc(100vh - 64px)',
+            marginTop: embedded ? '0' : '64px'
+          }}
+          data-te-sidenav-init
+          data-te-sidenav-hidden="true"
+          data-te-sidenav-mode="side"
+          data-te-sidenav-slim="true"
+          data-te-sidenav-content="#app-content"
+          data-te-sidenav-slim-collapsed="true"
+          data-te-sidenav-slim-width="56"
+          data-te-sidenav-width="160">
+        <div className='tw-flex tw-flex-col tw-h-full'>
+          <div className='tw-flex-grow tw-overflow-y-auto'>
+            <ul className="tw-menu tw-w-full tw-bg-base-100 tw-text-base-content tw-p-0" data-te-sidenav-menu-ref>
+              {routes.map((route, k) => (
+                  <li className="" key={k}>
+                    {route.submenu ? (
+                        <SidebarSubmenu {...route} />
+                    ) : (
+                        <NavLink
+                            end
+                            target={route.blank ? "_blank" : "_self"}
+                            to={`${route.path}${params && '?'+params}`}
+                            className={({ isActive }) => `${isActive ? 'tw-font-semibold tw-bg-base-200 !tw-rounded-none' : 'tw-font-normal !tw-rounded-none'}`}
+                            onClick={() => {
+                              if (screen.width < 640 && !slim) instance.toggle();
+                            }}>
+                          {route.icon}
+                          <span className="group-[&[data-te-sidenav-slim-collapsed='true']]:data-[te-sidenav-slim='false']:tw-hidden" data-te-sidenav-slim="false">{route.name}</span>
+                          {(location.pathname.includes(route.path) && route.path.length > 1) || location.pathname === route.path ? (
+                              <span className="tw-absolute tw-inset-y-0 tw-left-0 tw-w-1 tw-rounded-tr-md tw-rounded-br-md tw-bg-primary" aria-hidden="true"></span>
+                          ) : null}
+                        </NavLink>
+                    )}
+                  </li>
+              ))}
+            </ul>
 
             <ul className="tw-menu tw-w-full tw-bg-base-100 tw-text-base-content tw-p-0 tw-mb-0" data-te-sidenav-menu-ref>
-              {
-                bottomRoutes?.map((route, k) => {
-                  return (
-                    <li className="" key={k}>
-                      {
-                        route.submenu ?
-                          <SidebarSubmenu {...route} /> :
-                          (<NavLink
+              {bottomRoutes?.map((route, k) => (
+                  <li className="" key={k}>
+                    {route.submenu ? (
+                        <SidebarSubmenu {...route} />
+                    ) : (
+                        <NavLink
                             end
                             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'}`} onClick={() => {
+                            className={({ isActive }) => `${isActive ? 'tw-font-semibold tw-bg-base-200 !tw-rounded-none' : 'tw-font-normal !tw-rounded-none'}`}
+                            onClick={() => {
                               if (screen.width < 640 && !slim) instance.toggle();
                             }}>
-                            {route.icon}<span className="group-[&[data-te-sidenav-slim-collapsed='true']]:data-[te-sidenav-slim='false']:tw-hidden" data-te-sidenav-slim="false">{route.name}</span>
-                            {
-                              location.pathname.includes(route.path) && route.path.length > 1 || location.pathname === route.path ? (<span className="tw-absolute tw-inset-y-0 tw-left-0 tw-w-1 tw-rounded-tr-md tw-rounded-br-md tw-bg-primary "
-                                aria-hidden="true"></span>) : null
-                            }
-                          </NavLink>)
-                      }
-
-                    </li>
-                  )
-                })
-              }
+                          {route.icon}
+                          <span className="group-[&[data-te-sidenav-slim-collapsed='true']]:data-[te-sidenav-slim='false']:tw-hidden" data-te-sidenav-slim="false">{route.name}</span>
+                          {(location.pathname.includes(route.path) && route.path.length > 1) || location.pathname === route.path ? (
+                              <span className="tw-absolute tw-inset-y-0 tw-left-0 tw-w-1 tw-rounded-tr-md tw-rounded-br-md tw-bg-primary" aria-hidden="true"></span>
+                          ) : null}
+                        </NavLink>
+                    )}
+                  </li>
+              ))}
             </ul>
+          </div>
 
-            <ChevronRightIcon className={"tw-w-5 tw-h-5 tw-mb-4 tw-mr-4  tw-cursor-pointer tw-float-right tw-delay-400 tw-duration-500 tw-transition-all " + (!slim ? "tw-rotate-180" : '')} onClick={() => toggleSlim()} />
-
+          <div className="tw-mt-auto tw-p-4 tw-bg-base-100">
+            <ChevronRightIcon
+                className={`tw-w-5 tw-h-5 tw-cursor-pointer tw-float-right tw-delay-400 tw-duration-500 tw-transition-all ${!slim ? "tw-rotate-180" : ''}`}
+                onClick={() => toggleSlim()}
+            />
           </div>
         </div>
-      </div>
-    </nav>
+      </nav>
   )
 }