تصميم القائمة الرئيسية menu

سنقوم بوضع تصميم للقائمة الجانبية  لتطبيقنا  حيث ستظهر القائمة بهدا الشكل 

أول شيء يتعين فعله هو تغيير الألوان الافتراضية التي يقدمها التطبيق ولتغيير هده الألوان الافتراضية ندخل الى ملف src/theme/variables.scss

ونقوم باستبدال متغيرات الألوان الافتراضية بهده الألوان

$colors: (
  primary:    #50a2a7,
  secondary:  #98aa7c,
  danger:     #f53d3d,
  light:      #f4f4f4,
  dark:       #37474f,
);

نتوجه الى ملف src/app/app.html ونعدل على القائمة الرئيسية الافتراضية ليصبح محتوى الملف بهدا الشكل

<ion-menu [content]="content">

  <ion-header>
    <ion-toolbar class="user-profile">
      <ion-grid>
        <ion-row>
            <ion-col col-4>
                <div class="logo-box">
                  <img src="../assets/icon/favicon.ico">
                </div>
            </ion-col>

          <ion-col padding-top col-8>
            <h2 ion-text>Main Menu</h2>
          </ion-col>
        </ion-row>

        <ion-row no-padding padding-top padding-bottom>
          <ion-col no-padding>
            <button color="primary" ion-button icon-left small full  menuClose>
              <ion-icon name="contact"></ion-icon>
              Register
            </button>
          </ion-col>
          <ion-col no-padding>
            <button color="secondary"  ion-button icon-left small full menuClose (click)="logint()">
              <ion-icon name="lock"></ion-icon>
              Login
            </button>
          </ion-col>
        </ion-row>

      </ion-grid>

    </ion-toolbar>
  </ion-header>


  <ion-content>
    <ion-list>
      <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
          {{p.title}}
      </button>
    </ion-list>
  </ion-content>

</ion-menu>

<!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

نضف هدا التنسيق كالعادة بملف src/app/app.scss

ion-menu{
   // رأس القائمة
    ion-header{
          h2{
            margin-top: 5px;
          }
          h2,div{
            font-family: $font-family-base;
            color: #000 !important;
          }
      }

      // محتويات القائمة
      ion-content{
        background: -webkit-linear-gradient(-55deg, #50a2a7 35%, #e9b44c 100%) !important;
        background: -moz-linear-gradient(-55deg, #50a2a7 35%, #e9b44c 100%) !important;
        background: -o-linear-gradient(-55deg, #50a2a7 35%, #e9b44c 100%) !important;
        background: linear-gradient(-55deg, #50a2a7 35%, #e9b44c 100%) !important;
        font-family: $font-family-base ;
      }
      .item {
        background-color: transparent;
      }

      .list .item-block .item-inner {
        border-bottom: 1px solid #cbcba8;
    }
 }

لاننسى اضافة  عناصر القائمة بملف الكود src/app/app.component.ts  

 constructor(public platform: Platform, public statusBar: StatusBar, public splashScreen: SplashScreen) {
    this.initializeApp();

    // مثال عن القائمة الرئيسية .
    this.pages = [
      { title: 'Home', component: HomePage },
      { title: 'Cars', component: ListPage },
      { title: 'My Cart', component: ListPage },
      { title: 'About', component: ListPage },
      { title: 'Settings', component: ListPage },
    ];

  }

النتيجة

المرفقات :

ستجد جميع ملفات الدرس الخاصة بالمجلد src  هنا

ملفات الخطوط الصور ملف cars.js  وملف الخدمة والصفحات الخ.. 

https://www.mediafire.com/file/aow9dwane0qwbk4/cars-auto-v0.0.1.zip/file

دائما ننصح باعادة  كتابة الكود من أجل تقوى مستواك افضل من تحميل الكود جاهز