adalal/solidtime
1
0
Fork 0
mirror of https://github.com/solidtime-io/solidtime.git synced 2026-08-19 13:42:14 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix sidebar navigation overflowing, add scrollbar only to nav items

Browse Source
This commit is contained in:
Gregor Vostrak
2024-09-09 13:34:26 +02:00
committed by Constantin Graf
parent b990387775
commit f0705e1e4a
1 changed files with 113 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
resources/js/Layouts/AppLayout.vue
View File

@@ -79,8 +79,8 @@ const page = usePage<{
'!flex bg-default-background w-full z-[9999999999]':
showSidebarMenu,
}"
class="flex-shrink-0 h-screen hidden fixed w-[230px] 2xl:w-[250px] px-2.5 2xl:px-4 py-4 lg:flex flex-col justify-between">
<div>
class="flex-shrink-0 h-screen hidden fixed w-[230px] 2xl:w-[250px] px-2.5 2xl:px-3 py-4 lg:flex flex-col justify-between">
<div class="flex flex-col h-full">
<div
class="border-b border-default-background-separator pb-2 flex justify-between">
<OrganizationSwitcher class="w-full"></OrganizationSwitcher>
@@ -91,12 +91,13 @@ const page = usePage<{
<div class="border-b border-default-background-separator">
<CurrentSidebarTimer></CurrentSidebarTimer>
</div>
<nav
class="pt-2 overflow-y-scroll"
<div
class="overflow-y-scroll flex-1 w-[calc(100%+10px)]"
style="
scrollbar-width: thin;
scrollbar-color: var(--color-bg-primary) transparent;
">
<nav class="pt-2">
<ul>
<NavigationSidebarItem
title="Dashboard"
@@ -114,7 +115,9 @@ const page = usePage<{
title="Reporting"
:icon="ChartBarIcon"
:current="route().current('reporting')"
:href="route('reporting')"></NavigationSidebarItem>
:href="
route('reporting')
"></NavigationSidebarItem>
</ul>
</nav>
@@ -138,13 +141,17 @@ const page = usePage<{
title="Clients"
:icon="UserCircleIcon"
:current="route().current('clients')"
:href="route('clients')"></NavigationSidebarItem>
:href="
route('clients')
"></NavigationSidebarItem>
<NavigationSidebarItem
title="Members"
v-if="canViewMembers()"
:icon="UserGroupIcon"
:current="route().current('members')"
:href="route('members')"></NavigationSidebarItem>
:href="
route('members')
"></NavigationSidebarItem>
<NavigationSidebarItem
v-if="canViewTags()"
title="Tags"
@@ -162,7 +169,9 @@ const page = usePage<{
<nav>
<ul>
<NavigationSidebarItem
v-if="canManageBilling() && isBillingActivated()"
v-if="
canManageBilling() && isBillingActivated()
"
title="Billing"
:icon="CreditCardIcon"
href="/billing"></NavigationSidebarItem>
@@ -191,8 +200,7 @@ const page = usePage<{
</ul>
</nav>
</div>
<div>
<div class="justify-self-end">
<UpdateSidebarNotification></UpdateSidebarNotification>
<ul
class="border-t border-default-background-separator pt-3 flex justify-between pr-4 items-center">
@@ -200,12 +208,15 @@ const page = usePage<{
class="flex-1"
title="Profile Settings"
:icon="Cog6ToothIcon"
:href="route('profile.show')"></NavigationSidebarItem>
:href="
route('profile.show')
"></NavigationSidebarItem>
<UserSettingsIcon></UserSettingsIcon>
</ul>
</div>
</div>
</div>
<div class="flex-1 lg:ml-[230px] 2xl:ml-[250px] min-w-0">
<div
class="lg:hidden w-full px-3 py-1 border-b border-b-default-background-separator text-muted flex justify-between items-center">