From 8e6abceb2754990016de89762c1b2463ff5ec6b5 Mon Sep 17 00:00:00 2001
From: jcesarmobile <jcesarmobile@gmail.com>
Date: Tue, 13 Jan 2026 16:08:46 +0100
Subject: [PATCH 1/2] feat: Add SystemBars plugin page

---
 src/pages/SystemBars.tsx | 78 ++++++++++++++++++++++++++++++++++++++++
 src/routes.tsx           | 11 ++++++
 2 files changed, 89 insertions(+)
 create mode 100644 src/pages/SystemBars.tsx

diff --git a/src/pages/SystemBars.tsx b/src/pages/SystemBars.tsx
new file mode 100644
index 00000000..8200f148
--- /dev/null
+++ b/src/pages/SystemBars.tsx
@@ -0,0 +1,78 @@
+import {
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonPage,
+  IonMenuButton,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/react';
+import React from 'react';
+import { SystemBars, SystemBarsStyle, SystemBarType } from '@capacitor/core';
+
+const SystemBarsPage: React.FC = () => {
+
+  const setSystemBarStyleDefault = async () => {
+    SystemBars.setStyle({
+      style: SystemBarsStyle.Default,
+    });
+  };
+
+  const setSystemBarStyleLight = async () => {
+    await SystemBars.setStyle({ style: SystemBarsStyle.Light });
+  };
+
+  const setSystemBarStyleDark = async () => {
+    await SystemBars.setStyle({ style: SystemBarsStyle.Dark });
+  };
+
+  const showSystemBars = async () => {
+    await SystemBars.show();
+  };
+
+  const hideSystemBars = async () => {
+    await SystemBars.hide();
+  };
+
+  const hideNavigationBar = async () => {
+  await SystemBars.hide({
+    bar: SystemBarType.NavigationBar
+  })
+}
+
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonButtons slot="start">
+            <IonMenuButton />
+          </IonButtons>
+          <IonTitle>System Bars</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent>
+        <IonButton expand="block" onClick={setSystemBarStyleDefault}>
+          Change System Bars Style Default
+        </IonButton>
+        <IonButton expand="block" onClick={setSystemBarStyleLight}>
+          Change System Bars Style Light
+        </IonButton>
+        <IonButton expand="block" onClick={setSystemBarStyleDark}>
+          Change System Bars Style Dark
+        </IonButton>
+        <IonButton expand="block" onClick={showSystemBars}>
+          Show System Bars
+        </IonButton>
+        <IonButton expand="block" onClick={hideSystemBars}>
+          Hide System Bars
+        </IonButton>
+        <IonButton expand="block" onClick={hideNavigationBar}>
+          Hide Navigation Bar
+        </IonButton>
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default SystemBarsPage;
diff --git a/src/routes.tsx b/src/routes.tsx
index 5b6a5997..37f2ab3a 100644
--- a/src/routes.tsx
+++ b/src/routes.tsx
@@ -23,6 +23,7 @@ import ScreenOrientation from './pages/ScreenOrientation';
 import SharePage from './pages/Share';
 import SplashScreenPage from './pages/SplashScreen';
 import StatusBarPage from './pages/StatusBar';
+import SystemBarsPage from './pages/SystemBars';
 import Preferences from './pages/Preferences';
 import TextZoom from './pages/TextZoom';
 import ToastPage from './pages/Toast';
@@ -265,6 +266,16 @@ const routes: Page[] = [
     ),
     component: StatusBarPage,
   },
+  {
+    title: 'System Bars',
+    url: '/system-bars',
+    icon: (
+      <span role="img" aria-label="vertical traffic light">
+        🚦
+      </span>
+    ),
+    component: SystemBarsPage,
+  },
   {
     title: 'Preferences',
     url: '/preferences',

From 7471a37e48ebf394616d7d52a48854ab05207ff7 Mon Sep 17 00:00:00 2001
From: jcesarmobile <jcesarmobile@gmail.com>
Date: Tue, 13 Jan 2026 16:11:01 +0100
Subject: [PATCH 2/2] fmt

---
 src/pages/SystemBars.tsx | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/pages/SystemBars.tsx b/src/pages/SystemBars.tsx
index 8200f148..752f3980 100644
--- a/src/pages/SystemBars.tsx
+++ b/src/pages/SystemBars.tsx
@@ -12,7 +12,6 @@ import React from 'react';
 import { SystemBars, SystemBarsStyle, SystemBarType } from '@capacitor/core';
 
 const SystemBarsPage: React.FC = () => {
-
   const setSystemBarStyleDefault = async () => {
     SystemBars.setStyle({
       style: SystemBarsStyle.Default,
@@ -36,10 +35,10 @@ const SystemBarsPage: React.FC = () => {
   };
 
   const hideNavigationBar = async () => {
-  await SystemBars.hide({
-    bar: SystemBarType.NavigationBar
-  })
-}
+    await SystemBars.hide({
+      bar: SystemBarType.NavigationBar,
+    });
+  };
 
   return (
     <IonPage>