Different page architeture for different states

Hello, may be this question s not for ionic forums, but ill hope someone will help me. I whant to have 2 diffrent page architecture in my app, typical content page and page with sidemenu.
Iin my index.html i have this dirrective <ion-nav-view name="index"></ion-nav-view> where i plan to load pages content also i created pages for side-menu pages and content-pages:
side-menu(views/main.html):
<ion-side-menus enable-menu-with-back-views="true"> <ion-side-menu-content nav-router animation="slide-left-right"> <ion-nav-bar class="bar-positive"> <ion-nav-title> <img src="logo.png" id="logo"> </ion-nav-title> </ion-nav-bar> <ion-nav-view name="center"></ion-nav-view> </ion-side-menu-content> <ion-side-menu side="left" id="side-menu-left-content"> <ion-nav-view name="left"></ion-nav-view> </ion-side-menu> </ion-side-menus>

content-page(views/content.html):
<ion-nav-bar class="bar-positive"> <ion-nav-title> <img src="logo.png" id="logo"> </ion-nav-title> </ion-nav-bar> <ion-nav-view name="center"></ion-nav-view>

then i created states for ui-router:
$stateProvider .state('app', { url: '', abstract: true }) .state('app.sidemenu', { url: '', abstract: true, views: { 'index': { templateUrl: 'views/main.html', } } }) .state('app.sidemenu.login', { url: '/login', parent: 'app.sidemenu', views: { 'center': { templateUrl: 'views/login/login.html', }, 'left': { templateUrl: 'views/login/menu.html', } } }) .state('app.content', { url: '', abstract: true, views: { 'index': { templateUrl: 'views/content.html', } } }) .state('app.content.about', { url: '/about', views: { 'center': { templateUrl: 'views/about/about.html' } } })
The idea is that with states app.sidemu.%%statename%% i load side-menu pages and for app.content.%%statename%% typical content pages, but this approach didnt work. So what’s wrong?