Fullscreen button

src/html/components/dashboard/_topbar.astro

@@ -154,6 +154,15 @@ const distPath = path;
       </li>
       <!--end::Notifications Dropdown Menu-->
 
+      <!--begin::Fullscreen Toggle-->
+      <li class="nav-item">
+        <a class="nav-link" href="#" data-lte-toggle="fullscreen">
+          <i data-lte-icon="maximize" class="bi bi-arrows-fullscreen"></i>
+          <i data-lte-icon="minimize" class="bi bi-fullscreen-exit" style="display: none;"></i>
+        </a>
+      </li>
+      <!--end::Fullscreen Toggle-->
+
       <!--begin::User Menu Dropdown-->
       <li class="nav-item dropdown user-menu">
         <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
@@ -172,7 +181,6 @@ const distPath = path;
               class="rounded-circle shadow"
               alt="User Image"
             />
-
             <p>
               Alexander Pierce - Web Developer
               <small>Member since Nov. 2023</small>

src/ts/adminlte.ts

@@ -3,11 +3,13 @@ import PushMenu from './push-menu'
 import Treeview from './treeview'
 import DirectChat from './direct-chat'
 import CardWidget from './card-widget'
+import FullScreen from './fullscreen'
 
 export {
   Layout,
   PushMenu,
   Treeview,
   DirectChat,
-  CardWidget
+  CardWidget,
+  FullScreen
 }

src/ts/fullscreen.ts

@@ -0,0 +1,109 @@
+/**
+ * ----------------------------------------------------------------------------
+ * AdminLTE fullscreen.ts
+ * License MIT
+ * ----------------------------------------------------------------------------
+ */
+
+import {
+  onDOMContentLoaded
+} from './util/index'
+
+/**
+ * Constants
+ * ============================================================================
+ */
+const DATA_KEY = 'lte.fullscreen'
+const EVENT_KEY = `.${DATA_KEY}`
+const EVENT_MAXIMIZED = `maximized${EVENT_KEY}`
+const EVENT_MINIMIZED = `minimized${EVENT_KEY}`
+
+const SELECTOR_FULLSCREEN_TOGGLE = '[data-lte-toggle="fullscreen"]'
+const SELECTOR_MAXIMIZE_ICON = '[data-lte-icon="maximize"]'
+const SELECTOR_MINIMIZE_ICON = '[data-lte-icon="minimize"]'
+
+/**
+ * Class Definition.
+ * ============================================================================
+ */
+class FullScreen {
+  _element: HTMLElement
+  _config: undefined
+
+  constructor(element: HTMLElement, config?: undefined) {
+    this._element = element
+    this._config = config
+  }
+
+  inFullScreen(): void {
+    const event = new Event(EVENT_MAXIMIZED)
+
+    const iconMaximize = document.querySelector<HTMLElement>(SELECTOR_MAXIMIZE_ICON)
+    const iconMinimize = document.querySelector<HTMLElement>(SELECTOR_MINIMIZE_ICON)
+
+    void document.documentElement.requestFullscreen()
+
+    if (iconMaximize) {
+      iconMaximize.style.display = 'none'
+    }
+
+    if (iconMinimize) {
+      iconMinimize.style.display = 'block'
+    }
+
+    this._element.dispatchEvent(event)
+  }
+
+  outFullscreen(): void {
+    const event = new Event(EVENT_MINIMIZED)
+
+    const iconMaximize = document.querySelector<HTMLElement>(SELECTOR_MAXIMIZE_ICON)
+    const iconMinimize = document.querySelector<HTMLElement>(SELECTOR_MINIMIZE_ICON)
+
+    void document.exitFullscreen()
+
+    if (iconMaximize) {
+      iconMaximize.style.display = 'block'
+    }
+
+    if (iconMinimize) {
+      iconMinimize.style.display = 'none'
+    }
+
+    this._element.dispatchEvent(event)
+  }
+
+  toggleFullScreen(): void {
+    if (document.fullscreenEnabled) {
+      if (document.fullscreenElement) {
+        this.outFullscreen()
+      } else {
+        this.inFullScreen()
+      }
+    }
+  }
+}
+
+/**
+ * Data Api implementation
+ * ============================================================================
+ */
+onDOMContentLoaded(() => {
+  const buttons = document.querySelectorAll(SELECTOR_FULLSCREEN_TOGGLE)
+
+  buttons.forEach(btn => {
+    btn.addEventListener('click', event => {
+      event.preventDefault()
+
+      const target = event.target as HTMLElement
+      const button = target.closest(SELECTOR_FULLSCREEN_TOGGLE) as HTMLElement | undefined
+
+      if (button) {
+        const data = new FullScreen(button, undefined)
+        data.toggleFullScreen()
+      }
+    })
+  })
+})
+
+export default FullScreen