15 |
--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | ## Before opening issues
2 |
3 | **If you are asking a question**:
4 |
5 | Remember that `menubar` is just a lightweight wrapper around Electron. Most of the time you can probably find the answer to your question already answered in the [Electron Issue Tracker](https://github.com/electron/electron/issues)
6 |
7 | **For bug reports/technical issues**:
8 |
9 | Please provide the following information when opening issues:
10 |
11 | - Which version of menubar are you using?
12 | - What cli arguments are you passing?
13 | - What platform are you running menubar on?
14 | - Is there a stack trace in the error message you're seeing?
15 | - If possible, please provide instructions to reproduce your problem.
16 |
17 | Thanks!
18 |
19 | ## Releases
20 |
21 | - commit your changes
22 | - `npm version `
23 | - `git push && git push --tags` (or `git push` with `git config --global push.followTags true` on latest git)
24 | - `npm publish`
25 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | BSD 2-Clause License
2 |
3 | Copyright (c) 2015-2019, Max Ogden
4 | All rights reserved.
5 |
6 | Redistribution and use in source and binary forms, with or without
7 | modification, are permitted provided that the following conditions are met:
8 |
9 | * Redistributions of source code must retain the above copyright notice, this
10 | list of conditions and the following disclaimer.
11 |
12 | * Redistributions in binary form must reproduce the above copyright notice,
13 | this list of conditions and the following disclaimer in the documentation
14 | and/or other materials provided with the distribution.
15 |
16 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
17 | AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
18 | IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
19 | DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
20 | FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
21 | DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
22 | SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
23 | CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
24 | OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
25 | OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
26 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | 
2 | [](https://www.npmjs.com/package/menubar)
3 | 
4 | 
5 | 
6 |
7 |
8 |
9 |
➖ Menubar
10 |
High level way to create menubar desktop applications with Electron.
11 |
12 |
13 |
14 | This module provides boilerplate for setting up a menubar application using Electron. All you have to do is point it at your `index.html` and `menubar` will handle the rest.
15 |
16 | ✅ Only one dependency, and one peer-dependency.
17 |
18 | ✅ Works on macOS, Windows and most Linuxes. See [details](./WORKING_PLATFORMS.md).
19 |
20 | ✅ 💥 [**3.6kB minified + gzipped**](https://bundlephobia.com/result?p=menubar) 💥
21 |
22 | | | | |
23 | | :-----------------------------------------------------------: | :--------------------------------------------------------: | :------------------------------------------------------: |
24 | | macOS Mojave 10.14 | Windows 10 | Ubuntu 18.04 |
25 |
26 | ## Installation
27 |
28 | ```bash
29 | yarn add menubar
30 | ```
31 |
32 | ## Usage
33 |
34 | Starting with your own new project, run these commands:
35 |
36 | ```bash
37 | $ yarn add menubar
38 | $ touch myApp.js
39 | $ touch index.html
40 | ```
41 |
42 | Fill `index.html` with some HTML, and `myApp.js` like this:
43 |
44 | ```javascript
45 | const { menubar } = require('menubar');
46 |
47 | const mb = menubar();
48 |
49 | mb.on('ready', () => {
50 | console.log('app is ready');
51 | // your app code here
52 | });
53 | ```
54 |
55 | Then use `electron` to run the app:
56 |
57 | ```bash
58 | $ electron myApp.js
59 | ```
60 |
61 | Alternatively, see [`examples/hello-world`](/examples/hello-world) folder for a simple working example.
62 |
63 | ## `Menubar` Class
64 |
65 | The return value of `menubar()` is a `Menubar` class instance, which has these properties:
66 |
67 | - `app`: the [Electron App](https://electronjs.org/docs/api/app) instance,
68 | - `window`: the [Electron Browser Window](https://electronjs.org/docs/api/browser-window) instance,
69 | - `tray`: the [Electron Tray](https://electronjs.org/docs/api/tray) instance,
70 | - `positioner`: the [Electron Positioner](https://github.com/jenslind/electron-positioner) instance,
71 | - `setOption(option, value)`: change an option after menubar is created,
72 | - `getOption(option)`: get an menubar option,
73 | - `showWindow()`: show the menubar window,
74 | - `hideWindow()`: hide the menubar window
75 |
76 | See the reference [API docs](./docs/classes/_menubar_.menubar.md).
77 |
78 | ## `menubar()` Options
79 |
80 | You can pass an optional options object into the `menubar({ ... })` function:
81 |
82 | - `dir` (default `process.cwd()`) - the app source directory
83 | - `index` (default `file:// + opts.dir + index.html`) - The URL to load the menubar's browserWindow with. The url can be a remote address (e.g. `http://`) or a path to a local HTML file using the `file://` protocol.
84 | - `browserWindow` - BrowserWindow options to be passed to the BrowserWindow constructor, see [Electron docs](https://electronjs.org/docs/api/browser-window#new-browserwindowoptions). Some interesting fields to passed down are:
85 | - `x` (default `undefined`) - the x position of the window
86 | - `y` (default `undefined`) - the y position of the window
87 | - `width` (default 400) - window width
88 | - `height` (default 400) - window height
89 | - `alwaysOnTop` (default false) - if true, the window will not hide on blur
90 | - `icon` (default `opts.dir + IconTemplate.png`) - the png icon to use for the menubar. A good size to start with is 20x20. To support retina, supply a 2x sized image (e.g. 40x40) with `@2x` added to the end of the name, so `icon.png` and `icon@2x.png` and Electron will automatically use your `@2x` version on retina screens.
91 | - `tooltip` (default empty) - menubar tray icon tooltip text
92 | - `tray` (default created on-the-fly) - an electron `Tray` instance. if provided `opts.icon` will be ignored
93 | - `preloadWindow` (default false) - Create [BrowserWindow](https://electronjs.org/docs/api/browser-window#new-browserwindowoptions) instance before it is used -- increasing resource usage, but making the click on the menubar load faster.
94 | - `loadUrlOptions` - (default undefined) The options passed when loading the index URL in the menubar's browserWindow. Everything browserWindow.loadURL supports is supported; this object is simply passed onto [browserWindow.loadURL](https://electronjs.org/docs/api/browser-window#winloadurlurl-options)
95 | - `showOnAllWorkspaces` (default true) - Makes the window available on all OS X workspaces.
96 | - `windowPosition` (default trayCenter and trayBottomCenter on Windows) - Sets the window position (x and y will still override this), check [positioner docs](https://github.com/jenslind/electron-positioner#docs) for valid values.
97 | - `showDockIcon` (default false) - Configure the visibility of the application dock icon.
98 | - `showOnRightClick` (default false) - Show the window on 'right-click' event instead of regular 'click'
99 |
100 | See the reference [API docs](./docs/interfaces/_types_.options.md).
101 |
102 | ## Events
103 |
104 | The `Menubar` class is an event emitter:
105 |
106 | - `ready` - when `menubar`'s tray icon has been created and initialized, i.e. when `menubar` is ready to be used. Note: this is different than Electron app's `ready` event, which happens much earlier in the process
107 | - `create-window` - the line before `new BrowserWindow()` is called
108 | - `before-load` - after create window, before loadUrl (can be used for `require("@electron/remote/main").enable(webContents)`)
109 | - `after-create-window` - the line after all window init code is done and url was loaded
110 | - `show` - the line before `window.show()` is called
111 | - `after-show` - the line after `window.show()` is called
112 | - `hide` - the line before `window.hide()` is called (on window blur)
113 | - `after-hide` - the line after `window.hide()` is called
114 | - `after-close` - after the `.window` (BrowserWindow) property has been deleted
115 | - `focus-lost` - emitted if always-on-top option is set and the user clicks away
116 |
117 | ## Compatibility with Electron
118 |
119 | | menubar | Electron | Notes |
120 | | -------- | -------------------------- | -------------------------------------------------------------------------------------------------------------------------- |
121 | | 9.x.x | >=9.x.x <33.x.x | |
122 | | 8.x.x | 8.x.xx | |
123 | | 7.x.x | 7.x.xx | |
124 | | 6.x.x | >=4.x.x <7.x.x | Not recommended for [security reasons](https://electronjs.org/docs/tutorial/security#17-use-a-current-version-of-electron) |
125 | | <= 5.x.x | <= 3.x.x | Please, _please_ don't use these old versions |
126 |
127 | ## API Docs
128 |
129 | See the reference [API docs](./docs/globals.md).
130 |
131 | ## Tips
132 |
133 | - Use `mb.on('after-create-window', callback)` to run things after your app has loaded. For example you could run `mb.window.openDevTools()` to open the developer tools for debugging, or load a different URL with `mb.window.loadURL()`
134 | - Use `mb.on('focus-lost')` if you would like to perform some operation when using the option `browserWindow.alwaysOnTop: true`
135 | - To restore focus of previous window after menubar hide, use `mb.on('after-hide', () => { mb.app.hide() } )` or similar
136 | - To create a native menu, you can use `tray.setContextMenu(contextMenu)`, and pass this custom tray to menubar: `const mb = menubar({ tray });`. See [this example](https://github.com/maxogden/menubar/tree/master/examples/native-menu) for more information.
137 | - To avoid a flash when opening your menubar app, you can disable backgrounding the app using the following: `mb.app.commandLine.appendSwitch('disable-backgrounding-occluded-windows', 'true');`
138 |
--------------------------------------------------------------------------------
/WORKING_PLATFORMS.md:
--------------------------------------------------------------------------------
1 | # Platforms where `menubar` is known to work
2 |
3 | This document is still a work-in-progress. If you have tested `menubar` with a platform that is not listed under here, I would greatly appreciate a PR!
4 |
5 | ## macOS
6 |
7 | | Version | Working Status | Known Issues |
8 | | ----------------- | -------------- | -------------------------------------------------------------------------------------------------------------- |
9 | | 14.15 Sonoma | ✅ Good | |
10 | | 10.14 Mojave | ✅ Good | [#147](https://github.com/maxogden/menubar/issues/147), [#215](https://github.com/maxogden/menubar/issues/215) |
11 | | 10.13 High Sierra | ✅ Good | |
12 |
13 | ## Windows
14 |
15 | | Version | Working Status | Known Issues |
16 | | ---------- | -------------- | ------------ |
17 | | Windows 11 | ✅ Good | |
18 | | Windows 10 | ✅ Good | |
19 | | Windows 8 | ✅ Good | |
20 |
21 | ## Linux
22 |
23 | | Distribution | Desktop Environment | Working Status | Known Issues |
24 | | ------------- | ------------------- | -------------- | ------------------------------------------------------ |
25 | | openSUSE 13.1 | Xfce 4.10.1 | ❌ Bad | [#123](https://github.com/maxogden/menubar/issues/123) |
26 | | Ubuntu 18.04 | Unity | ✅ Good | |
27 | | Ubuntu 14.04 | Unity | ❌ Bad | [#68](https://github.com/maxogden/menubar/issues/68) |
28 |
--------------------------------------------------------------------------------
/assets/Icon.icns:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/max-mapper/menubar/6aa6df7aa8f6e5758aa5e48a3020caad264bfa73/assets/Icon.icns
--------------------------------------------------------------------------------
/assets/IconTemplate.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/max-mapper/menubar/6aa6df7aa8f6e5758aa5e48a3020caad264bfa73/assets/IconTemplate.png
--------------------------------------------------------------------------------
/assets/IconTemplate@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/max-mapper/menubar/6aa6df7aa8f6e5758aa5e48a3020caad264bfa73/assets/IconTemplate@2x.png
--------------------------------------------------------------------------------
/assets/screenshot-linux.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/max-mapper/menubar/6aa6df7aa8f6e5758aa5e48a3020caad264bfa73/assets/screenshot-linux.png
--------------------------------------------------------------------------------
/assets/screenshot-macos-dark.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/max-mapper/menubar/6aa6df7aa8f6e5758aa5e48a3020caad264bfa73/assets/screenshot-macos-dark.png
--------------------------------------------------------------------------------
/assets/screenshot-windows.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/max-mapper/menubar/6aa6df7aa8f6e5758aa5e48a3020caad264bfa73/assets/screenshot-windows.png
--------------------------------------------------------------------------------
/biome.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://biomejs.dev/schemas/1.9.3/schema.json",
3 | "organizeImports": {
4 | "enabled": true
5 | },
6 | "linter": {
7 | "enabled": true,
8 | "rules": {
9 | "recommended": true,
10 | "style": {
11 | "noParameterAssign": "warn",
12 | "noNonNullAssertion": "warn",
13 | "useNodejsImportProtocol": "warn"
14 | },
15 | "suspicious": {
16 | "noAssignInExpressions": "warn"
17 | }
18 | }
19 | },
20 | "vcs": {
21 | "enabled": true,
22 | "clientKind": "git",
23 | "useIgnoreFile": true
24 | },
25 | "formatter": {
26 | "enabled": true,
27 | "indentStyle": "space",
28 | "indentWidth": 2
29 | },
30 | "javascript": {
31 | "formatter": {
32 | "quoteStyle": "single",
33 | "jsxQuoteStyle": "double"
34 | }
35 | },
36 | "json": {
37 | "parser": {
38 | "allowComments": true
39 | }
40 | }
41 | }
42 |
--------------------------------------------------------------------------------
/docs/README.md:
--------------------------------------------------------------------------------
1 | > **[menubar](README.md)**
2 |
3 | [Globals](globals.md) /
4 |
5 | [](https://travis-ci.org/maxogden/menubar)
6 | [](https://www.npmjs.com/package/@maxogden/menubar)
7 | [](https://david-dm.org/maxogden/menubar)
8 | 
9 | 
10 |
11 |
12 |
13 |
➖ Menubar
14 |
High level way to create menubar desktop applications with Electron.
15 |
16 |
17 |
18 | This module provides boilerplate for setting up a menubar application using Electron. All you have to do is point it at your `index.html` and `menubar` will handle the rest.
19 |
20 | ✅ Only one dependency, and one peer-dependency.
21 |
22 | ✅ Works on macOS, Windows and most Linuxes. See [details](./WORKING_PLATFORMS.md).
23 |
24 | ✅ 💥 [**3.6kB minified + gzipped**](https://bundlephobia.com/result?p=menubar) 💥
25 |
26 | | | | |
27 | | :-----------------------------------------------------------: | :--------------------------------------------------------: | :------------------------------------------------------: |
28 | | macOS Mojave 10.14 | Windows 10 | Ubuntu 18.04 |
29 |
30 | ## Installation
31 |
32 | ```bash
33 | yarn add menubar
34 | ```
35 |
36 | ## Usage
37 |
38 | Starting with your own new project, run these commands:
39 |
40 | ```bash
41 | $ yarn add menubar
42 | $ touch myApp.js
43 | $ touch index.html
44 | ```
45 |
46 | Fill `index.html` with some HTML, and `myApp.js` like this:
47 |
48 | ```javascript
49 | const { menubar } = require('menubar');
50 |
51 | const mb = menubar();
52 |
53 | mb.on('ready', () => {
54 | console.log('app is ready');
55 | // your app code here
56 | });
57 | ```
58 |
59 | Then use `electron` to run the app:
60 |
61 | ```bash
62 | $ electron myApp.js
63 | ```
64 |
65 | Alternatively, see [`examples/hello-world`](/examples/hello-world) folder for a simple working example.
66 |
67 | ## `Menubar` Class
68 |
69 | The return value of `menubar()` is a `Menubar` class instance, which has these properties:
70 |
71 | - `app`: the [Electron App](https://electronjs.org/docs/api/app) instance,
72 | - `window`: the [Electron Browser Window](https://electronjs.org/docs/api/browser-window) instance,
73 | - `tray`: the [Electron Tray](https://electronjs.org/docs/api/tray) instance,
74 | - `positioner`: the [Electron Positioner](https://github.com/jenslind/electron-positioner) instance,
75 | - `setOption(option, value)`: change an option after menubar is created,
76 | - `getOption(option)`: get an menubar option,
77 | - `showWindow()`: show the menubar window,
78 | - `hideWindow()`: hide the menubar window
79 |
80 | See the reference [API docs](./docs/classes/_menubar_.menubar.md).
81 |
82 | ## `menubar()` Options
83 |
84 | You can pass an optional options object into the `menubar({ ... })` function:
85 |
86 | - `dir` (default `process.cwd()`) - the app source directory
87 | - `index` (default `file:// + opts.dir + index.html`) - The URL to load the menubar's browserWindow with. The url can be a remote address (e.g. `http://`) or a path to a local HTML file using the `file://` protocol.
88 | - `browserWindow` - BrowserWindow options to be passed to the BrowserWindow constructor, see [Electron docs](https://electronjs.org/docs/api/browser-window#new-browserwindowoptions). Some interesting fields to passed down are:
89 | - `x` (default `undefined`) - the x position of the window
90 | - `y` (default `undefined`) - the y position of the window
91 | - `width` (default 400) - window width
92 | - `height` (default 400) - window height
93 | - `alwaysOnTop` (default false) - if true, the window will not hide on blur
94 | - `icon` (default `opts.dir + IconTemplate.png`) - the png icon to use for the menubar. A good size to start with is 20x20. To support retina, supply a 2x sized image (e.g. 40x40) with `@2x` added to the end of the name, so `icon.png` and `icon@2x.png` and Electron will automatically use your `@2x` version on retina screens.
95 | - `tooltip` (default empty) - menubar tray icon tooltip text
96 | - `tray` (default created on-the-fly) - an electron `Tray` instance. if provided `opts.icon` will be ignored
97 | - `preloadWindow` (default false) - Create [BrowserWindow](https://electronjs.org/docs/api/browser-window#new-browserwindowoptions) instance before it is used -- increasing resource usage, but making the click on the menubar load faster.
98 | - `showOnAllWorkspaces` (default true) - Makes the window available on all OS X workspaces.
99 | - `windowPosition` (default trayCenter and trayBottomCenter on Windows) - Sets the window position (x and y will still override this), check [positioner docs](https://github.com/jenslind/electron-positioner#docs) for valid values.
100 | - `showDockIcon` (default false) - Configure the visibility of the application dock icon.
101 | - `showOnRightClick` (default false) - Show the window on 'right-click' event instead of regular 'click'
102 |
103 | See the reference [API docs](./docs/interfaces/_types_.options.md).
104 |
105 | ## Events
106 |
107 | The `Menubar` class is an event emitter:
108 |
109 | - `ready` - when `menubar`'s tray icon has been created and initialized, i.e. when `menubar` is ready to be used. Note: this is different than Electron app's `ready` event, which happens much earlier in the process
110 | - `create-window` - the line before `new BrowserWindow()` is called
111 | - `after-create-window` - the line after all window init code is done
112 | - `show` - the line before `window.show()` is called
113 | - `after-show` - the line after `window.show()` is called
114 | - `hide` - the line before `window.hide()` is called (on window blur)
115 | - `after-hide` - the line after `window.hide()` is called
116 | - `after-close` - after the `.window` (BrowserWindow) property has been deleted
117 | - `focus-lost` - emitted if always-on-top option is set and the user clicks away
118 |
119 | ## Compatibility with Electron
120 |
121 | | menubar | Electron | Notes |
122 | | -------- | ----------------------- | -------------------------------------------------------------------------------------------------------------------------- |
123 | | 7.x.x | 7.x.x |
124 | | 6.x.x | 4.x.x \| 5.x.x \| 6.x.x | Not recommended for [security reasons](https://electronjs.org/docs/tutorial/security#17-use-a-current-version-of-electron) |
125 | | <= 5.x.x | <= 3.x.x | Please, _please_ don't use these old versions |
126 |
127 | ## API Docs
128 |
129 | See the reference [API docs](./docs/globals.md).
130 |
131 | ## Tips
132 |
133 | - Use `mb.on('after-create-window', callback)` to run things after your app has loaded. For example you could run `mb.window.openDevTools()` to open the developer tools for debugging, or load a different URL with `mb.window.loadUrl()`
134 | - Use `mb.on('focus-lost')` if you would like to perform some operation when using the option `browserWindow.alwaysOnTop: true`
135 | - To restore focus of previous window after menubar hide, use `mb.on('after-hide', () => { mb.app.hide() } )` or similar
136 | - To create a native menu, you can use `tray.setContextMenu(contextMenu)`, and pass this custom tray to menubar: `const mb = menubar({ tray });`. See [this example](https://github.com/maxogden/menubar/tree/master/examples/native-menu) for more information.
137 | - To avoid a flash when opening your menubar app, you can disable backgrounding the app using the following: `mb.app.commandLine.appendSwitch('disable-backgrounding-occluded-windows', 'true');`
--------------------------------------------------------------------------------
/docs/classes/_menubar_.menubar.md:
--------------------------------------------------------------------------------
1 | > **[menubar](../README.md)**
2 |
3 | [Globals](../globals.md) / ["Menubar"](../modules/_menubar_.md) / [Menubar](_menubar_.menubar.md) /
4 |
5 | # Class: Menubar
6 |
7 | ## Hierarchy
8 |
9 | * `EventEmitter`
10 |
11 | * **Menubar**
12 |
13 | ## Index
14 |
15 | ### Constructors
16 |
17 | * [constructor](_menubar_.menubar.md#constructor)
18 |
19 | ### Accessors
20 |
21 | * [app](_menubar_.menubar.md#app)
22 | * [positioner](_menubar_.menubar.md#positioner)
23 | * [tray](_menubar_.menubar.md#tray)
24 | * [window](_menubar_.menubar.md#window)
25 |
26 | ### Methods
27 |
28 | * [getOption](_menubar_.menubar.md#getoption)
29 | * [hideWindow](_menubar_.menubar.md#hidewindow)
30 | * [setOption](_menubar_.menubar.md#setoption)
31 | * [showWindow](_menubar_.menubar.md#showwindow)
32 |
33 | ## Constructors
34 |
35 | ### constructor
36 |
37 | \+ **new Menubar**(`app`: `App`, `options?`: `Partial`): *[Menubar](_menubar_.menubar.md)*
38 |
39 | *Defined in [Menubar.ts:24](https://github.com/adam-lynch/menubar/blob/6b93752/src/Menubar.ts#L24)*
40 |
41 | **Parameters:**
42 |
43 | Name | Type |
44 | ------ | ------ |
45 | `app` | `App` |
46 | `options?` | `Partial` |
47 |
48 | **Returns:** *[Menubar](_menubar_.menubar.md)*
49 |
50 | ## Accessors
51 |
52 | ### app
53 |
54 | • **app**:
55 |
56 | *Defined in [Menubar.ts:47](https://github.com/adam-lynch/menubar/blob/6b93752/src/Menubar.ts#L47)*
57 |
58 | ___
59 |
60 | ### positioner
61 |
62 | • **positioner**:
63 |
64 | *Defined in [Menubar.ts:56](https://github.com/adam-lynch/menubar/blob/6b93752/src/Menubar.ts#L56)*
65 |
66 | ___
67 |
68 | ### tray
69 |
70 | • **tray**:
71 |
72 | *Defined in [Menubar.ts:69](https://github.com/adam-lynch/menubar/blob/6b93752/src/Menubar.ts#L69)*
73 |
74 | ___
75 |
76 | ### window
77 |
78 | • **window**:
79 |
80 | *Defined in [Menubar.ts:83](https://github.com/adam-lynch/menubar/blob/6b93752/src/Menubar.ts#L83)*
81 |
82 | ## Methods
83 |
84 | ### getOption
85 |
86 | ▸ **getOption**<**K**>(`key`: `K`): *`Options[K]`*
87 |
88 | *Defined in [Menubar.ts:92](https://github.com/adam-lynch/menubar/blob/6b93752/src/Menubar.ts#L92)*
89 |
90 | **Type parameters:**
91 |
92 | ▪ **K**: *keyof Options*
93 |
94 | **Parameters:**
95 |
96 | Name | Type | Description |
97 | ------ | ------ | ------ |
98 | `key` | `K` | The option key to retrieve, see [Options](../interfaces/_types_.options.md). |
99 |
100 | **Returns:** *`Options[K]`*
101 |
102 | ___
103 |
104 | ### hideWindow
105 |
106 | ▸ **hideWindow**(): *void*
107 |
108 | *Defined in [Menubar.ts:99](https://github.com/adam-lynch/menubar/blob/6b93752/src/Menubar.ts#L99)*
109 |
110 | **Returns:** *void*
111 |
112 | ___
113 |
114 | ### setOption
115 |
116 | ▸ **setOption**<**K**>(`key`: `K`, `value`: `Options[K]`): *void*
117 |
118 | *Defined in [Menubar.ts:115](https://github.com/adam-lynch/menubar/blob/6b93752/src/Menubar.ts#L115)*
119 |
120 | **Type parameters:**
121 |
122 | ▪ **K**: *keyof Options*
123 |
124 | **Parameters:**
125 |
126 | Name | Type | Description |
127 | ------ | ------ | ------ |
128 | `key` | `K` | The option key to modify, see [Options](../interfaces/_types_.options.md). |
129 | `value` | `Options[K]` | The value to set. |
130 |
131 | **Returns:** *void*
132 |
133 | ___
134 |
135 | ### showWindow
136 |
137 | ▸ **showWindow**(`trayPos?`: `Electron.Rectangle`): *`Promise`*
138 |
139 | *Defined in [Menubar.ts:124](https://github.com/adam-lynch/menubar/blob/6b93752/src/Menubar.ts#L124)*
140 |
141 | **Parameters:**
142 |
143 | Name | Type | Description |
144 | ------ | ------ | ------ |
145 | `trayPos?` | `Electron.Rectangle` | The bounds to show the window in. |
146 |
147 | **Returns:** *`Promise`*
--------------------------------------------------------------------------------
/docs/globals.md:
--------------------------------------------------------------------------------
1 | > **[menubar](README.md)**
2 |
3 | [Globals](globals.md) /
4 |
5 | # menubar
6 |
7 | ## Index
8 |
9 | ### External modules
10 |
11 | * ["Menubar"](modules/_menubar_.md)
12 | * ["index"](modules/_index_.md)
13 | * ["types"](modules/_types_.md)
14 | * ["util/getWindowPosition"](modules/_util_getwindowposition_.md)
--------------------------------------------------------------------------------
/docs/interfaces/_types_.options.md:
--------------------------------------------------------------------------------
1 | > **[menubar](../README.md)**
2 |
3 | [Globals](../globals.md) / ["types"](../modules/_types_.md) / [Options](_types_.options.md) /
4 |
5 | # Interface: Options
6 |
7 | ## Hierarchy
8 |
9 | * **Options**
10 |
11 | ## Table of Contents
12 |
13 | ### Properties
14 |
15 | * [browserWindow](_types_.options.md#browserwindow)
16 | * [dir](_types_.options.md#dir)
17 | * [icon](_types_.options.md#optional-icon)
18 | * [index](_types_.options.md#index)
19 | * [loadUrlOptions](_types_.options.md#optional-loadurloptions)
20 | * [preloadWindow](_types_.options.md#optional-preloadwindow)
21 | * [showDockIcon](_types_.options.md#optional-showdockicon)
22 | * [showOnAllWorkspaces](_types_.options.md#optional-showonallworkspaces)
23 | * [showOnRightClick](_types_.options.md#optional-showonrightclick)
24 | * [tooltip](_types_.options.md#tooltip)
25 | * [tray](_types_.options.md#optional-tray)
26 | * [windowPosition](_types_.options.md#optional-windowposition)
27 |
28 | ## Properties
29 |
30 | ### browserWindow
31 |
32 | • **browserWindow**: *`BrowserWindowConstructorOptions`*
33 |
34 | *Defined in [types.ts:23](https://github.com/maxogden/menubar/blob/c7d6640/src/types.ts#L23)*
35 |
36 | ___
37 |
38 | ### dir
39 |
40 | • **dir**: *string*
41 |
42 | *Defined in [types.ts:27](https://github.com/maxogden/menubar/blob/c7d6640/src/types.ts#L27)*
43 |
44 | ___
45 |
46 | ### `Optional` icon
47 |
48 | • **icon**? : *string | `NativeImage`*
49 |
50 | *Defined in [types.ts:34](https://github.com/maxogden/menubar/blob/c7d6640/src/types.ts#L34)*
51 |
52 | ___
53 |
54 | ### index
55 |
56 | • **index**: *string | false*
57 |
58 | *Defined in [types.ts:43](https://github.com/maxogden/menubar/blob/c7d6640/src/types.ts#L43)*
59 |
60 | ___
61 |
62 | ### `Optional` loadUrlOptions
63 |
64 | • **loadUrlOptions**? : *`LoadURLOptions`*
65 |
66 | *Defined in [types.ts:51](https://github.com/maxogden/menubar/blob/c7d6640/src/types.ts#L51)*
67 |
68 | ___
69 |
70 | ### `Optional` preloadWindow
71 |
72 | • **preloadWindow**? : *undefined | false | true*
73 |
74 | *Defined in [types.ts:56](https://github.com/maxogden/menubar/blob/c7d6640/src/types.ts#L56)*
75 |
76 | ___
77 |
78 | ### `Optional` showDockIcon
79 |
80 | • **showDockIcon**? : *undefined | false | true*
81 |
82 | *Defined in [types.ts:61](https://github.com/maxogden/menubar/blob/c7d6640/src/types.ts#L61)*
83 |
84 | ___
85 |
86 | ### `Optional` showOnAllWorkspaces
87 |
88 | • **showOnAllWorkspaces**? : *undefined | false | true*
89 |
90 | *Defined in [types.ts:66](https://github.com/maxogden/menubar/blob/c7d6640/src/types.ts#L66)*
91 |
92 | ___
93 |
94 | ### `Optional` showOnRightClick
95 |
96 | • **showOnRightClick**? : *undefined | false | true*
97 |
98 | *Defined in [types.ts:70](https://github.com/maxogden/menubar/blob/c7d6640/src/types.ts#L70)*
99 |
100 | ___
101 |
102 | ### tooltip
103 |
104 | • **tooltip**: *string*
105 |
106 | *Defined in [types.ts:74](https://github.com/maxogden/menubar/blob/c7d6640/src/types.ts#L74)*
107 |
108 | ___
109 |
110 | ### `Optional` tray
111 |
112 | • **tray**? : *`Tray`*
113 |
114 | *Defined in [types.ts:78](https://github.com/maxogden/menubar/blob/c7d6640/src/types.ts#L78)*
115 |
116 | ___
117 |
118 | ### `Optional` windowPosition
119 |
120 | • **windowPosition**? : *"trayLeft" | "trayBottomLeft" | "trayRight" | "trayBottomRight" | "trayCenter" | "trayBottomCenter" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight" | "topCenter" | "bottomCenter" | "leftCenter" | "rightCenter" | "center"*
121 |
122 | *Defined in [types.ts:83](https://github.com/maxogden/menubar/blob/c7d6640/src/types.ts#L83)*
123 |
--------------------------------------------------------------------------------
/docs/modules/_index_.md:
--------------------------------------------------------------------------------
1 | > **[menubar](../README.md)**
2 |
3 | [Globals](../globals.md) / ["index"](_index_.md) /
4 |
5 | # External module: "index"
6 |
7 | ## Index
8 |
9 | ### Functions
10 |
11 | * [menubar](_index_.md#menubar)
12 |
13 | ## Functions
14 |
15 | ### menubar
16 |
17 | ▸ **menubar**(`options?`: `Partial`): *[Menubar](../classes/_menubar_.menubar.md)*
18 |
19 | *Defined in [index.ts:25](https://github.com/adam-lynch/menubar/blob/6b93752/src/index.ts#L25)*
20 |
21 | **Parameters:**
22 |
23 | Name | Type | Description |
24 | ------ | ------ | ------ |
25 | `options?` | `Partial` | Options for creating a menubar application, see [Options](../interfaces/_types_.options.md) |
26 |
27 | **Returns:** *[Menubar](../classes/_menubar_.menubar.md)*
--------------------------------------------------------------------------------
/docs/modules/_menubar_.md:
--------------------------------------------------------------------------------
1 | > **[menubar](../README.md)**
2 |
3 | [Globals](../globals.md) / ["Menubar"](_menubar_.md) /
4 |
5 | # External module: "Menubar"
6 |
7 | ## Index
8 |
9 | ### Classes
10 |
11 | * [Menubar](../classes/_menubar_.menubar.md)
--------------------------------------------------------------------------------
/docs/modules/_types_.md:
--------------------------------------------------------------------------------
1 | > **[menubar](../README.md)**
2 |
3 | [Globals](../globals.md) / ["types"](_types_.md) /
4 |
5 | # External module: "types"
6 |
7 | ## Index
8 |
9 | ### Interfaces
10 |
11 | * [Options](../interfaces/_types_.options.md)
--------------------------------------------------------------------------------
/docs/modules/_util_getwindowposition_.md:
--------------------------------------------------------------------------------
1 | > **[menubar](../README.md)**
2 |
3 | [Globals](../globals.md) / ["util/getWindowPosition"](_util_getwindowposition_.md) /
4 |
5 | # External module: "util/getWindowPosition"
6 |
7 | ## Index
8 |
9 | ### Functions
10 |
11 | * [getWindowPosition](_util_getwindowposition_.md#getwindowposition)
12 | * [taskbarLocation](_util_getwindowposition_.md#taskbarlocation)
13 |
14 | ## Functions
15 |
16 | ### getWindowPosition
17 |
18 | ▸ **getWindowPosition**(`tray`: `Tray`): *`WindowPosition`*
19 |
20 | *Defined in [util/getWindowPosition.ts:52](https://github.com/adam-lynch/menubar/blob/6b93752/src/util/getWindowPosition.ts#L52)*
21 |
22 | **Parameters:**
23 |
24 | Name | Type | Description |
25 | ------ | ------ | ------ |
26 | `tray` | `Tray` | The Electron Tray instance. |
27 |
28 | **Returns:** *`WindowPosition`*
29 |
30 | ___
31 |
32 | ### taskbarLocation
33 |
34 | ▸ **taskbarLocation**(`tray`: `Tray`): *`TaskbarLocation`*
35 |
36 | *Defined in [util/getWindowPosition.ts:18](https://github.com/adam-lynch/menubar/blob/6b93752/src/util/getWindowPosition.ts#L18)*
37 |
38 | **Parameters:**
39 |
40 | Name | Type | Description |
41 | ------ | ------ | ------ |
42 | `tray` | `Tray` | The Electron Tray instance. |
43 |
44 | **Returns:** *`TaskbarLocation`*
--------------------------------------------------------------------------------
/examples/arrow/README.md:
--------------------------------------------------------------------------------
1 | # example-menubar-arrow
2 |
3 | ## Description
4 |
5 | A menubar app with an arrow on top, that gives the app a popover look.
6 |
7 | Thanks @leilarrossi for this example, see https://github.com/maxogden/menubar/issues/78.
8 |
9 | ## Screenshot
10 |
11 | 
12 |
13 | ## Instructions
14 |
15 | - Clone the repository.
16 | - Run `yarn install` from the root folder.
17 | - Run `yarn build` from the root folder.
18 | - `cd` into this directory.
19 | - Run `yarn install` to install this example's dependencies.
20 | - Run `yarn start` from this directory to run app.
21 |
--------------------------------------------------------------------------------
/examples/arrow/index.css:
--------------------------------------------------------------------------------
1 | .myarrow {
2 | position: relative;
3 | padding: 12px 0;
4 | }
5 |
6 | .myarrow:before {
7 | content: "";
8 | height: 0;
9 | width: 0;
10 | border-width: 0 8px 12px 8px;
11 | border-style: solid;
12 | border-color: transparent transparent #eeeeee transparent;
13 | position: absolute;
14 | top: 0px;
15 | left: 50%;
16 | transform: translateX(-50%);
17 | }
18 |
19 | .page {
20 | background: #eeeeee;
21 | width: 340px;
22 | height: 500px;
23 | margin: 0 auto;
24 | }
25 |
26 | .darwin.page {
27 | border-radius: 5px;
28 | overflow: hidden;
29 | }
30 |
--------------------------------------------------------------------------------
/examples/arrow/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | Example App
4 |
5 |
6 |
7 |
| 
| 
|
23 | | :-----------------------------------------------------------: | :--------------------------------------------------------: | :------------------------------------------------------: |
24 | | macOS Mojave 10.14 | Windows 10 | Ubuntu 18.04 |
25 |
26 | ## Installation
27 |
28 | ```bash
29 | yarn add menubar
30 | ```
31 |
32 | ## Usage
33 |
34 | Starting with your own new project, run these commands:
35 |
36 | ```bash
37 | $ yarn add menubar
38 | $ touch myApp.js
39 | $ touch index.html
40 | ```
41 |
42 | Fill `index.html` with some HTML, and `myApp.js` like this:
43 |
44 | ```javascript
45 | const { menubar } = require('menubar');
46 |
47 | const mb = menubar();
48 |
49 | mb.on('ready', () => {
50 | console.log('app is ready');
51 | // your app code here
52 | });
53 | ```
54 |
55 | Then use `electron` to run the app:
56 |
57 | ```bash
58 | $ electron myApp.js
59 | ```
60 |
61 | Alternatively, see [`examples/hello-world`](/examples/hello-world) folder for a simple working example.
62 |
63 | ## `Menubar` Class
64 |
65 | The return value of `menubar()` is a `Menubar` class instance, which has these properties:
66 |
67 | - `app`: the [Electron App](https://electronjs.org/docs/api/app) instance,
68 | - `window`: the [Electron Browser Window](https://electronjs.org/docs/api/browser-window) instance,
69 | - `tray`: the [Electron Tray](https://electronjs.org/docs/api/tray) instance,
70 | - `positioner`: the [Electron Positioner](https://github.com/jenslind/electron-positioner) instance,
71 | - `setOption(option, value)`: change an option after menubar is created,
72 | - `getOption(option)`: get an menubar option,
73 | - `showWindow()`: show the menubar window,
74 | - `hideWindow()`: hide the menubar window
75 |
76 | See the reference [API docs](./docs/classes/_menubar_.menubar.md).
77 |
78 | ## `menubar()` Options
79 |
80 | You can pass an optional options object into the `menubar({ ... })` function:
81 |
82 | - `dir` (default `process.cwd()`) - the app source directory
83 | - `index` (default `file:// + opts.dir + index.html`) - The URL to load the menubar's browserWindow with. The url can be a remote address (e.g. `http://`) or a path to a local HTML file using the `file://` protocol.
84 | - `browserWindow` - BrowserWindow options to be passed to the BrowserWindow constructor, see [Electron docs](https://electronjs.org/docs/api/browser-window#new-browserwindowoptions). Some interesting fields to passed down are:
85 | - `x` (default `undefined`) - the x position of the window
86 | - `y` (default `undefined`) - the y position of the window
87 | - `width` (default 400) - window width
88 | - `height` (default 400) - window height
89 | - `alwaysOnTop` (default false) - if true, the window will not hide on blur
90 | - `icon` (default `opts.dir + IconTemplate.png`) - the png icon to use for the menubar. A good size to start with is 20x20. To support retina, supply a 2x sized image (e.g. 40x40) with `@2x` added to the end of the name, so `icon.png` and `icon@2x.png` and Electron will automatically use your `@2x` version on retina screens.
91 | - `tooltip` (default empty) - menubar tray icon tooltip text
92 | - `tray` (default created on-the-fly) - an electron `Tray` instance. if provided `opts.icon` will be ignored
93 | - `preloadWindow` (default false) - Create [BrowserWindow](https://electronjs.org/docs/api/browser-window#new-browserwindowoptions) instance before it is used -- increasing resource usage, but making the click on the menubar load faster.
94 | - `loadUrlOptions` - (default undefined) The options passed when loading the index URL in the menubar's browserWindow. Everything browserWindow.loadURL supports is supported; this object is simply passed onto [browserWindow.loadURL](https://electronjs.org/docs/api/browser-window#winloadurlurl-options)
95 | - `showOnAllWorkspaces` (default true) - Makes the window available on all OS X workspaces.
96 | - `windowPosition` (default trayCenter and trayBottomCenter on Windows) - Sets the window position (x and y will still override this), check [positioner docs](https://github.com/jenslind/electron-positioner#docs) for valid values.
97 | - `showDockIcon` (default false) - Configure the visibility of the application dock icon.
98 | - `showOnRightClick` (default false) - Show the window on 'right-click' event instead of regular 'click'
99 |
100 | See the reference [API docs](./docs/interfaces/_types_.options.md).
101 |
102 | ## Events
103 |
104 | The `Menubar` class is an event emitter:
105 |
106 | - `ready` - when `menubar`'s tray icon has been created and initialized, i.e. when `menubar` is ready to be used. Note: this is different than Electron app's `ready` event, which happens much earlier in the process
107 | - `create-window` - the line before `new BrowserWindow()` is called
108 | - `before-load` - after create window, before loadUrl (can be used for `require("@electron/remote/main").enable(webContents)`)
109 | - `after-create-window` - the line after all window init code is done and url was loaded
110 | - `show` - the line before `window.show()` is called
111 | - `after-show` - the line after `window.show()` is called
112 | - `hide` - the line before `window.hide()` is called (on window blur)
113 | - `after-hide` - the line after `window.hide()` is called
114 | - `after-close` - after the `.window` (BrowserWindow) property has been deleted
115 | - `focus-lost` - emitted if always-on-top option is set and the user clicks away
116 |
117 | ## Compatibility with Electron
118 |
119 | | menubar | Electron | Notes |
120 | | -------- | -------------------------- | -------------------------------------------------------------------------------------------------------------------------- |
121 | | 9.x.x | >=9.x.x <33.x.x | |
122 | | 8.x.x | 8.x.xx | |
123 | | 7.x.x | 7.x.xx | |
124 | | 6.x.x | >=4.x.x <7.x.x | Not recommended for [security reasons](https://electronjs.org/docs/tutorial/security#17-use-a-current-version-of-electron) |
125 | | <= 5.x.x | <= 3.x.x | Please, _please_ don't use these old versions |
126 |
127 | ## API Docs
128 |
129 | See the reference [API docs](./docs/globals.md).
130 |
131 | ## Tips
132 |
133 | - Use `mb.on('after-create-window', callback)` to run things after your app has loaded. For example you could run `mb.window.openDevTools()` to open the developer tools for debugging, or load a different URL with `mb.window.loadURL()`
134 | - Use `mb.on('focus-lost')` if you would like to perform some operation when using the option `browserWindow.alwaysOnTop: true`
135 | - To restore focus of previous window after menubar hide, use `mb.on('after-hide', () => { mb.app.hide() } )` or similar
136 | - To create a native menu, you can use `tray.setContextMenu(contextMenu)`, and pass this custom tray to menubar: `const mb = menubar({ tray });`. See [this example](https://github.com/maxogden/menubar/tree/master/examples/native-menu) for more information.
137 | - To avoid a flash when opening your menubar app, you can disable backgrounding the app using the following: `mb.app.commandLine.appendSwitch('disable-backgrounding-occluded-windows', 'true');`
138 |
--------------------------------------------------------------------------------
/WORKING_PLATFORMS.md:
--------------------------------------------------------------------------------
1 | # Platforms where `menubar` is known to work
2 |
3 | This document is still a work-in-progress. If you have tested `menubar` with a platform that is not listed under here, I would greatly appreciate a PR!
4 |
5 | ## macOS
6 |
7 | | Version | Working Status | Known Issues |
8 | | ----------------- | -------------- | -------------------------------------------------------------------------------------------------------------- |
9 | | 14.15 Sonoma | ✅ Good | |
10 | | 10.14 Mojave | ✅ Good | [#147](https://github.com/maxogden/menubar/issues/147), [#215](https://github.com/maxogden/menubar/issues/215) |
11 | | 10.13 High Sierra | ✅ Good | |
12 |
13 | ## Windows
14 |
15 | | Version | Working Status | Known Issues |
16 | | ---------- | -------------- | ------------ |
17 | | Windows 11 | ✅ Good | |
18 | | Windows 10 | ✅ Good | |
19 | | Windows 8 | ✅ Good | |
20 |
21 | ## Linux
22 |
23 | | Distribution | Desktop Environment | Working Status | Known Issues |
24 | | ------------- | ------------------- | -------------- | ------------------------------------------------------ |
25 | | openSUSE 13.1 | Xfce 4.10.1 | ❌ Bad | [#123](https://github.com/maxogden/menubar/issues/123) |
26 | | Ubuntu 18.04 | Unity | ✅ Good | |
27 | | Ubuntu 14.04 | Unity | ❌ Bad | [#68](https://github.com/maxogden/menubar/issues/68) |
28 |
--------------------------------------------------------------------------------
/assets/Icon.icns:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/max-mapper/menubar/6aa6df7aa8f6e5758aa5e48a3020caad264bfa73/assets/Icon.icns
--------------------------------------------------------------------------------
/assets/IconTemplate.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/max-mapper/menubar/6aa6df7aa8f6e5758aa5e48a3020caad264bfa73/assets/IconTemplate.png
--------------------------------------------------------------------------------
/assets/IconTemplate@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/max-mapper/menubar/6aa6df7aa8f6e5758aa5e48a3020caad264bfa73/assets/IconTemplate@2x.png
--------------------------------------------------------------------------------
/assets/screenshot-linux.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/max-mapper/menubar/6aa6df7aa8f6e5758aa5e48a3020caad264bfa73/assets/screenshot-linux.png
--------------------------------------------------------------------------------
/assets/screenshot-macos-dark.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/max-mapper/menubar/6aa6df7aa8f6e5758aa5e48a3020caad264bfa73/assets/screenshot-macos-dark.png
--------------------------------------------------------------------------------
/assets/screenshot-windows.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/max-mapper/menubar/6aa6df7aa8f6e5758aa5e48a3020caad264bfa73/assets/screenshot-windows.png
--------------------------------------------------------------------------------
/biome.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://biomejs.dev/schemas/1.9.3/schema.json",
3 | "organizeImports": {
4 | "enabled": true
5 | },
6 | "linter": {
7 | "enabled": true,
8 | "rules": {
9 | "recommended": true,
10 | "style": {
11 | "noParameterAssign": "warn",
12 | "noNonNullAssertion": "warn",
13 | "useNodejsImportProtocol": "warn"
14 | },
15 | "suspicious": {
16 | "noAssignInExpressions": "warn"
17 | }
18 | }
19 | },
20 | "vcs": {
21 | "enabled": true,
22 | "clientKind": "git",
23 | "useIgnoreFile": true
24 | },
25 | "formatter": {
26 | "enabled": true,
27 | "indentStyle": "space",
28 | "indentWidth": 2
29 | },
30 | "javascript": {
31 | "formatter": {
32 | "quoteStyle": "single",
33 | "jsxQuoteStyle": "double"
34 | }
35 | },
36 | "json": {
37 | "parser": {
38 | "allowComments": true
39 | }
40 | }
41 | }
42 |
--------------------------------------------------------------------------------
/docs/README.md:
--------------------------------------------------------------------------------
1 | > **[menubar](README.md)**
2 |
3 | [Globals](globals.md) /
4 |
5 | [](https://travis-ci.org/maxogden/menubar)
6 | [](https://www.npmjs.com/package/@maxogden/menubar)
7 | [](https://david-dm.org/maxogden/menubar)
8 | 
9 | 
10 |
11 |