fix homepage carousel, sidebar z-index and responsive

BibliothecaDAO · Oct 7, 2024 · 5c6b9a3 · 5c6b9a3
1 parent 85bb50e
commit 5c6b9a3
Show file tree

Hide file tree

Showing 4 changed files with 128 additions and 124 deletions.
diff --git a/apps/nextjs/src/app/(app)/account/layout.tsx b/apps/nextjs/src/app/(app)/account/layout.tsx
@@ -35,7 +35,9 @@ export default function RootLayout({
         <SidebarLayout defaultOpen={isSidebarOpen}>
           <AppSidebar />
           <SidebarTrigger
-            className={cn("fixed z-40 ml-3 mt-5 h-8 w-8 border sm:top-6")}
+            className={cn(
+              "fixed z-30 ml-3 mt-5 h-8 w-8 border sm:top-1.5 sm:z-50",
+            )}
           />
           <div className="flex flex-1 flex-col transition-all duration-300 ease-in-out">
             <AuthWrapper>{children}</AuthWrapper>

diff --git a/apps/nextjs/src/app/(app)/page.tsx b/apps/nextjs/src/app/(app)/page.tsx
@@ -57,8 +57,8 @@ export default async function Home() {
             </CarouselItem>
           ))}
         </CarouselContent>
-        <CarouselPrevious />
-        <CarouselNext />
+        <CarouselPrevious className="left-2 sm:left-8" />
+        <CarouselNext className="right-2 sm:right-8" />
       </Carousel>
       <div className="px-4 sm:px-8">
         <Partners />

diff --git a/apps/nextjs/src/app/_components/SideMenu.tsx b/apps/nextjs/src/app/_components/SideMenu.tsx
@@ -80,7 +80,7 @@ const Sidebar = () => {
     <div
       className={`${
         isSidebarOpen ? "bg-background" : "hidden"
-      } z-100 group fixed bottom-0 top-0 z-20 h-screen w-screen flex-col bg-background transition-all duration-500 sm:border-r-[3px] md:flex md:w-[var(--site-sidemenu-width)] md:hover:w-60`}
+      } group fixed bottom-0 top-0 z-40 h-screen w-screen flex-col bg-background transition-all duration-500 sm:border-r-[3px] md:flex md:w-[var(--site-sidemenu-width)] md:hover:w-60`}
     >
       <div className="absolute mx-4 hidden sm:block">
         <SideHeaderImg className="w-full opacity-0 group-hover:opacity-100" />
@@ -93,50 +93,51 @@ const Sidebar = () => {
         <Crown className="absolute w-14 group-hover:opacity-0" />
         <RWLogo className="absolute w-[152px] fill-white opacity-0 transition-all duration-500 group-hover:opacity-100" />
       </Link>
-      <div className="mt-[60px] h-full w-full border-t-[3px] pb-3">
-        <div className="relative z-10 m-2 mt-0 h-full border-solid border-transparent group-hover:!border-medium-dark-green sm:border-[3px] sm:border-t-0">
-          <div className="relative flex h-full flex-col items-center pt-8">
-            <ScrollArea className="w-full">
-              <div className="relative z-[2] inline-flex w-full flex-[0_0_auto] flex-col items-start justify-center gap-[17px] px-4 md:mb-6 md:mt-10">
-                {menu.map((item, index) => {
-                  return (
-                    <Button
-                      className="group flex w-full justify-normal px-2 text-lg font-semibold normal-case transition-all duration-200"
-                      key={index}
-                      variant={"outline"}
-                      onClick={() => {
-                        handleClick(item.href);
-                        toggleSidebar();
-                      }}
-                    >
-                      <span className="absolute">{item.icon}</span>
+      <div className="h-full pt-[calc(var(--site-header-height)_-_3px)]">
+        <div className="z-50 h-full w-full border-t-[3px] pb-3">
+          <div className="relative z-50 m-2 mt-0 h-full border-solid border-transparent group-hover:!border-medium-dark-green sm:border-[3px] sm:border-t-0">
+            <div className="relative flex h-full flex-col items-center pt-8">
+              <ScrollArea className="w-full">
+                <div className="relative z-[2] inline-flex w-full flex-[0_0_auto] flex-col items-start justify-center gap-[17px] px-4 md:mb-6 md:mt-10">
+                  {menu.map((item, index) => {
+                    return (
+                      <Button
+                        className="group flex w-full justify-normal px-2 text-lg font-semibold normal-case transition-all duration-200"
+                        key={index}
+                        variant={"outline"}
+                        onClick={() => {
+                          handleClick(item.href);
+                          toggleSidebar();
+                        }}
+                      >
+                        <span className="absolute">{item.icon}</span>
 
-                      <span className="visible absolute pl-9 opacity-100 transition-opacity group-hover:visible group-hover:flex group-hover:opacity-100 group-hover:delay-150 group-hover:duration-500 sm:opacity-0">
-                        {item.name}
-                      </span>
-                    </Button>
-                  );
-                })}
-              </div>
-            </ScrollArea>
+                        <span className="visible absolute pl-9 opacity-100 transition-opacity group-hover:visible group-hover:flex group-hover:opacity-100 group-hover:delay-150 group-hover:duration-500 sm:opacity-0">
+                          {item.name}
+                        </span>
+                      </Button>
+                    );
+                  })}
+                </div>
+              </ScrollArea>
 
-            <div className="flex-grow" />
-            {/* <hr className="mb-4 sm:border-b-[3px]" /> */}
+              <div className="flex-grow" />
+              {/* <hr className="mb-4 sm:border-b-[3px]" /> */}
 
-            <Button
-              asChild
-              variant={"outline"}
-              className="mb-2 mt-3 flex h-16 flex-col p-2 font-sans text-xl sm:pt-3"
-            >
-              <Link href="/swap">
-                <div className="h-8">
-                  <LordsIcon className="mx-auto h-6 w-6 fill-bright-yellow pb-1" />
-                </div>
-                {lordsPrice?.usdPrice}
-              </Link>
-            </Button>
+              <Button
+                asChild
+                variant={"outline"}
+                className="mb-2 mt-3 flex h-16 flex-col p-2 font-sans text-xl sm:pt-3"
+              >
+                <Link href="/swap">
+                  <div className="h-8">
+                    <LordsIcon className="mx-auto h-6 w-6 fill-bright-yellow pb-1" />
+                  </div>
+                  {lordsPrice?.usdPrice}
+                </Link>
+              </Button>
 
-            {/* <div className="my-3 flex sm:mt-auto sm:flex-col gap-3">
+              {/* <div className="my-3 flex sm:mt-auto sm:flex-col gap-3">
               {social.map((item, index) => {
                 return (
                   <Link href={item.href} target="_blank" key={index}>
@@ -145,6 +146,7 @@ const Sidebar = () => {
                 );
               })}
             </div> */}
+            </div>
           </div>
         </div>
       </div>