List Files | Just Commands | Repo | Logs

← back | Copy

<!-- UnAuthLayout.vue - Simple layout without authentication dependencies -->
<template>
  <ion-page>
    <ion-header>
      <ion-toolbar>
        <ion-title>{{ title }}</ion-title>
        <ion-buttons slot="end">
          <ion-button fill="clear" @click="toggleDarkMode">
            <ion-icon
              :icon="darkMode ? sunnyOutline : moonOutline"
            />
          </ion-button>
        </ion-buttons>
      </ion-toolbar>
    </ion-header>

    <ion-content>
      <slot />
    </ion-content>
  </ion-page>
</template>

<script setup lang="ts">
import { ref } from "vue";
import {
  IonButton,
  IonButtons,
  IonContent,
  IonHeader,
  IonIcon,
  IonPage,
  IonTitle,
  IonToolbar,
} from "@ionic/vue";

import { sunnyOutline, moonOutline } from "ionicons/icons";

defineProps<{
  title: string;
}>();

// Simple dark mode toggle without store dependencies
const darkMode = ref(localStorage.getItem('darkMode') === 'true');

const toggleDarkMode = () => {
  darkMode.value = !darkMode.value;
  localStorage.setItem('darkMode', darkMode.value.toString());
  document.documentElement.classList.toggle("ion-palette-dark", darkMode.value);
};

// Initialize dark mode on component mount
document.documentElement.classList.toggle("ion-palette-dark", darkMode.value);
</script>