Update dashboard background and some sideabr components

bombies · Nov 7, 2023 · be82ba9 · be82ba9
1 parent 454cf41
commit be82ba9
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 13 deletions.
diff --git a/public/images/mesh-bg.png b/public/images/mesh-bg.png
diff --git a/src/app/(site)/(internal)/dashboard/layout.tsx b/src/app/(site)/(internal)/dashboard/layout.tsx
@@ -1,7 +1,8 @@
-import {FC, PropsWithChildren} from "react";
+import React, {FC, PropsWithChildren} from "react";
 import DashboardSidebar from "@/app/(site)/(internal)/dashboard/components/DashboardSidebar";
 import {Metadata} from "next";
 import DreamsProvider from "@/app/(site)/(internal)/dashboard/(your-dreams)/components/dreams/DreamsProvider";
+import Image from "next/image";
 
 export const metadata: Metadata = {
     title: 'Dream Logger - Dashboard',
@@ -10,14 +11,26 @@ export const metadata: Metadata = {
 
 const DashboardLayout: FC<PropsWithChildren> = ({children}) => {
     return (
-        <main className="relative flex min-h-screen">
-            <DashboardSidebar/>
-            <div
-                className="flex-grow py-32 w-screen overflow-hidden phone:pt-32 flex flex-col phone:items-center phone-min:ml-16 tablet-min:ml-32">
-                <DreamsProvider>
-                    {children}
-                </DreamsProvider>
+        <main className="relative ">
+            <div className="z-10 relative flex min-h-screen">
+                <DashboardSidebar/>
+                <div
+                    className="flex-grow py-32 w-screen overflow-hidden phone:pt-32 flex flex-col phone:items-center phone-min:ml-16 tablet-min:ml-32">
+                    <DreamsProvider>
+                        {children}
+                    </DreamsProvider>
+                </div>
             </div>
+            <Image
+                priority
+                src="/images/mesh-bg.png"
+                alt=''
+                className="!absolute w-full h-full top-0 left-0 opacity-10 z-[1] pointer-events-none"
+                fill
+                style={{
+                    objectFit: "cover"
+                }}
+            />
         </main>
     )
 }

diff --git a/src/app/(site)/components/sidebar/Sidebar.tsx b/src/app/(site)/components/sidebar/Sidebar.tsx
@@ -40,8 +40,8 @@ const Sidebar: FC<Props> = ({children, headerText}) => {
         <motion.aside
             ref={sidebarRef}
             className={clsx(
-                "relative bg-secondary min-h-screen data-[isopen=true]:w-96 w-24 pt-12 px-2",
-                "z-[100] tablet:!bg-opacity-0 tablet:data-[isopen=true]:!bg-opacity-90 tablet:data-[isopen=true]:backdrop-blur-md tablet:w-16 data-[isopen=true]:tablet:w-72 tablet:fixed",
+                "relative bg-secondary/50 min-h-screen data-[isopen=true]:w-96 w-24 pt-12 px-2",
+                "z-[100] tablet:!bg-secondary/0 tablet:data-[isopen=true]:!bg-opacity-90 tablet:data-[isopen=true]:backdrop-blur-md tablet:w-16 data-[isopen=true]:tablet:w-72 tablet:fixed",
                 "phone:w-12 data-[isopen=true]:phone:w-64",
                 "data-[isopen=true]:p-6 flex flex-col data-[isopen=false]:items-center data-[isopen=false]:z-0"
             )}
@@ -103,10 +103,10 @@ const Sidebar: FC<Props> = ({children, headerText}) => {
                         <UserProfile placement="right-end"/>
                     </div>
                     {isOpen && (
-                        <Fragment>
+                        <div className="flex justify-between w-full">
                             <div className="overflow-hidden flex-grow-0">
                                 <p className="text-purple-400 break-all">@{memberData.data?.username}</p>
-                                <p className="text-sm text-subtext">{memberData.data?.email}</p>
+                                <p className="text-xs text-subtext">{memberData.data?.email}</p>
                             </div>
                             <Tooltip
                                 placement="right"
@@ -122,7 +122,7 @@ const Sidebar: FC<Props> = ({children, headerText}) => {
                                     <SignOutLinedIcon width={20}/>
                                 </Button>
                             </Tooltip>
-                        </Fragment>
+                        </div>
                     )}
                 </div>
             </div>