Fix Sidebar and screen scroll

Author: nalves599

src/app/(authenticated)/companies/CompaniesList.tsx

@@ -30,7 +30,7 @@ export default function CompaniesList({ companies }: CompaniesListProps) {
 
   return (
     <>
-      <div className="sticky top-0 pt-4 px-4">
+      <div className="sticky top-16 pt-4 px-4 z-20">
         <input
           type="text"
           placeholder="Search companies"

src/app/(authenticated)/layout.tsx

@@ -13,11 +13,9 @@ export default async function AuthenticatedLayout({
   if (!session) redirect("/login");
 
   return (
-    <div className="h-screen text-white flex flex-col relative">
+    <div className="min-h-screen text-white flex flex-col">
       <Toolbar />
-      <div className="flex-1 overflow-y-scroll bg-gray-100 text-black mb-navbar">
-        {children}
-      </div>
+      <div className="flex-1 bg-gray-100 text-black pb-navbar">{children}</div>
       <BottomNavbar />
     </div>
   );

src/app/(authenticated)/speakers/SpeakersList.tsx

@@ -30,7 +30,7 @@ export default function SpeakersList({ speakers }: SpeakersListProps) {
 
   return (
     <>
-      <div className="sticky top-0 pt-4 px-4">
+      <div className="sticky top-16 pt-4 px-4 z-20">
         <input
           type="text"
           placeholder="Search speakers"

src/components/Toolbar/Sidebar.tsx

@@ -14,7 +14,7 @@ export default function Sidebar({ show, onClose }: SidebarProps) {
 
   return (
     <div
-      className={`z-20 fixed top-0 left-0 h-full w-full bg-sinfo-primary p-10 flex flex-col gap-6 transition-transform duration-300 ${
+      className={`overflow-y-auto z-50 fixed inset-0 bg-sinfo-primary p-10 mb-safe flex flex-col gap-6 transition-transform duration-300 ${
         show ? "translate-x-0" : "-translate-x-full"
       }`}
     >

src/components/Toolbar/index.tsx

@@ -23,8 +23,8 @@ export default function Toolbar() {
   return (
     <>
       <Sidebar show={isExpanded} onClose={() => setIsExpanded(false)} />
-      <div className="bg-sinfo-primary">
-        <div className="container m-auto p-4 pb-2 flex flex-col gap-4">
+      <div className="sticky top-0 z-10 bg-sinfo-primary">
+        <div className="container m-auto p-4 flex flex-col gap-4">
           <nav className="flex flex-row items-center">
             <div className="w-1/6 flex justify-start items-center">
               {showMenu ? (

src/styles/globals.css

@@ -17,3 +17,11 @@
 #scan-container .scan-region-highlight-svg {
   @apply !stroke-sinfo-secondary;
 }
+
+.pb-safe {
+  padding-bottom: env(safe-area-inset-bottom);
+}
+
+.mb-safe {
+  margin-bottom: env(safe-area-inset-bottom);
+}