I'm creating an Electron app where we want a nav looking toolbar to be docked on the right side of the screen. It needs to be on the right side because most of our users are on Windows and docking it on the left would mean it overlaps lots of icons and it would be covered by the start menu.

When the user clicks an icon, I need the window to open/resize towards the left.

On App launch I create a new window

mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    center: true,
    backgroundColor: '#18A4FC'
  })

Then after the user is authenticated, I use the ipcRender to send a success message to the main.js file. Currently this "docks" the window on the right side of the screen using the setBounds method and the screen sizes.

ipcMain.on('login-success', () => {
  let display = electron.screen.getPrimaryDisplay()
  const { width, height } = display.bounds
  mainWindow.setBounds({
    x: width - 40,
    y: 0,
    width: 40,
    height: height
  })
})

Then, when the user clicks an icon, I use setSize to "open" the dock. This means I change the width of the window from 40px to 480px. But it opens towards the right, offscreen. I need it to open towards the left.

ipcMain.on('resize-open', () => {
  let display = electron.screen.getPrimaryDisplay()
  const { height } = display.bounds
  mainWindow.setSize(480, height)
})

Any ideas how to do this? I understand that the width,height is being set from top left corner being 0,0. Any way to reset this?

I'm creating an Electron app where we want a nav looking toolbar to be docked on the right side of the screen. It needs to be on the right side because most of our users are on Windows and docking it on the left would mean it overlaps lots of icons and it would be covered by the start menu.

When the user clicks an icon, I need the window to open/resize towards the left.

On App launch I create a new window

mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    center: true,
    backgroundColor: '#18A4FC'
  })

Then after the user is authenticated, I use the ipcRender to send a success message to the main.js file. Currently this "docks" the window on the right side of the screen using the setBounds method and the screen sizes.

ipcMain.on('login-success', () => {
  let display = electron.screen.getPrimaryDisplay()
  const { width, height } = display.bounds
  mainWindow.setBounds({
    x: width - 40,
    y: 0,
    width: 40,
    height: height
  })
})

Then, when the user clicks an icon, I use setSize to "open" the dock. This means I change the width of the window from 40px to 480px. But it opens towards the right, offscreen. I need it to open towards the left.

ipcMain.on('resize-open', () => {
  let display = electron.screen.getPrimaryDisplay()
  const { height } = display.bounds
  mainWindow.setSize(480, height)
})

Any ideas how to do this? I understand that the width,height is being set from top left corner being 0,0. Any way to reset this?

• javascript
• electron

2 Answers 2

I ended up using setBounds, but instead moving it to the left the amount that I need for it to be open.

  let display = electron.screen.getPrimaryDisplay()
  const { width, height } = display.bounds
  mainWindow.setBounds({
    x: width - 320 ,
    y: height,
    width: 320,
    height: height
  })
})```

Maybe you could try something like:

mainWindow.setBounds({
  x: 0,
  y: 0,
  width: 480,
  height: height
})

Instead of:

mainWindow.setSize(480, height)

Because the setBounds function resets the window position (to 0,0 in this case) as well as set the width and height.