<template>
    <div class="cms_sidebar open_sidebar">

        <div class="cms_sidebar_trigger"><i class="icon icon-arrow-left" aria-hidden="true"></i></div>

        <div class="cms_sidebar_icons_bg"></div>
        <div class="cms_sidebar_mainnav">
            <div class="cms_sidebar_inner">
                <!-- Sidebar Section -->
                <div class="cms_sidebar_section main_navigation">
                    <ul>
                        <li><a href="#"><i class="icon icon-compass" aria-hidden="true"></i> <span class="main_navigation_text l1_title">Dashboard</span></a></li>
                        <li><a href="#"><i class="icon icon-images" aria-hidden="true"></i> <span class="main_navigation_text l1_title">Medien</span></a></li>
                        <li><a href="#"><i class="icon icon-document-text" aria-hidden="true"></i> <span class="main_navigation_text l1_title">Seiten</span></a></li>
                        <li class="active">
                            <a href="#"><i class="icon icon-paper-airplane" aria-hidden="true"></i> <span class="main_navigation_text l1_title">Beiträge</span></a>
                            <!-- Sub Navigation -->
                            <div class="sub_navigation">
                                <span class="sub_navigation_headline">Kategorie</span>
                                <ul>
                                    <li class="active"><a href="#">News</a></li>
                                    <li><a href="#">Veranstaltungen</a></li>
                                    <li><a href="#">Mitarbeiter</a></li>
                                    <li class="nav_add_more"><a href="#">+</a></li>
                                </ul>
                            </div>
                        </li>
                        <li><a href="#"><i class="icon icon-cube" aria-hidden="true"></i> <span class="main_navigation_text l1_title">Module</span></a></li>
                        <li><a href="#"><i class="icon icon-navigate" aria-hidden="true"></i> <span class="main_navigation_text l1_title">Navigation</span></a></li>

                        <li><a href="#"><i class="icon icon-chatbox" aria-hidden="true"></i> <span class="main_navigation_text l1_title">Sprachen</span></a></li>
                        <li><a href="#"><i class="icon icon-pie-graph" aria-hidden="true"></i> <span class="main_navigation_text l1_title">SEO & Pagespeed</span></a></li>

                        <li><a href="#"><i class="icon icon-contacts" aria-hidden="true"></i> <span class="main_navigation_text l1_title">Benutzer</span></a></li>
                        <li><a href="#"><i class="icon icon-gear" aria-hidden="true"></i> <span class="main_navigation_text l1_title">Settings</span></a></li>
                    </ul>
                </div>

            </div>
        </div>

        <!-- User Profile -->
        <!-- <div class="user_profile">
            <a class="user_profile_trigger">
                <span class="user_profile_image"><i class="icon icon-person" aria-hidden="true"></i></span>
                <span class="user_profile_text">Hans Zimmer <span class="user_role">Administrator</span></span>
                <span class="user_profile_open"><i class="fa fa-angle-up" aria-hidden="true"></i></span>
                <span style="clear:both; display:block;"></span>
            </a>
            <div class="user_profile_content">
                <ul>
                    <li><a href=""><i class="icon icon-color-wand" aria-hidden="true"></i><span class="navigation_text">Profil anpassen</span></a></li>
                    <li><a href=""><i class="icon icon-log-out" aria-hidden="true"></i><span class="navigation_text">ausloggen</span></a></li>
                </ul>
            </div>
        </div> -->
    </div>
</template>

<style lang="less">
	/*--------------------------------------------------------------
	# Left Sidebar (Main Navigation)
	--------------------------------------------------------------*/
	.cms_sidebar {position:fixed; left:0px; top:40px; bottom:0px; background:#152129; width:70px; transition:all 0.3s; z-index:2000;}
	.cms_sidebar_trigger {
	  position:absolute;
	  left:100%;
	  bottom:5px;
	  background:#1a2e3b;
	  width:30px;
	  height:30px;
	  color:#FFF;
	  padding-top:;
	  text-align:center;
	  font-size:20px;
	  cursor:pointer;
	  transition:all 0.3s;
	}
	.cms_sidebar_trigger:hover {background:#28b78d;}
	.trigger_active i:before {
	  transform:rotate(180deg);
	}

	.cms_sidebar_mainnav {height:100%; /*overflow-y:scroll;*/}
	.cms_sidebar_inner {position:relative; width:auto;}
	.cms_sidebar_icons_bg {background:#1a2e3b; width:70px; position:absolute; top:0px; left:0px; bottom:0px;}
	.main_navigation ul {list-style-type:none;}
	.main_navigation ul li {padding:0px; line-height:1.2; color:#FFF; position:relative; width:70px;}
	.main_navigation ul li .fa, .main_navigation ul li .icon {
	  color:#FFF;
	  font-size:22px;
	  text-align:center;
	  position:relative;
	  left:0;
	  margin-bottom:5px;
	  display:block;
	  transition:all 0.3s;
	}
	.main_navigation ul li .fa {font-size:16px;}
	.main_navigation ul li .main_navigation_text {
	  position:relative;
	  font-size:10px;
	  display:block;
	  color:#FFF;
	  text-align:center;
	  width:auto;
	  float:none;
	  line-height:1;
	  /*transition:all 0.3s;*/
	}
	.main_navigation ul li a {color:#FFF; display:block; height:auto; width:70px; height:auto; padding:8px 0px; text-align:center;}
	.main_navigation ul li:after {clear:both; content:""; display:block;}
	.main_navigation ul li:hover {background:rgba(40,183,141,0.3);}

	.main_navigation ul li.active {background:#28b78d;}
	.main_navigation ul li.active .fa {background:#19435e;}

	.main_navigation ul li.active .submenu {border-top:solid 1px rgba(255,255,255,0.2);}
	.main_navigation .submenu {margin-left:45px;}
	.main_navigation .submenu .submenu_headline {padding-left:15px;}
	.main_navigation .submenu li {}
	.main_navigation .submenu li .main_navigation_text {
	  font-size:14px;
	  display:block;
	  color:#FFF;
	  text-align:left;
	  float:left;
	  padding:0px 10px 0px 15px;
	  width:180px;
	  line-height:35px;
	}

	.main_navigation .submenu li a {height:35px; padding:0px; text-align:left;}
	.main_navigation .nav_add_more {border-top:solid 1px rgba(255,255,255,0.2);}
	.main_navigation .submenu li.nav_add_more .main_navigation_text {text-align:center;}
	.main_navigation .submenu li:hover {background:rgba(56,29,29,0.6);}

	/* Submenu */
	.sub_navigation {
	  position:absolute;
	  left:100%;
	  top:0px;
	  background:#152129;
	  width:180px;
	  height:auto;
	  transition:all 0.3s;
	  /*visibility:visible;
	  opacity:1;*/
	  visibility:hidden;
	  opacity:0;
	}
	.sub_navigation ul {list-style-type:none;}
	.sub_navigation ul li {font-size:12px; display:block; text-align:left; padding:0px 10px 0px 15px; width:auto; line-height:30px; color:#FFF; position:relative;}
	.sub_navigation ul li a {color:#FFF; display:block; width:100%; height:100%; padding:0px; text-align:left;}
	.sub_navigation .nav_add_more {border-top:solid 1px rgba(255,255,255,0.2); border-bottom:solid 1px rgba(255,255,255,0.2); display:block;}
	.sub_navigation .nav_add_more a {display:block; text-align:center; color:rgba(255,255,255,0.5); font-weight:600; font-size:20px;}
	.sub_navigation ul li.active, .cms_content_sidebar .sub_navigation ul li:hover {background:#28B78D;}
	.sub_navigation ul li.active:after {
	  right: 0;
	  top: 50%;
	  border: solid transparent;
	  content: " ";
	  height: 0;
	  width: 0;
	  position: absolute;
	  pointer-events: none;
	  border-color: rgba(255, 255, 255, 0);
	  border-right-color: #f5f3f4;
	  border-width: 10px;
	  margin-top: -10px;
	}
	.sub_navigation_headline {color:#FFF; padding:0px 10px 0px 15px; font-weight:600; width:100%; display:block; border-bottom:solid 1px #FFF; line-height:50px; font-size:12px;}

	.main_navigation ul li:hover .sub_navigation {
	  visibility:visible;
	  opacity:1;
	}


	/* Open Sidebar */
	.open_sidebar {width:250px;}
	.open_sidebar .sub_navigation {
	  visibility:visible;
	  opacity:1;
	  left:70px;
	}
	.open_sidebar .main_navigation ul li.active {position:inherit;}
	.open_sidebar .sub_navigation ul li.active {position:relative;}
	.open_sidebar .main_navigation>ul>li.active>a>i:after {
	  right: 0;
	  top: 75%;
	  border: solid transparent;
	  content: " ";
	  height: 0;
	  width: 0;
	  position: absolute;
	  pointer-events: none;
	  border-color: rgba(255, 255, 255, 0);
	  border-right-color: #152129;
	  border-width: 7px;
	  margin-top: -7px;
	}

	/*.open_sidebar {width:225px;}
	.open_sidebar .main_navigation ul li .main_navigation_text {
	  width:auto;
	  float:left;
	  text-align:left;
	  padding:0px 10px 0px 15px;
	  line-height:40px;
	  font-size:14px;
	}
	.open_sidebar .cms_sidebar_icons_bg {width:45px;}
	.open_sidebar .main_navigation ul li a {height:40px; width:auto; text-align:left; padding:0px;}
	.open_sidebar .main_navigation ul li .fa, .open_sidebar .main_navigation ul li .icon {
	  float:left;
	  height:40px;
	  width:45px;
	  line-height:40px;
	  margin:0px;
	}*/

	/*--------------------------------------------------------------
	# Left Sidebar (User Profile)
	--------------------------------------------------------------*/
	.user_profile {position:fixed; bottom:0px; left:0px; right:0px; cursor:pointer; width:230px;}
	.user_profile_trigger {display:block;}
	.user_profile_trigger a {display:block; width:100%; height:100%;}
	.user_profile_image {float:left; width:45px; height:45px; padding-top:7px; text-align:center;}
	.user_profile_image .icon {font-size:22px; color:#FFF;}
	.user_profile_image img {width:70%; margin:0 auto; display:block;}
	.user_profile_text {float:left; line-height:1; color:#FFF; font-size:14px; padding-left:15px; padding-top: 9px;}
	.user_profile_text .user_role {font-size:12px; color:rgba(255,255,255,0.5); display:block; margin-top:0px;}

	.user_profile_trigger:hover {background:rgba(40,183,141,0.3);}
	.user_profile_open {position:absolute; right:0px; top:0px; width:auto; height:auto; padding-top:12px; padding-right:20px;}
	.user_profile_open .fa {color:#FFF; font-size:18px; transition:all 0.3s;}


	.user_profile_content {display:none; color:#FFF; padding-bottom:30px;}
	.user_profile_content ul {list-style-type:none;}
	.user_profile_content li {padding:0px; line-height:1.2; color:#FFF; position:relative;}
	.user_profile_content ul li .icon {color:#FFF; font-size:20px; text-align:center; position:relative; left:0; float:left; height:45px; width:45px; line-height:45px;}
	.user_profile_content ul li .navigation_text {position:relative; font-size:14px; display:block; color:#FFF; text-align:left; float:left; padding:0px 10px 0px 15px; width:180px; line-height:45px;}
	.user_profile_content ul li a {color:#FFF; display:block; height:45px;}
	.user_profile_content ul li:after {clear:both; content:""; display:block;}
	.user_profile_content ul li:hover {background:rgba(40,183,141,0.3);}



	.open_profile {background:rgba(40,183,141,0.3);}
	.open_profile .user_profile_trigger {background:rgba(40,183,141,0.5);}
	.open_profile .fa-angle-up {
		transform: rotate(180deg);
	}
</style>

<script>
export default {
    name: "Sidebar"
}
</script>