Well, that can be done only with Custom CSS, but I do not guarantee that it will show up 100% correctly.

1) First add to body some spacing, so it will allow you to place the header.

body {
    padding-left: 300px !important;
}

2) Make the wrapper of header go on left side;

.l-primary-header--default-wrapper {
    position: fixed !important;
    width: 300px !important;
    height: 100% !important;
    background-color: #333 !important;
    left: 0 !important;
}

3) Make them have 100% of height

.l-primary-header--default-wrapper header,
.l-primary-header--default-wrapper header .container,
.l-primary-header--default-wrapper header .l-primary-header__holder {
    height: 100% !important;
}

4) Make them inline with flex

.l-primary-header--default-wrapper header .l-primary-header__holder {
    flex-direction: column !important;
}

5) Remove the margin left from the menu

.l-primary-header--default-wrapper header .l-primary-header__holder .ml-auto.d-flex {
    margin-left: 0 !important;
}

6) Add flex to nav menu 

.l-primary-header--default-wrapper header .l-primary-header__holder .ml-auto.d-flex .d-flex.align-items-stretch {
    flex-direction: column !important;
}

7) Push the menu from the logo

.l-primary-header .a-logo {
    margin-bottom: 50% !important;
    align-items: start !important;
}

8) Remove the margins

ul.menu.m-header-default-menu li.menu-item {
    margin-left: 0 !important;
    margin-bottom: 20px !important;
}

9) Add space between the menu and the header icons(search etc)

.l-primary-header--default__nav nav {
    margin-bottom: 100px;
}

10) Removes space of icons

.l-primary-header.l-primary-header--default .l-primary-header__icons {
    padding-left: 0 !important;
}

One more time I do not guarantee that this will work great in all devices, since it is beyond Arteon. You can play with settings if they do not fit correctly. This is what I got on my localhost. http://prntscr.com/neirch

Kind Regards