sidebar navigation

src/main/css/1-base.css

@@ -1,9 +1,14 @@
 @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;
   --z-index-tooltip: 99999; /* tooltips shown on pointer hover should always be on top */
 
+  --info-banner-sticky-top: 0;
+  --navigation-sticky-top: var(--info-banner-height);
+
   /* 500 */
   --absence-color-GRAY: #6b7280;
   --absence-color-ORANGE: #f97316;
@@ -25,6 +30,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"]),

src/main/css/2-components.css

@@ -1,7 +1,6 @@
 @import "tailwindcss/components.css";
 @import "./components/ajax-loader.css";
 @import "./components/avatar-group.css";
-@import "./components/body-overlay.css";
 @import "./components/checkbox-switch.css";
 @import "./components/info-banner.css";
 @import "./components/modal.css";
@@ -20,6 +19,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/modal.css

@@ -12,7 +12,7 @@ body:has(dialog[open] .modal) {
   @apply supports-backdrop-blur:bg-blue-100/[0.85];
   @apply transition-opacity;
   padding: 2rem;
-  padding-top: calc(2rem + var(--navigation-header-height));
+  padding-top: calc(2rem + var(--top-bar-height));
 }
 
 .modal-alignment {
@@ -38,6 +38,6 @@ body:has(dialog[open] .modal) {
 
 @screen md {
   .modal-overlay-background {
-    padding: calc(2 * var(--navigation-header-height));
+    padding: calc(2 * var(--top-bar-height));
   }
 }

src/main/css/components/navigation.css

@@ -1,57 +1,66 @@
-#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;
+  left: 0;
+  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 {
@@ -132,32 +141,34 @@
     overflow: hidden;
     max-height: 0;
     top: -100%;
-    @apply bg-zinc-100;
-    z-index: 10;
+    /*@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);
+    top: var(--top-bar-height);
     max-height: 100vh !important;
   }
 }
 
 @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;
+  #menu-toggle-checkbox ~ label ~ div,
+  #menu-toggle-checkbox:checked ~ label ~ div {
+    position: static;
+    opacity: 1;
+    padding: 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 +179,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 +206,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 +229,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 +276,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;
 }