Create menubar app with Tauri

01.sh

$ npm create tauri-app

02-tauri.conf.json

"systemTray": {
  "iconPath": "icons/icon.png",
  "iconAsTemplate": true
}

03-main.rs

use tauri::{Manager, SystemTray, SystemTrayEvent, SystemTrayMenu};
fn main() {
    let system_tray_menu = SystemTrayMenu::new();
    tauri::Builder::default()
        .system_tray(SystemTray::new().with_menu(system_tray_menu))
        .on_system_tray_event(|app, event| match event {
            SystemTrayEvent::LeftClick {
                position: _,
                size: _,
                ..
            } => {
                let window = app.get_window("main").unwrap();
                // toggle application window
                if window.is_visible().unwrap() {
                    window.hide().unwrap();
                } else {
                    window.show().unwrap();
                    window.set_focus().unwrap();
                }
            },
            _ => {}
        })
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

04-cargo.toml

[dependencies]
tauri-plugin-positioner = { version = "1.0.4", features = ["system-tray"] }

05-main.rs

use tauri::{Manager, SystemTray, SystemTrayEvent, SystemTrayMenu};
use tauri_plugin_positioner::{Position, WindowExt};

fn main() {
    let system_tray_menu = SystemTrayMenu::new();
    tauri::Builder::default()
        .plugin(tauri_plugin_positioner::init())
        .system_tray(SystemTray::new().with_menu(system_tray_menu))
        .on_system_tray_event(|app, event| {
            tauri_plugin_positioner::on_tray_event(app, &event);
            match event {
                SystemTrayEvent::LeftClick {
                    position: _,
                    size: _,
                    ..
                } => {
                    let window = app.get_window("main").unwrap();
                    // use TrayCenter as initial window position
                    let _ = window.move_window(Position::TrayCenter);
                    if window.is_visible().unwrap() {
                        window.hide().unwrap();
                    } else {
                        window.show().unwrap();
                        window.set_focus().unwrap();
                    }
                }
                _ => {}
            }
        })
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

06-tauri.conf.json

{
  "fullscreen": false,
  "height": 600,
  "resizable": false,
  "title": "menubar",
  "width": 600,
  "visible": false,
  "hiddenTitle": true,
  "decorations": false,
  "focus": false,
  "transparent": false
}

07-main.rs

fn main() {
    ...
    
    tauri::Builder::default()
        .plugin(tauri_plugin_positioner::init())
        .system_tray(SystemTray::new().with_menu(system_tray_menu))
        .on_system_tray_event(|app, event| {
            ...
        })
        .on_window_event(|event| match event.event() {
            tauri::WindowEvent::Focused(is_focused) => {
                // detect click outside of the focused window and hide the app
                if !is_focused {
                    event.window().hide().unwrap();
                }
            }
            _ => {}
        })
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

08-tauri.conf.json

"systemTray": {
  "iconPath": "icons/icon.png",
  "iconAsTemplate": true,
  "menuOnLeftClick": false
}

09-main.rs

fn main() {
    let quit = CustomMenuItem::new("quit".to_string(), "Quit").accelerator("Cmd+Q");
    let system_tray_menu = SystemTrayMenu::new().add_item(quit);
    tauri::Builder::default()
    ...
    .on_system_tray_event(|app, event| {
        tauri_plugin_positioner::on_tray_event(app, &event);
        match event {
            ...
            SystemTrayEvent::MenuItemClick { id, .. } => match id.as_str() {
                "quit" => {
                    std::process::exit(0);
                }
                _ => {}
            },
            _ => {}
        }
    })

10-tauri.conf.json

...,
"macOSPrivateApi": true,
"windows": [
  {
    ...,
    "transparent": true
  }

11-style.css

body {
  margin: 0; 
}

.arrow {
  position: relative;
  padding: 12px 0;
}

.arrow:before {
  content: '';
  height: 0;
  width: 0;
  border-width: 0 8px 12px 8px;
  border-style: solid;
  border-color: transparent transparent #2f2f2f transparent;
  position: absolute;
  top: 0px;
  left: 50%;
  transform: translateX(-50%);
}

@media (prefers-color-scheme: dark) {
  .container {
    border-radius: 7px;
    padding: 10px;
    color: #f6f6f6;
    background-color: #2f2f2f;
  }
}

12-index.html

...
<body class="arrow">
...
</body>