antontranelis/utopia-ui
1
0
Fork 0
mirror of https://github.com/utopia-os/utopia-ui.git synced 2025-12-13 07:46:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

Revert "- fixed position of ChevronRightIcon"

Browse Source 
This reverts commit fa85b372cab45a52b9b935054a515605a6281a32.
This commit is contained in:
Anton Tranelis 2024-07-16 10:35:38 +02:00
parent 95735e8a63
commit 12ce786293
1 changed files with 69 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

93
src/Components/AppShell/SideBar.tsx
View File

@ -63,11 +63,7 @@ export function SideBar({ routes, bottomRoutes }: { routes: route[], bottomRoute
return ( return (
<nav <nav
id="sidenav" 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]`} 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]`}
style={{
height: embedded ? '100vh' : 'calc(100vh - 64px)',
marginTop: embedded ? '0' : '64px'
}}
data-te-sidenav-init data-te-sidenav-init
data-te-sidenav-hidden="true" data-te-sidenav-hidden="true"
data-te-sidenav-mode="side" data-te-sidenav-mode="side"
@ -76,64 +72,71 @@ export function SideBar({ routes, bottomRoutes }: { routes: route[], bottomRoute
data-te-sidenav-slim-collapsed="true" data-te-sidenav-slim-collapsed="true"
data-te-sidenav-slim-width="56" data-te-sidenav-slim-width="56"
data-te-sidenav-width="160"> data-te-sidenav-width="160">
<div className='tw-flex tw-flex-col tw-h-full'> <div className='tw-flex tw-flex-col tw-h-[calc(100dvh-64px)]'>
<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> <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) => ( {
routes.map((route, k) => {
return (
<li className="" key={k}> <li className="" key={k}>
{route.submenu ? ( {
<SidebarSubmenu {...route} /> route.submenu ?
) : ( <SidebarSubmenu {...route} /> :
<NavLink (<NavLink
end end
target={route.blank ? "_blank" : "_self"} target={route.blank ? "_blank" : "_self"}
to={`${route.path}${params && '?'+params}`} to={`${route.path}${params && '?'+params}`}
className={({ isActive }) => `${isActive ? 'tw-font-semibold tw-bg-base-200 !tw-rounded-none' : 'tw-font-normal !tw-rounded-none'}`} className={({ isActive }) => `${isActive ? 'tw-font-semibold tw-bg-base-200 !tw-rounded-none' : 'tw-font-normal !tw-rounded-none'}`} onClick={() => {
onClick={() => {
if (screen.width < 640 && !slim) instance.toggle(); if (screen.width < 640 && !slim) instance.toggle();
}}> }}>
{route.icon} {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>
<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 ? ( 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 "
<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> aria-hidden="true"></span>) : null
) : null} }
</NavLink> </NavLink>)
)} }
</li> </li>
))} )
})
}
</ul> </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> <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) => ( {
bottomRoutes?.map((route, k) => {
return (
<li className="" key={k}> <li className="" key={k}>
{route.submenu ? ( {
<SidebarSubmenu {...route} /> route.submenu ?
) : ( <SidebarSubmenu {...route} /> :
<NavLink (<NavLink
end end
target={route.blank ? "_blank" : "_self"} target={route.blank ? "_blank" : "_self"}
to={route.path} to={route.path}
className={({ isActive }) => `${isActive ? 'tw-font-semibold tw-bg-base-200 !tw-rounded-none' : 'tw-font-normal !tw-rounded-none'}`} className={({ isActive }) => `${isActive ? 'tw-font-semibold tw-bg-base-200 !tw-rounded-none' : 'tw-font-normal !tw-rounded-none'}`} onClick={() => {
onClick={() => {
if (screen.width < 640 && !slim) instance.toggle(); if (screen.width < 640 && !slim) instance.toggle();
}}> }}>
{route.icon} {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>
<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 ? ( 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 "
<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> aria-hidden="true"></span>) : null
) : null} }
</NavLink> </NavLink>)
)} }
</li>
))}
</ul>
</div>
<div className="tw-mt-auto tw-p-4 tw-bg-base-100"> </li>
<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()} }
/> </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>
</div> </div>
</div> </div>
</nav> </nav>