BasegBot/InvestWeb
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

mobile dash temp

Browse source
This commit is contained in:
3zachm 2022-12-20 06:38:26 -08:00
parent b481ef3f5d
commit 929bafbfb8
3 changed files with 13 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
components/dashboard/NavBar.tsx
View file

@ -4,25 +4,28 @@ import Link from "next/link";
function NavBar() { function NavBar() {
return ( return (
<m.div <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} variants={navContainerVariants}
initial="initial" initial="initial"
animate="animate" 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"> <Link href="/dashboard">
<DashIcon /> <DashIcon />
</Link> </Link>
</m.div> </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"> <Link href="/dashboard/ranking">
<RankingIcon /> <RankingIcon />
</Link> </Link>
</m.div> </m.div>
</m.div> </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} variants={navStripVariants}
> >
<Link href="/"> <Link href="/">

4
layouts/DashLayout.tsx
View file

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

6
pages/dashboard/index.tsx
View file

@ -11,7 +11,7 @@ function Dashboard() {
<title>Dashboard - InvestBot</title> <title>Dashboard - InvestBot</title>
</Head> </Head>
<m.div <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} variants={gridContainerVariants}
initial="initial" initial="initial"
animate="animate" animate="animate"
@ -23,7 +23,7 @@ function Dashboard() {
1 1
</m.div> </m.div>
<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} variants={gridItemVariants}
> >
2 2
@ -35,7 +35,7 @@ function Dashboard() {
3 3
</m.div> </m.div>
<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} variants={gridItemVariants}
> >
4 4