mobile dash temp

components/dashboard/NavBar.tsx

@@ -4,25 +4,28 @@ import Link from "next/link";
 function NavBar() {
   return (
     <m.div
-      className="mr-2 flex h-full w-24 flex-col items-center justify-between bg-zinc-800 p-1"
+      className="mr-2 flex h-24 w-full flex-row items-center justify-between bg-zinc-800 p-1 lg:h-screen lg:w-24 lg:flex-col"
       variants={navContainerVariants}
       initial="initial"
       animate="animate"
     >
-      <m.div className="flex flex-col pt-5" variants={navStripVariants}>
+      <m.div
-        <m.div variants={navIconVariants} className="pb-5">
+        className="flex flex-row pl-5 lg:flex-col lg:pl-0 lg:pt-5"
+        variants={navStripVariants}
+      >
+        <m.div variants={navIconVariants} className="pr-5 lg:pr-0 lg:pb-5">
           <Link href="/dashboard">
             <DashIcon />
           </Link>
         </m.div>
-        <m.div variants={navIconVariants} className="pb-5">
+        <m.div variants={navIconVariants} className="pr-5 lg:pr-0 lg:pb-5">
           <Link href="/dashboard/ranking">
             <RankingIcon />
           </Link>
         </m.div>
       </m.div>
       <m.div
-        className="flex w-full flex-col items-center justify-center pb-5"
+        className="flex flex-row items-center justify-center pr-5 lg:w-full lg:flex-col lg:pr-0 lg:pb-5"
         variants={navStripVariants}
       >
         <Link href="/">

layouts/DashLayout.tsx

@@ -34,7 +34,7 @@ function DashLayout(props: DashLayoutProps) {
         <meta property="og:site_name" content="InvestBot" />
       </Head>
 
-      <div className="flex h-screen w-screen flex-row overflow-hidden">
+      <div className="flex h-screen w-screen flex-col overflow-hidden lg:flex-row">
         {/* dashboard nav bar */}
         <LazyMotion features={domAnimation}>
           <AnimatePresence mode="wait">
@@ -46,7 +46,7 @@ function DashLayout(props: DashLayoutProps) {
           <AnimatePresence mode="wait">
             <m.div
               key={router.route.concat("layout-fade")}
-              className="h-screen w-screen"
+              className="w-screen overflow-y-scroll"
               variants={containerVariants}
               initial="initial"
               animate="animate"

pages/dashboard/index.tsx

@@ -11,7 +11,7 @@ function Dashboard() {
         <title>Dashboard - InvestBot</title>
       </Head>
       <m.div
-        className="inline-grid h-full w-full grid-cols-2 pt-2 pr-2 xl:grid-cols-5"
+        className="inline-grid w-full grid-cols-1 pt-2 pl-2 lg:h-full lg:grid-cols-5 lg:pl-0 lg:pr-2"
         variants={gridContainerVariants}
         initial="initial"
         animate="animate"
@@ -23,7 +23,7 @@ function Dashboard() {
           1
         </m.div>
         <m.div
-          className="col-span-3 m-2 bg-zinc-800"
+          className="col-span-1 row-span-3 m-2 bg-zinc-800 lg:col-span-3 lg:row-span-1"
           variants={gridItemVariants}
         >
           2
@@ -35,7 +35,7 @@ function Dashboard() {
           3
         </m.div>
         <m.div
-          className="col-span-4 m-2 bg-zinc-800"
+          className="col-span-1 row-span-4 m-2 bg-zinc-800 lg:col-span-4 lg:row-span-1"
           variants={gridItemVariants}
         >
           4