resources/css/etc/layout.css

@@ -98,6 +98,7 @@ body {
 main {
     @apply overflow-hidden rounded-lg;
     max-height: calc(100dvh - 1rem);
+    container: main / inline-size;
 
     /* app */
     body#app & {
@@ -186,6 +187,7 @@ main {
         @apply overflow-y-auto;
         grid-template-rows: 5rem auto;
         container: content / inline-size;
+        transition: margin 200ms ease-in-out, width 200ms ease-in-out;
 
         /* main content title and actions */
         header {
@@ -208,6 +210,13 @@ main {
                 }
             }
 
+            /* expand button */
+            button.calendar-expand-toggle {
+                svg {
+                    transition: transform 150ms ease-in-out;
+                }
+            }
+
             /* header menu */
             menu {
                 @apply fixed right-0 top-2 flex flex-col bg-gray-100 gap-6 p-6 rounded-l-xl;
@@ -246,15 +255,13 @@ main {
         /* section specific */
         &#calendar {
             header {
-                h2 {
+                .calendar-expand-toggle {
-                    .calendar-expand-toggle {
+                    @apply ml-1 opacity-0 pointer-events-none transition-opacity duration-150;
-                        @apply ml-1 opacity-0 pointer-events-none transition-opacity duration-150;
+                }
-                    }
 
-                    &:hover .calendar-expand-toggle,
+                &:hover .calendar-expand-toggle,
-                    &:focus-within .calendar-expand-toggle {
+                &:focus-within .calendar-expand-toggle {
-                        @apply opacity-100 pointer-events-auto;
+                    @apply opacity-100 pointer-events-auto;
-                    }
                 }
             }
         }
@@ -262,6 +269,16 @@ main {
             /* */
         }
     }
+
+    /* expanded */
+    &.expanded {
+
+        button.calendar-expand-toggle {
+            svg {
+                transform: rotate(180deg);
+            }
+        }
+    }
 }
 
 /* container sizing */
@@ -305,8 +322,8 @@ main {
  */
 
 /* show app nav on the left at md */
-@media (width >= theme(--breakpoint-md)) {
+@media (width >= theme(--breakpoint-md))
-
+{
     body#app {
         grid-template-columns: 5rem auto;
         grid-template-rows: 1fr 0;
@@ -338,13 +355,15 @@ main {
         }
 
         main {
+
             &:has(aside) {
-                grid-template-columns: minmax(16rem, 20dvw) auto;
+                grid-template-columns: max(16rem, 20dvw) auto;
                 grid-template-rows: 1fr;
             }
 
             aside {
-                @apply bg-white overflow-y-auto h-full;
+                @apply bg-white overflow-y-auto h-full min-w-48;
+                transition: translate 200ms ease-in-out, visibility 200ms ease-in-out, opacity 200ms ease-in-out;
 
                 > h1 {
                     @apply backdrop-blur-xs sticky top-0 z-1 shrink-0 h-20 min-h-20;
@@ -355,6 +374,20 @@ main {
             article {
                 @apply w-full ml-0 pl-3 2xl:pl-4 pr-6 2xl:pr-8 rounded-l-none rounded-r-lg;
             }
+
+            /* when the calendar is expanded and aside is gone */
+            &.expanded {
+
+                aside {
+                    @apply -translate-x-6 invisible opacity-0;
+                }
+
+                article {
+                    @apply pl-6;
+                    margin-left: min(-16rem, -20dvw) !important;
+                    width: 100cqw !important;
+                }
+            }
         }
     }
 }

resources/svg/icons/collapse.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-left-to-line-icon lucide-arrow-left-to-line"><path d="M3 19V5"/><path d="m13 6-6 6 6 6"/><path d="M7 12h14"/></svg>

resources/svg/icons/expand.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right-to-line-icon lucide-arrow-right-to-line"><path d="M17 12H3"/><path d="m11 18 6-6-6-6"/><path d="M21 5v14"/></svg>

resources/views/calendar/index.blade.php

@@ -91,7 +91,7 @@
                 data-calendar-expand
                 aria-label="{{ __('calendar.toggle_sidebar') }}"
             >
-                <x-icon-chevron-left />
+                <x-icon-collapse />
             </button>
         </h2>
         <menu>