Initial commit

apps/web/components/layouts/dashboard/DashboardLayout.module.css

@@ -0,0 +1,42 @@
+.dashboardWrapper {
+  grid-template-columns: min-content auto;
+  grid-template-areas: "sidebar main";
+  --header-height: 5rem;
+  --footer-height: 2rem;
+  --small-spacing: 1rem; /* tw class: gap-4, m-4 etc. */
+  --large-spacing: 2rem; /* tw class: gap-8, m-8 etc. */
+  --header-size: calc(var(--header-height) + var(--small-spacing));
+  --footer-size: calc(var(--footer-height) + var(--small-spacing));
+}
+
+.dashboardSidebar {
+  grid-area: sidebar;
+}
+
+.dashboardMain {
+  @apply gap-[var(--large-spacing)];
+  grid-area: main;
+  grid-template-rows: var(--header-height) calc(
+      100vh - (var(--header-height) + var(--footer-height))
+    );
+  grid-template-areas: "header" "content";
+}
+
+.dashboardHeader {
+  grid-area: header;
+}
+
+.dashboardContent {
+  grid-area: content;
+}
+
+.dashboardContentWrapper {
+  @apply gap-[var(--small-spacing)];
+  min-height: calc(
+    100vh -
+      (
+        var(--header-size) + var(--footer-size) + var(--small-spacing) +
+          var(--small-spacing)
+      )
+  );
+}