Merge pull request #230 from PrefectHQ/fix-mobile-menu

demo/App.vue

@@ -1,18 +1,79 @@
 <template>
   <div class="max-w-full min-h-full app">
-    <!-- TODO: Break out icons, typography, colors (new), compositions (new) into their own pages -->
-    <SidebarsSection />
+    <template v-if="!media.lg">
+      <PGlobalSidebar class="app__mobile-menu">
+        <template #upper-links>
+          <p-icon icon="PrefectGradient" class="app__prefect-icon" />
+        </template>
+        <template #bottom-links>
+          <PIcon icon="MenuIcon" class="app__menu-icon" @click="toggle" />
+        </template>
+      </PGlobalSidebar>
+    </template>
+    <ContextSidebar v-if="showMenu" class="app__sidebar" @click="close" />
     <router-view class="w-full mx-auto py-10 sm:px-6 lg:px-8" />
   </div>
 </template>
 
 <script lang="ts" setup>
-  import SidebarsSection from './sections/SidebarsSection.vue'
+  import { computed, ref, watchEffect } from 'vue'
+  import ContextSidebar from './components/ContextSidebar.vue'
+  import { media } from '@/utilities/media'
+
+  const mobileMenuOpen = ref(false)
+  const showMenu = computed(() => media.lg || mobileMenuOpen.value)
+
+  function toggle(): void {
+    mobileMenuOpen.value = !mobileMenuOpen.value
+  }
+
+  function close(): void {
+    mobileMenuOpen.value = false
+  }
+
+  watchEffect(() => document.body.classList.toggle('body-scrolling-disabled', showMenu.value && !media.lg))
 </script>
 
 <style>
-.app {
-  display: grid;
-  grid-template-columns: 256px minmax(0, 1fr);
+.body-scrolling-disabled { @apply
+  overflow-hidden
+}
+
+.app { @apply
+  text-slate-900;
+}
+
+.app__prefect-icon { @apply
+  w-6
+  h-6
+}
+
+.app__menu-icon { @apply
+  text-white
+  w-6
+  h-6
+  cursor-pointer
+}
+
+.app__router-view { @apply
+  relative
+  z-0
+}
+
+.app__router-view-fade-enter-active,
+.app__router-view-fade-leave-active {
+  transition: opacity 0.25s ease;
+}
+
+.app__router-view-fade-enter-from,
+.app__router-view-fade-leave-to {
+  opacity: 0;
+}
+
+@screen lg {
+  .app {
+    display: grid;
+    grid-template-columns: max-content minmax(0, 1fr);
+  }
 }
 </style>

demo/sections/ContextSidebarSection.vue → demo/components/ContextSidebar.vue

@@ -11,26 +11,5 @@
     <p-context-nav-item title="Icons" icon="AdjustmentsIcon" to="/icons" />
     <p-context-divider />
     <p-context-nav-item title="Layouts" icon="TemplateIcon" to="/layouts" />
-
-    <template #footer>
-      <p-button inset class="justify-center" @click="toggleGlobalSidebar">
-        Show Global Sidebar
-      </p-button>
-    </template>
   </p-context-sidebar>
-</template>
-
-<script lang="ts" setup>
-  import { ref } from 'vue'
-
-  const emit = defineEmits<{
-    (event: 'update:value', value: boolean): void,
-  }>()
-
-  const showGlobalSidebar = ref(false)
-
-  const toggleGlobalSidebar = (): void => {
-    showGlobalSidebar.value = !showGlobalSidebar.value
-    emit('update:value', showGlobalSidebar.value)
-  }
-</script>
+</template>