From 12ce7862930694b29344a9989a14e1d8f1fca65a Mon Sep 17 00:00:00 2001
From: Anton Tranelis <mail@antontranelis.de>
Date: Tue, 16 Jul 2024 10:35:38 +0200
Subject: [PATCH] Revert "- fixed position of ChevronRightIcon"

This reverts commit fa85b372cab45a52b9b935054a515605a6281a32.
---
 src/Components/AppShell/SideBar.tsx | 135 ++++++++++++++--------------
 1 file changed, 69 insertions(+), 66 deletions(-)

diff --git a/src/Components/AppShell/SideBar.tsx b/src/Components/AppShell/SideBar.tsx
index 480a3c92..79f7881f 100644
--- a/src/Components/AppShell/SideBar.tsx
+++ b/src/Components/AppShell/SideBar.tsx
@@ -61,81 +61,84 @@ 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 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>
+    <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'>
 
             <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) => (
-                  <li className="" key={k}>
-                    {route.submenu ? (
-                        <SidebarSubmenu {...route} />
-                    ) : (
-                        <NavLink
+              {
+                bottomRoutes?.map((route, k) => {
+                  return (
+                    <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>
-              ))}
-            </ul>
-          </div>
+                            {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>
+
+            <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>
-      </nav>
+      </div>
+    </nav>
   )
 }