kijtra/template.html

## template.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Admin Template</title>
  <link rel="stylesheet" href="template.css">
</head>
<body>

    <input type="checkbox" id="toggle-sidebar">
    <section class="-wrap">
        <section class="-body">
            <header class="-heading">
                <!-- heading (Hero etc...) -->
            </header>
            <nav class="-nav">
                <!-- nav (Tab etc...) -->
            </nav>
            <main class="-content">
                <!-- main content -->
            </main>
            <footer class="-footer">
                <!-- footer -->
            </footer>
        </section>
        <aside class="-sidebar">
            <!-- sidebar -->
        </aside>
        <header class="-header">
            <!-- header -->
        </header>
    </section>

</body>
</html>

## template.scss
html {
    height:100%;
}

* {
    box-sizing:border-box;
}

$admtmp-header-height: 50px !default;
$admtmp-sidebar-width: $admtmp-header-height * 5 !default;

$admtmp-breakpoint: 768px;

$admtmp-header-height-mobile: $admtmp-header-height !default;
$admtmp-sidebar-width-mobile: $admtmp-sidebar-width !default;

$admtmp-sidebar-toggle-name: "toggle-sidebar" !default;
$admtmp-sidebar-speed: .3s !default;
$admtmp-sidebar-animation: ease-in-out !default;

$admtmp-sidebar-backdrop-color: rgba(0,0,0,.5) !default;
$admtmp-sidebar-backdrop-speed: .6s !default;

body {
    height:100%;
    margin:0;

    ##{$admtmp-sidebar-toggle-name} {
        display:none;
    }

    // wrapper
    ##{$admtmp-sidebar-toggle-name} + section:first-of-type {
        min-height: 100vh;
        display: flex;
        flex-flow: row wrap;

        // body
        > section:first-of-type {
            width:calc(100% - #{$admtmp-sidebar-width});
            min-height: calc(100vh - #{$admtmp-header-height});
            flex:1;
            order:3;

            display: flex;
            flex-flow: column wrap;

            // content
            > main:first-of-type {
                flex: 1;
                overflow-x: auto;
            }

            // nav
            > nav:first-of-type {
                overflow-x: auto;
            }

            // if empty
            > header:empty, nav:empty, footer:empty, header:blank, nav:blank, footer:blank {
                display:none;
            }
        }

        // sidebar
        > aside:first-of-type {
            min-height: calc(100vh - #{$admtmp-header-height});
            width: $admtmp-sidebar-width;
            order: 2;
            overflow-y: auto;
        }

        // header
        > header:first-of-type {
            height: $admtmp-header-height;
            flex: 1 100%;
            order: 1;

            // Sidebar Toggler
            @media screen and (min-width: $admtmp-breakpoint) {
                label[for="#{$admtmp-sidebar-toggle-name}"] {
                    display: none;
                }
            }
        }
    }


    @media screen and (max-width: #{$admtmp-breakpoint - 1}) {
        // wrapper
        ##{$admtmp-sidebar-toggle-name} + section:first-of-type {
            padding-top: $admtmp-header-height-mobile;

            // body
            > section:first-of-type {
                width: 100%;
                position: relative;
                z-index: 1;
                flex: none;

                &:before, &:after {
                    position: fixed;
                    content: '';
                    top: 0;
                }

                &:before {
                    width: 300vw;
                    height: 100vh;
                    display: block;
                    right: 100vw;
                    z-index: 1;
                    box-shadow: 200vw 0 0 rgba($admtmp-sidebar-backdrop-color, 0);
                    transition: box-shadow $admtmp-sidebar-backdrop-speed linear;
                    background:red;
                }

                &:after {
                    display: none;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    z-index: 1000;
                }
            }

            // sidebar
            > aside:first-of-type {
                width: $admtmp-sidebar-width-mobile;
                height: 0;
                min-height: none;
                position: fixed;
                top: $admtmp-header-height-mobile;
                left: 0;
                bottom: 0;
                z-index: 1;
                flex: none;
                transition: transform $admtmp-sidebar-speed $admtmp-sidebar-animation;
                transform: translateX(-$admtmp-sidebar-width-mobile);
                -webkit-overflow-scrolling: touch;
            }

            // header
            > header:first-of-type {
                height: $admtmp-header-height-mobile;
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                z-index: 1;
                flex: none;
            }
        }

        ##{$admtmp-sidebar-toggle-name}:checked + section {
            // body
            > section:first-of-type {
                &:before {
                    box-shadow: 200vw 0 0 $admtmp-sidebar-backdrop-color;
                }

                &:before {
                    display: block;
                }
            }

            // sidebar
            > aside:first-of-type {
                transform: translateX(0);
            }
        }
    }
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Admin Template</title>
	<link rel="stylesheet" href="template.css">
	</head>
	<body>

	<input type="checkbox" id="toggle-sidebar">
	<section class="-wrap">
	<section class="-body">
	<header class="-heading">
	<!-- heading (Hero etc...) -->
	</header>
	<nav class="-nav">
	<!-- nav (Tab etc...) -->
	</nav>
	<main class="-content">
	<!-- main content -->
	</main>
	<footer class="-footer">
	<!-- footer -->
	</footer>
	</section>
	<aside class="-sidebar">
	<!-- sidebar -->
	</aside>
	<header class="-header">
	<!-- header -->
	</header>
	</section>

	</body>
	</html>
	html {
	height:100%;
	}

	* {
	box-sizing:border-box;
	}

	$admtmp-header-height: 50px !default;
	$admtmp-sidebar-width: $admtmp-header-height * 5 !default;

	$admtmp-breakpoint: 768px;

	$admtmp-header-height-mobile: $admtmp-header-height !default;
	$admtmp-sidebar-width-mobile: $admtmp-sidebar-width !default;

	$admtmp-sidebar-toggle-name: "toggle-sidebar" !default;
	$admtmp-sidebar-speed: .3s !default;
	$admtmp-sidebar-animation: ease-in-out !default;

	$admtmp-sidebar-backdrop-color: rgba(0,0,0,.5) !default;
	$admtmp-sidebar-backdrop-speed: .6s !default;

	body {
	height:100%;
	margin:0;

	##{$admtmp-sidebar-toggle-name} {
	display:none;
	}

	// wrapper
	##{$admtmp-sidebar-toggle-name} + section:first-of-type {
	min-height: 100vh;
	display: flex;
	flex-flow: row wrap;

	// body
	> section:first-of-type {
	width:calc(100% - #{$admtmp-sidebar-width});
	min-height: calc(100vh - #{$admtmp-header-height});
	flex:1;
	order:3;

	display: flex;
	flex-flow: column wrap;

	// content
	> main:first-of-type {
	flex: 1;
	overflow-x: auto;
	}

	// nav
	> nav:first-of-type {
	overflow-x: auto;
	}

	// if empty
	> header:empty, nav:empty, footer:empty, header:blank, nav:blank, footer:blank {
	display:none;
	}
	}

	// sidebar
	> aside:first-of-type {
	min-height: calc(100vh - #{$admtmp-header-height});
	width: $admtmp-sidebar-width;
	order: 2;
	overflow-y: auto;
	}

	// header
	> header:first-of-type {
	height: $admtmp-header-height;
	flex: 1 100%;
	order: 1;

	// Sidebar Toggler
	@media screen and (min-width: $admtmp-breakpoint) {
	label[for="#{$admtmp-sidebar-toggle-name}"] {
	display: none;
	}
	}
	}
	}



	@media screen and (max-width: #{$admtmp-breakpoint - 1}) {
	// wrapper
	##{$admtmp-sidebar-toggle-name} + section:first-of-type {
	padding-top: $admtmp-header-height-mobile;

	// body
	> section:first-of-type {
	width: 100%;
	position: relative;
	z-index: 1;
	flex: none;

	&:before, &:after {
	position: fixed;
	content: '';
	top: 0;
	}

	&:before {
	width: 300vw;
	height: 100vh;
	display: block;
	right: 100vw;
	z-index: 1;
	box-shadow: 200vw 0 0 rgba($admtmp-sidebar-backdrop-color, 0);
	transition: box-shadow $admtmp-sidebar-backdrop-speed linear;
	background:red;
	}

	&:after {
	display: none;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1000;
	}
	}

	// sidebar
	> aside:first-of-type {
	width: $admtmp-sidebar-width-mobile;
	height: 0;
	min-height: none;
	position: fixed;
	top: $admtmp-header-height-mobile;
	left: 0;
	bottom: 0;
	z-index: 1;
	flex: none;
	transition: transform $admtmp-sidebar-speed $admtmp-sidebar-animation;
	transform: translateX(-$admtmp-sidebar-width-mobile);
	-webkit-overflow-scrolling: touch;
	}

	// header
	> header:first-of-type {
	height: $admtmp-header-height-mobile;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1;
	flex: none;
	}
	}

	##{$admtmp-sidebar-toggle-name}:checked + section {
	// body
	> section:first-of-type {
	&:before {
	box-shadow: 200vw 0 0 $admtmp-sidebar-backdrop-color;
	}

	&:before {
	display: block;
	}
	}

	// sidebar
	> aside:first-of-type {
	transform: translateX(0);
	}
	}
	}
	}