sidebar navigation

src/main/css/1-base.css

@@ -1,7 +1,12 @@
 @tailwind base;
 
 :root {
-  --navigation-header-height: 3rem;
+  /* info-banner is optional and value is overridden by javascript with real height on runtime. as we don't know the content yet... */
+  --info-banner-height: 0;
+  --top-bar-height: 3.25rem;
+
+  --info-banner-sticky-top: 0;
+  --navigation-sticky-top: var(--info-banner-height);
 
   /* 500 */
   --absence-color-GRAY: #6b7280;
@@ -24,6 +29,26 @@ body {
   min-height: --webkit-fill-available;
   background-image: linear-gradient(#ffffff, #fafafa);
   background-attachment: fixed;
+
+  display: grid;
+  grid-template-rows: auto auto 1fr;
+  grid-template-columns: auto 1fr;
+  grid-template-areas:
+    "banner banner"
+    "navigation topbar"
+    "content content";
+}
+
+@screen lg {
+  body {
+    display: grid;
+    grid-template-rows: auto auto 1fr;
+    grid-template-columns: auto 1fr;
+    grid-template-areas:
+      "banner banner"
+      "navigation topbar"
+      "navigation content";
+  }
 }
 
 input:not([class*="rounded"]),
@@ -33,7 +58,9 @@ textarea:not([class*="rounded"]) {
 
 @font-face {
   font-family: "KaushanScript";
-  src: local("KaushanScript"), local("KaushanScript Regular"),
+  src:
+    local("KaushanScript"),
+    local("KaushanScript Regular"),
     local("KaushanScript-Regular"),
     url("/fonts/kaushanscript/KaushanScript-Regular.woff2") format("woff2"),
     url("/fonts/kaushanscript/KaushanScript-Regular.woff") format("woff");

src/main/css/2-components.css

@@ -1,6 +1,5 @@
 @import "tailwindcss/components.css";
 @import "./components/ajax-loader.css";
-@import "./components/body-overlay.css";
 @import "./components/checkbox-switch.css";
 @import "./components/info-banner.css";
 @import "./components/feedback.css";
@@ -17,6 +16,17 @@
   margin-top: auto;
 }
 
+duet-date-picker .duet-date__dialog {
+  /* completely "hide" the div to avoid adding height to the parent element. */
+  height: 0;
+  overflow: hidden;
+}
+
+duet-date-picker .duet-date__dialog.is-active {
+  height: auto;
+  overflow: auto;
+}
+
 duet-date-picker.edited ~ label > span {
   color: theme("colors.blue.600");
 }

src/main/css/components/navigation.css

@@ -1,57 +1,65 @@
-#menu-toggle-checkbox ~ label ~ nav {
+#menu-toggle-checkbox ~ label ~ div {
+  @apply transition-all;
+  @apply duration-200;
+  opacity: 0;
+
+  width: 100%;
   position: fixed;
   top: 100%;
   bottom: 0;
   left: 0;
   right: 0;
-  @apply px-6;
-  @apply py-8;
-  @apply transition-all;
-  @apply duration-150;
-  @apply bg-white;
+  background: white;
+  z-index: 999999;
+
+  @apply px-3;
 }
 
-#menu-toggle-checkbox:checked ~ label ~ nav {
-  top: calc(var(--navigation-header-height) + 1.5rem);
+#menu-toggle-checkbox:checked ~ label ~ div {
+  opacity: 1;
+  top: calc(var(--navigation-sticky-top) + var(--top-bar-height));
+  padding-top: 1rem;
 }
 
-.navigation-content-spacer {
-  @apply bg-transparent;
+body:has(#menu-toggle-checkbox:checked) {
+  /* prevent scrolling of hidden content */
+  /* remember to reset this on large screen to avoid content jumping when scrollbar is (always) visible */
+  overflow: hidden;
 }
 
 .navigation-content-spacer--left,
 .navigation-content-spacer--right {
-  position: relative;
-  @apply dark:hidden;
+  position: absolute;
+  top: 100%;
+  @apply bg-gray-100;
+  @apply lg:hidden;
 }
 
-.navigation-content-spacer--left::before,
-.navigation-content-spacer--right::before,
-.navigation-content-spacer--left::after,
-.navigation-content-spacer--right::after {
-  content: "";
-  position: absolute;
-  @apply inset-0;
+.navigation-content-spacer--left {
+  left: 0;
 }
 
-.navigation-content-spacer--left::before,
-.navigation-content-spacer--right::before {
-  @apply bg-zinc-100;
-  @apply dark:bg-zinc-800;
+.navigation-content-spacer--right {
+  right: 0;
 }
 
 .navigation-content-spacer--left::after,
 .navigation-content-spacer--right::after {
+  content: "";
+  position: absolute;
+  @apply inset-0;
   @apply bg-white;
-  @apply dark:bg-zinc-900;
+  @apply lg:hidden;
 }
 
 .navigation-content-spacer--left::after {
   @apply rounded-tl-full;
+  left: 0;
 }
 
 .navigation-content-spacer--right::after {
   @apply rounded-tr-full;
+  right: 0;
 }
 
 #menu-toggle-checkbox + label > span:first-child {
@@ -127,37 +135,23 @@
   background-color: transparent !important;
 }
 
-@screen xs {
-  #menu-toggle-checkbox ~ label ~ nav {
-    overflow: hidden;
-    max-height: 0;
-    top: -100%;
-    @apply bg-zinc-100;
-    z-index: 10;
-  }
-
-  #menu-toggle-checkbox:checked ~ label ~ nav,
-  #menu-toggle-checkbox:checked ~ label ~ nav:focus-within {
-    top: var(--navigation-header-height);
-    max-height: 100vh !important;
+@screen lg {
+  #menu-toggle-checkbox ~ label ~ div,
+  #menu-toggle-checkbox:checked ~ label ~ div {
+    position: static;
+    opacity: 1;
+    padding: 0;
   }
-}
 
-@screen lg {
-  #menu-toggle-checkbox ~ label ~ nav {
-    max-height: unset;
-    @apply static;
-    @apply scale-x-100;
-    @apply scale-y-100;
-    @apply opacity-100;
-    @apply py-0;
-    @apply px-0;
+  body:has(#menu-toggle-checkbox:checked) {
+    overflow: revert;
   }
 }
 
 .main-nav-link {
   @apply text-2xl;
   @apply lg:text-lg;
+  @apply lg:pl-1;
   @apply font-medium;
   @apply text-gray-800;
   @apply transition-colors;
@@ -168,8 +162,7 @@
   @apply lg:w-5;
   @apply lg:h-5;
   @apply lg:stroke-gray-800;
-  @apply mr-4;
-  @apply lg:mr-1.5;
+  @apply mr-3.5;
 }
 .main-nav-link:hover svg {
   @apply fill-amber-500;
@@ -196,7 +189,7 @@
 }
 
 .nav-popup-menu.visible {
-  top: calc(var(--navigation-header-height) + 1.5rem);
+  top: calc(var(--top-bar-height) + 1.5rem);
 }
 
 .nav-popup-menu-inner {
@@ -219,88 +212,40 @@
   overflow-y: auto;
 }
 
-body:has(.nav-popup-menu.visible) {
-  /* disable body scroll as long as nav-popup-menu is open */
-  overflow: hidden;
-}
-
-.nav-popup-menu.visible .nav-popup-menu-inner {
-  width: 100%;
-  height: 100%;
-}
-
-@screen xs {
-  .nav-popup-menu::before {
-    content: "";
-    border-color: transparent;
-    border-width: 8px;
-    @apply border-b-gray-200;
-    position: absolute;
-    top: -17px;
-    @apply right-6;
-  }
-
+@screen lg {
   .nav-popup-menu {
-    @apply transition-transform;
-    @apply origin-top-right;
+    position: absolute;
+    top: calc(100% + 0.5rem);
+    left: 0;
+    right: 0;
     @apply scale-0;
-    @apply border;
-    @apply border-gray-200;
-    @apply shadow-xl;
-    @apply mt-3;
-    @apply z-50;
-    @apply absolute;
-    @apply left-auto;
-    @apply right-0;
-    @apply bottom-auto;
-    @apply rounded-2xl;
-    @apply dark:border-zinc-800;
-    @apply dark:shadow-none;
   }
 
   .nav-popup-menu.visible {
-    @apply top-full;
-    @apply z-10;
+    @apply scale-100;
+    top: calc(100% + 0.5rem);
   }
 
   .nav-popup-menu-inner {
-    max-height: 75vh;
-    @apply w-auto;
-    @apply h-auto;
-    @apply rounded-2xl;
-    @apply border-gray-200;
     @apply bg-white;
-    @apply backdrop-blur;
-    @apply supports-backdrop-blur:bg-white/[0.85];
-  }
-
-  .nav-popup-menu-inner ul li:first-of-type .nav-popup-menu_link {
-    @apply rounded-t-2xl;
-  }
-
-  .nav-popup-menu-inner ul li:last-of-type .nav-popup-menu_link {
-    @apply rounded-b-2xl;
+    @apply border;
+    @apply border-gray-50;
+    @apply rounded-lg;
+    @apply shadow-lg;
   }
 
   .nav-popup-menu-inner ul li[role="separator"] {
     @apply border-t;
     @apply border-gray-200;
   }
 
-  .nav-popup-menu.visible,
-  .nav-popup-menu:focus-within {
-    @apply scale-100;
-  }
-
-  .nav-popup-menu-button_icon {
-    @apply text-zinc-900;
-    @apply text-opacity-75;
-    @apply transition-colors;
+  .nav-popup-menu-inner__header {
+    @apply rounded-t-none;
+    @apply bg-gray-100;
   }
 
-  .nav-popup-menu-button:is(:hover, :focus) .nav-popup-menu-button_icon {
-    @apply text-opacity-100;
-    @apply text-zinc-800;
+  .nav-popup-menu-inner__content {
+    overflow-y: hidden;
   }
 }
 
@@ -314,10 +259,10 @@ body:has(.nav-popup-menu.visible) {
   @apply hover:no-underline;
   @apply focus:no-underline;
   @apply text-base;
-  @apply text-gray-700;
+  @apply text-gray-800;
   @apply bg-transparent;
   @apply hover:text-black;
   @apply focus:text-black;
-  @apply hover:bg-gray-50;
-  @apply focus:bg-gray-50;
+  @apply hover:bg-gray-100;
+  @apply focus:bg-gray-100;
 }