adalal/solidtime
1
0
Fork 0
mirror of https://github.com/solidtime-io/solidtime.git synced 2026-08-17 12:42:15 +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

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

@@ -79,8 +79,8 @@ const page = usePage<{
'!flex bg-default-background w-full z-[9999999999]': '!flex bg-default-background w-full z-[9999999999]':
showSidebarMenu, 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"> 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> <div class="flex flex-col h-full">
<div <div
class="border-b border-default-background-separator pb-2 flex justify-between"> class="border-b border-default-background-separator pb-2 flex justify-between">
<OrganizationSwitcher class="w-full"></OrganizationSwitcher> <OrganizationSwitcher class="w-full"></OrganizationSwitcher>
@@ -91,119 +91,130 @@ const page = usePage<{
<div class="border-b border-default-background-separator"> <div class="border-b border-default-background-separator">
<CurrentSidebarTimer></CurrentSidebarTimer> <CurrentSidebarTimer></CurrentSidebarTimer>
</div> </div>
<nav <div
class="pt-2 overflow-y-scroll" class="overflow-y-scroll flex-1 w-[calc(100%+10px)]"
style=" style="
scrollbar-width: thin; scrollbar-width: thin;
scrollbar-color: var(--color-bg-primary) transparent; scrollbar-color: var(--color-bg-primary) transparent;
"> ">
<ul> <nav class="pt-2">
<NavigationSidebarItem <ul>
title="Dashboard" <NavigationSidebarItem
:icon="HomeIcon" title="Dashboard"
:href="route('dashboard')" :icon="HomeIcon"
:current=" :href="route('dashboard')"
route().current('dashboard') :current="
"></NavigationSidebarItem> route().current('dashboard')
<NavigationSidebarItem "></NavigationSidebarItem>
title="Time" <NavigationSidebarItem
:icon="ClockIcon" title="Time"
:current="route().current('time')" :icon="ClockIcon"
:href="route('time')"></NavigationSidebarItem> :current="route().current('time')"
<NavigationSidebarItem :href="route('time')"></NavigationSidebarItem>
title="Reporting" <NavigationSidebarItem
:icon="ChartBarIcon" title="Reporting"
:current="route().current('reporting')" :icon="ChartBarIcon"
:href="route('reporting')"></NavigationSidebarItem> :current="route().current('reporting')"
</ul> :href="
</nav> route('reporting')
"></NavigationSidebarItem>
</ul>
</nav>
<div <div
class="text-text-tertiary text-sm font-semibold pt-5 pb-1.5"> class="text-text-tertiary text-sm font-semibold pt-5 pb-1.5">
Manage Manage
</div> </div>
<nav> <nav>
<ul> <ul>
<NavigationSidebarItem <NavigationSidebarItem
v-if="canViewProjects()" v-if="canViewProjects()"
title="Projects" title="Projects"
:icon="FolderIcon" :icon="FolderIcon"
:href="route('projects')" :href="route('projects')"
:current=" :current="
route().current('projects') route().current('projects')
"></NavigationSidebarItem> "></NavigationSidebarItem>
<NavigationSidebarItem <NavigationSidebarItem
v-if="canViewClients()" v-if="canViewClients()"
title="Clients" title="Clients"
:icon="UserCircleIcon" :icon="UserCircleIcon"
:current="route().current('clients')" :current="route().current('clients')"
:href="route('clients')"></NavigationSidebarItem> :href="
<NavigationSidebarItem route('clients')
title="Members" "></NavigationSidebarItem>
v-if="canViewMembers()" <NavigationSidebarItem
:icon="UserGroupIcon" title="Members"
:current="route().current('members')" v-if="canViewMembers()"
:href="route('members')"></NavigationSidebarItem> :icon="UserGroupIcon"
<NavigationSidebarItem :current="route().current('members')"
v-if="canViewTags()" :href="
title="Tags" route('members')
:icon="TagIcon" "></NavigationSidebarItem>
:current="route().current('tags')" <NavigationSidebarItem
:href="route('tags')"></NavigationSidebarItem> v-if="canViewTags()"
</ul> title="Tags"
</nav> :icon="TagIcon"
<div :current="route().current('tags')"
v-if="canUpdateOrganization()" :href="route('tags')"></NavigationSidebarItem>
class="text-text-tertiary text-sm font-semibold pt-5 pb-1.5"> </ul>
Admin </nav>
</div> <div
v-if="canUpdateOrganization()"
class="text-text-tertiary text-sm font-semibold pt-5 pb-1.5">
Admin
</div>
<nav> <nav>
<ul> <ul>
<NavigationSidebarItem <NavigationSidebarItem
v-if="canManageBilling() && isBillingActivated()" v-if="
title="Billing" canManageBilling() && isBillingActivated()
:icon="CreditCardIcon" "
href="/billing"></NavigationSidebarItem> title="Billing"
<NavigationSidebarItem :icon="CreditCardIcon"
v-if="canUpdateOrganization()" href="/billing"></NavigationSidebarItem>
<NavigationSidebarItem
v-if="canUpdateOrganization()"
title="Import / Export" title="Import / Export"
:icon="ArrowsRightLeftIcon" :icon="ArrowsRightLeftIcon"
:current="route().current('import')" :current="route().current('import')"
:href="route('import')"></NavigationSidebarItem> :href="route('import')"></NavigationSidebarItem>
<NavigationSidebarItem
v-if="canUpdateOrganization()"
title="Settings"
:icon="Cog6ToothIcon"
:href="
route(
'teams.show',
page.props.auth.user.current_team.id
)
"
:current="
route().current(
'teams.show',
page.props.auth.user.current_team.id
)
"></NavigationSidebarItem>
</ul>
</nav>
</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">
<NavigationSidebarItem <NavigationSidebarItem
v-if="canUpdateOrganization()" class="flex-1"
title="Settings" title="Profile Settings"
:icon="Cog6ToothIcon" :icon="Cog6ToothIcon"
:href=" :href="
route( route('profile.show')
'teams.show',
page.props.auth.user.current_team.id
)
"
:current="
route().current(
'teams.show',
page.props.auth.user.current_team.id
)
"></NavigationSidebarItem> "></NavigationSidebarItem>
<UserSettingsIcon></UserSettingsIcon>
</ul> </ul>
</nav> </div>
</div>
<div>
<UpdateSidebarNotification></UpdateSidebarNotification>
<ul
class="border-t border-default-background-separator pt-3 flex justify-between pr-4 items-center">
<NavigationSidebarItem
class="flex-1"
title="Profile Settings"
:icon="Cog6ToothIcon"
:href="route('profile.show')"></NavigationSidebarItem>
<UserSettingsIcon></UserSettingsIcon>
</ul>
</div> </div>
</div> </div>
<div class="flex-1 lg:ml-[230px] 2xl:ml-[250px] min-w-0"> <div class="flex-1 lg:ml-[230px] 2xl:ml-[250px] min-w-0">