ui(reorgainze width sidebar) feat(dashboard v5)

Jee-vim · Jee-vim · commit 54bb65e0a869 · 2024-08-01T21:35:38.000+07:00
diff --git a/app/globals.css b/app/globals.css
@@ -2,6 +2,10 @@
 @tailwind components;
 @tailwind utilities;
 
+::root {
+  --w-sidebar: 80px;
+}
+
 .no-scrollbar::-webkit-scrollbar {
   display: none;
 }
diff --git a/app/v5/layout.tsx b/app/v5/layout.tsx
@@ -0,0 +1,25 @@
+import Sidebar from "@/components/v1/sidebar";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Dashboard Layout V5",
+  description: "Generated by create next app",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body>
+        <main className="main-wrapper">
+          <Sidebar />
+          <main className="main-content">{children}</main>
+          <Sidebar />
+        </main>
+      </body>
+    </html>
+  );
+}
diff --git a/app/v5/page.tsx b/app/v5/page.tsx
@@ -0,0 +1,9 @@
+export default function Page() {
+  return (
+    <div className="flex flex-col gap-2">
+      {Array.from({ length: 10 }).map((_, id) => {
+        return <div key={id} className="h-96 w-full bg-dark-300 rounded-md" />;
+      })}
+    </div>
+  );
+}
diff --git a/components/v1/sidebar.tsx b/components/v1/sidebar.tsx
@@ -1,6 +1,6 @@
 export default function Sidebar() {
   return (
-    <div className="min-w-[80px] md:w-[240px] lg:min-w-[280px] h-dvh transition-all bg-dark-500 p-3">
+    <div className="min-w-[var(--w-sidebar)] md:w-[240px] lg:min-w-[280px] h-dvh transition-all bg-dark-500 p-3">
       sidebar
     </div>
   );
diff --git a/components/v2/sidebar.tsx b/components/v2/sidebar.tsx
@@ -1,6 +1,6 @@
 export default function Sidebar() {
   return (
-    <div className="min-w-[80px] md:w-[240px] lg:min-w-[280px] h-dvh transition-all bg-dark-500 p-3">
+    <div className="min-w-[var(--w-sidebar)] md:w-[240px] lg:min-w-[280px] h-dvh transition-all bg-dark-500 p-3">
       sidebar
     </div>
   );
diff --git a/components/v3/sidebar.tsx b/components/v3/sidebar.tsx
@@ -40,7 +40,7 @@ export default function Sidebar() {
     <div className="relative w-fit" ref={refOutside}>
       <CloseOpen isOpen={isOpen} setIsOpen={setIsOpen} />
       <div
-        className={cn(`${styles.sidebarWithOpenClose} !h-[calc(100vh-25px)] rounded-lg` , {
+        className={cn(`${styles.sidebarWithOpenClose} !h-svh rounded-lg`, {
           [styles.sidebarWithOpenCloseActive]: !isOpen,
         })}
       >
diff --git a/components/v5/sidebar.tsx b/components/v5/sidebar.tsx
@@ -0,0 +1,7 @@
+export default function Sidebar() {
+  return (
+    <div className="min-w-[var(--w-sidebar)] md:w-[240px] lg:min-w-[280px] h-dvh transition-all bg-dark-500 p-3">
+      sidebar
+    </div>
+  );
+}

Original file line number	Diff line number	Diff line change
`@@ -40,7 +40,7 @@ export default function Sidebar() {`
`40`	`40`	`<div className="relative w-fit" ref={refOutside}>`
`41`	`41`	`<CloseOpen isOpen={isOpen} setIsOpen={setIsOpen} />`
`42`	`42`	`<div`
`43`		- className={cn(`${styles.sidebarWithOpenClose} !h-[calc(100vh-25px)] rounded-lg` , {
	`43`	+ className={cn(`${styles.sidebarWithOpenClose} !h-svh rounded-lg`, {
`44`	`44`	`[styles.sidebarWithOpenCloseActive]: !isOpen,`
`45`	`45`	`})}`
`46`	`46`	`>`