fix sidebar navigation overflowing, add scrollbar only to nav items

resources/js/Layouts/AppLayout.vue

@@ -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">
+            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
                     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
+                <div
-                    class="pt-2 overflow-y-scroll"
+                    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 class="justify-self-end">
-            <div>
                     <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">