From 20790168f60b0a61501731d0b439d268209515d6 Mon Sep 17 00:00:00 2001
From: Anton <mail@antontranelis.de>
Date: Wed, 4 Oct 2023 17:51:07 +0200
Subject: [PATCH] added buttom links to sidebar

---
 src/Components/AppShell/SideBar.tsx | 205 +++++++++-------------------
 1 file changed, 63 insertions(+), 142 deletions(-)

diff --git a/src/Components/AppShell/SideBar.tsx b/src/Components/AppShell/SideBar.tsx
index e79bf894..fe1f3662 100644
--- a/src/Components/AppShell/SideBar.tsx
+++ b/src/Components/AppShell/SideBar.tsx
@@ -17,7 +17,7 @@ type route = {
 }
 
 
-export function SideBar({routes} : {routes : route[]}) {
+export function SideBar({ routes, bottomRoutes }: { routes: route[], bottomRoutes?: route[] }) {
 
   // prevent react18 from calling useEffect twice
   const init = useRef(false)
@@ -58,151 +58,72 @@ export function SideBar({routes} : {routes : route[]}) {
       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' style={{height: "calc(100vh - 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
-                      to={route.path}
-                      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>
+      data-te-sidenav-slim-width="56"
+      data-te-sidenav-width="160">
+      <div className='tw-flex tw-flex-col tw-h-full' style={{ height: "calc(100vh - 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
+                        to={route.path}
+                        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-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) => {
+                  return (
+                    <li className="" key={k}>
                       {
-                        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
+                        route.submenu ?
+                          <SidebarSubmenu {...route} /> :
+                          (<NavLink
+                            end
+                            to={route.path}
+                            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>)
                       }
-                    </NavLink>)
-                }
 
-              </li>
-            )
-          })
-        }
+                    </li>
+                  )
+                })
+              }
+            </ul>
 
-        {/* 
-        <li className="relative">
-          <a
-            className="flex h-12 cursor-pointer items-center truncate rounded-[5px] px-6 py-4 text-[0.875rem] text-gray-600 outline-none transition duration-300 ease-linear hover:bg-slate-50 hover:text-inherit hover:outline-none focus:bg-slate-50 focus:text-inherit focus:outline-none active:bg-slate-50 active:text-inherit active:outline-none data-[te-sidenav-state-active]:text-inherit data-[te-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-gray-300 dark:hover:bg-white/10 dark:focus:bg-white/10 dark:active:bg-white/10"
-            data-te-sidenav-link-ref>
-            <span
-              className="mr-4 [&>svg]:h-4 [&>svg]:w-4 [&>svg]:text-gray-400 dark:[&>svg]:text-gray-300">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
-                fill="currentColor"
-                className="h-4 w-4">
-                <path
-                  fillRule="evenodd"
-                  d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zm-2.625 6c-.54 0-.828.419-.936.634a1.96 1.96 0 00-.189.866c0 .298.059.605.189.866.108.215.395.634.936.634.54 0 .828-.419.936-.634.13-.26.189-.568.189-.866 0-.298-.059-.605-.189-.866-.108-.215-.395-.634-.936-.634zm4.314.634c.108-.215.395-.634.936-.634.54 0 .828.419.936.634.13.26.189.568.189.866 0 .298-.059.605-.189.866-.108.215-.395.634-.936.634-.54 0-.828-.419-.936-.634a1.96 1.96 0 01-.189-.866c0-.298.059-.605.189-.866zm2.023 6.828a.75.75 0 10-1.06-1.06 3.75 3.75 0 01-5.304 0 .75.75 0 00-1.06 1.06 5.25 5.25 0 007.424 0z"
-                  clipRule="evenodd" />
-              </svg>
-            </span>
-            <span
-              className="group-[&[data-te-sidenav-slim-collapsed='true']]:data-[te-sidenav-slim='false']:hidden"
-              data-te-sidenav-slim="false"
-            >Category 1</span>
-            <span
-              className="absolute right-0 ml-auto mr-[0.5rem] transition-transform duration-300 ease-linear motion-reduce:transition-none [&>svg]:text-gray-600 dark:[&>svg]:text-gray-300"
-              data-te-sidenav-rotate-icon-ref>
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 20 20"
-                fill="currentColor"
-                className="h-5 w-5">
-                <path
-                  fillRule="evenodd"
-                  d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
-                  clipRule="evenodd" />
-              </svg>
-            </span>
-          </a>
-          <ul
-            className="!visible relative m-0 hidden list-none p-0 data-[te-collapse-show]:block "
-            data-te-sidenav-collapse-ref>
-            <li className="relative">
-              <a
-                className="flex h-6 cursor-pointer items-center truncate rounded-[5px] py-4 pl-[3.4rem] pr-6 text-[0.78rem] text-gray-600 outline-none transition duration-300 ease-linear hover:bg-slate-50 hover:text-inherit hover:outline-none focus:bg-slate-50 focus:text-inherit focus:outline-none active:bg-slate-50 active:text-inherit active:outline-none data-[te-sidenav-state-active]:text-inherit data-[te-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-gray-300 dark:hover:bg-white/10 dark:focus:bg-white/10 dark:active:bg-white/10"
-                data-te-sidenav-link-ref
-              >Link 2</a>
-            </li>
-            <li className="relative">
-              <a
-                className="flex h-6 cursor-pointer items-center truncate rounded-[5px] py-4 pl-[3.4rem] pr-6 text-[0.78rem] text-gray-600 outline-none transition duration-300 ease-linear hover:bg-slate-50 hover:text-inherit hover:outline-none focus:bg-slate-50 focus:text-inherit focus:outline-none active:bg-slate-50 active:text-inherit active:outline-none data-[te-sidenav-state-active]:text-inherit data-[te-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-gray-300 dark:hover:bg-white/10 dark:focus:bg-white/10 dark:active:bg-white/10"
-                data-te-sidenav-link-ref
-              >Link 3</a>
-            </li>
-          </ul>
-        </li>
-        <li className="relative">
-          <a
-            className="flex h-12 cursor-pointer items-center truncate rounded-[5px] px-6 py-4 text-[0.875rem] text-gray-600 outline-none transition duration-300 ease-linear hover:bg-slate-50 hover:text-inherit hover:outline-none focus:bg-slate-50 focus:text-inherit focus:outline-none active:bg-slate-50 active:text-inherit active:outline-none data-[te-sidenav-state-active]:text-inherit data-[te-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-gray-300 dark:hover:bg-white/10 dark:focus:bg-white/10 dark:active:bg-white/10"
-            data-te-sidenav-link-ref>
-            <span
-              className="mr-4 [&>svg]:h-4 [&>svg]:w-4 [&>svg]:text-gray-400 dark:[&>svg]:text-gray-300">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
-                fill="currentColor"
-                className="h-4 w-4">
-                <path
-                  fillRule="evenodd"
-                  d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zm-2.625 6c-.54 0-.828.419-.936.634a1.96 1.96 0 00-.189.866c0 .298.059.605.189.866.108.215.395.634.936.634.54 0 .828-.419.936-.634.13-.26.189-.568.189-.866 0-.298-.059-.605-.189-.866-.108-.215-.395-.634-.936-.634zm4.314.634c.108-.215.395-.634.936-.634.54 0 .828.419.936.634.13.26.189.568.189.866 0 .298-.059.605-.189.866-.108.215-.395.634-.936.634-.54 0-.828-.419-.936-.634a1.96 1.96 0 01-.189-.866c0-.298.059-.605.189-.866zm2.023 6.828a.75.75 0 10-1.06-1.06 3.75 3.75 0 01-5.304 0 .75.75 0 00-1.06 1.06 5.25 5.25 0 007.424 0z"
-                  clipRule="evenodd" />
-              </svg>
-            </span>
-            <span
-              className="group-[&[data-te-sidenav-slim-collapsed='true']]:data-[te-sidenav-slim='false']:hidden"
-              data-te-sidenav-slim="false"
-            >Category 2</span
-            >
-            <span
-              className="absolute right-0 ml-auto mr-[0.5rem] transition-transform duration-300 ease-linear motion-reduce:transition-none [&>svg]:text-gray-600 dark:[&>svg]:text-gray-300"
-              data-te-sidenav-rotate-icon-ref>
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 20 20"
-                fill="currentColor"
-                className="h-5 w-5">
-                <path
-                  fillRule="evenodd"
-                  d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
-                  clipRule="evenodd" />
-              </svg>
-            </span>
-          </a>
-          <ul
-            className="show !visible relative m-0 hidden list-none p-0 data-[te-collapse-show]:block "
-            data-te-sidenav-collapse-ref>
-            <li className="relative">
-              <a
-                className="flex h-6 cursor-pointer items-center truncate rounded-[5px] py-4 pl-[3.4rem] pr-6 text-[0.78rem] text-gray-600 outline-none transition duration-300 ease-linear hover:bg-slate-50 hover:text-inherit hover:outline-none focus:bg-slate-50 focus:text-inherit focus:outline-none active:bg-slate-50 active:text-inherit active:outline-none data-[te-sidenav-state-active]:text-inherit data-[te-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-gray-300 dark:hover:bg-white/10 dark:focus:bg-white/10 dark:active:bg-white/10"
-                data-te-sidenav-link-ref
-              >Link 4</a
-              >
-            </li>
-            <li className="relative">
-              <a
-                className="flex h-6 cursor-pointer items-center truncate rounded-[5px] py-4 pl-[3.4rem] pr-6 text-[0.78rem] text-gray-600 outline-none transition duration-300 ease-linear hover:bg-slate-50 hover:text-inherit hover:outline-none focus:bg-slate-50 focus:text-inherit focus:outline-none active:bg-slate-50 active:text-inherit active:outline-none data-[te-sidenav-state-active]:text-inherit data-[te-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-gray-300 dark:hover:bg-white/10 dark:focus:bg-white/10 dark:active:bg-white/10"
-                data-te-sidenav-link-ref
-              >Link 5</a
-              >
-            </li>
-          </ul>
-        </li>
-              */}
-      </ul>
-      <div id="slim-toggler" className='tw-w-full tw-pr-4  tw-flex-1 tw-grid tw-place-items-end' aria-haspopup="true" >
-        
-        <ChevronRightIcon className={"tw-w-5 tw-h-5 tw-mb-4  tw-cursor-pointer tw-float-right tw-delay-400 tw-duration-500 tw-transition-all " + (!slim ? "tw-rotate-180" : '')} onClick={   () =>   toggleSlim()}/>
-      </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>
+        </div>
       </div>
     </nav>
   )