feat: add sticky left nav (#1954)

Author: euharrison

apps/namadillo/src/App/Layout/AppHeader.tsx

@@ -12,7 +12,7 @@ export const AppHeader = ({ burger }: { burger: ReactNode }): JSX.Element => {
         "grid gap-2",
         "grid-cols-[auto_auto] lg:grid-cols-[220px_auto]",
         "h-[80px] items-center",
-        "px-6 sm:px-0"
+        "px-6"
       )}
     >
       <div className="flex items-center gap-4">

apps/namadillo/src/App/Layout/AppLayout.tsx

@@ -15,8 +15,8 @@ export const AppLayout = ({
 
   return (
     <>
-      <AlphaVersionTopHeader />
-      <div className="custom-container pb-2">
+      <div className="sticky top-0 bg-neutral-800 z-50">
+        <AlphaVersionTopHeader />
         <AppHeader
           burger={
             <span className="sm:px-0 lg:hidden">
@@ -27,34 +27,39 @@ export const AppLayout = ({
             </span>
           }
         />
-        <div
+      </div>
+      <div className="lg:grid lg:grid-cols-[220px_auto] lg:gap-2 px-6">
+        <aside
+          onClick={(e) => e.stopPropagation()}
           className={twMerge(
-            "grid lg:grid-cols-[220px_auto] lg:gap-2 min-h-[calc(100svh-95px)]"
+            // mobile, burger, fixed, full height
+            "transition-transform duration-500 ease-out-expo",
+            "fixed left-0 top-0 bottom-0 z-[9999]",
+            !displayNavigation && "-translate-x-full lg:translate-x-0",
+            // desktop, left nav, floating panel - 112px is the header height
+            "lg:sticky lg:top-[112px] lg:h-[calc(100svh-112px)] lg:pb-2",
+            "lg:transition-none lg:z-auto"
           )}
         >
-          <aside
-            onClick={(e) => e.stopPropagation()}
+          <div
             className={twMerge(
-              "transition-transform duration-500 ease-out-expo",
-              "pt-10 bg-black rounded-sm fixed top-0 z-[9999] w-[240px]",
-              "h-svh lg:h-[calc(100svh-90px)] left-0 lg:z-0 lg:transition-none",
-              "lg:pt-0 lg:w-auto lg:relative",
-              !displayNavigation && "-translate-x-full lg:translate-x-0"
+              "h-full bg-black w-[240px] pt-10",
+              "lg:w-auto lg:p-0 lg:rounded-sm overflow-auto"
             )}
           >
             {displayNavigation && (
               <button
-                className="absolute top-4 left-4 text-white hover:text-yellow text-2xl"
+                className="absolute top-4 left-4 text-white hover:text-yellow text-2xl lg:hidden"
                 onClick={() => setDisplayNavigation(false)}
                 aria-label="Close Navigation"
               >
                 <IoMdClose />
               </button>
             )}
             <Navigation />
-          </aside>
-          <main className="min-h-full">{children}</main>
-        </div>
+          </div>
+        </aside>
+        <main className="min-h-full pb-2">{children}</main>
       </div>
     </>
   );

apps/namadillo/src/App/Layout/Navigation.tsx

@@ -61,7 +61,7 @@ export const Navigation = (): JSX.Element => {
   ];
 
   return (
-    <div className="h-full flex flex-col justify-between flex-1 pt-6 pb-8 px-6">
+    <div className="min-h-full flex flex-col justify-between gap-10 p-6 pb-8">
       <ul className="flex flex-col gap-4">
         {menuItems.map((item) => (
           <li key={item.label}>

apps/namadillo/src/App/Staking/MyValidatorsTable.tsx

@@ -107,7 +107,7 @@ export const MyValidatorsTable = (): JSX.Element => {
 
   return (
     <>
-      <nav className="sm:absolute top-6 right-4 flex gap-2 flex-1 z-50">
+      <nav className="sm:absolute top-6 right-4 flex gap-2 flex-1 z-10">
         <ActionButton
           className="basis-[content] py-1"
           backgroundColor="cyan"

apps/namadillo/src/App/Transactions/TransactionHistory.tsx

@@ -18,7 +18,7 @@ export const TransactionHistory = (): JSX.Element => {
 
   return (
     <>
-      <Panel className="flex flex-col gap-6 flex-1 h-full">
+      <Panel className="flex flex-col gap-6 flex-1">
         <h2 className="mb-7">Transfers made by this device</h2>
         {pending.length > 0 && (
           <section>