feat(presenter): adding a third presenter view layout. (#1980)

Co-authored-by: Anthony Fu <[email protected]>

Author: krisajenkins

packages/client/internals/NavControls.vue

@@ -131,7 +131,7 @@ if (__SLIDEV_FEATURE_RECORD__)
           <div class="i-carbon:text-annotation-toggle" />
         </IconButton>
 
-        <IconButton v-if="isPresenter" title="Toggle Presenter Layout" class="aspect-ratio-initial" @click="togglePresenterLayout">
+        <IconButton v-if="isPresenter" title="Toggle Presenter Layout" class="aspect-ratio-initial flex items-center" @click="togglePresenterLayout">
           <div class="i-carbon:template" />
           {{ presenterLayout }}
         </IconButton>

packages/client/pages/presenter.vue

@@ -247,6 +247,15 @@ onMounted(() => {
     'bottom bottom';
 }
 
+.grid-container.layout3 {
+  grid-template-columns: 2fr 3fr;
+  grid-template-rows: 1fr 1fr min-content;
+  grid-template-areas:
+    'note next'
+    'main next'
+    'bottom bottom';
+}
+
 @media (max-aspect-ratio: 3/5) {
   .grid-container.layout1 {
     grid-template-columns: 1fr;

packages/client/state/index.ts

@@ -40,7 +40,7 @@ export const presenterLayout = useLocalStorage('slidev-presenter-layout', 1, { l
 
 export function togglePresenterLayout() {
   presenterLayout.value = presenterLayout.value + 1
-  if (presenterLayout.value > 2)
+  if (presenterLayout.value > 3)
     presenterLayout.value = 1
 }