ساخت کامپوننت Toolbar | آموزش کامل React

اضافه کردن قیمت به Modal خلاصه سفارش

برای تکمیل Modal ما یک قدم باقی مانده است و آن اضافه کردن قیمت سفارش به توضیحات آن است. انجام این کار بسیار ساده است و بیشتر از چند خط کد طول نمی کشد! وارد فایل OrderSummary.js شوید و در قسمت JSX آن قیمت را به صورت زیر اضافه کنید:

    return (
        <Aux>
            <h3>Your Order</h3>
            <p>A delecious burger with the following ingredients:</p>
            <ul>
                {ingredientSummary}
            </ul>
            <p><strong>Total Price: {props.price.toFixed(2)}</strong></p>
            <p>Continue to Checkout?</p>
            <Button btnType="Danger" clicked={props.purchaseCancelled}>CANCEL</Button>
            <Button btnType="Success" clicked={props.purchaseContinued}>CONTINUE</Button>
        </Aux>
    );

ما از تابع toFixed استفاده کرده ایم تا باگ اعداد اعشاری در جاوا اسکریپت را از بین ببریم. برخی اوقات در جاوا اسکریپت اعداد اعشاری بسیار طولانی می شوند (مثلا تا 9 رقتم اعشار!) ولی ما با استفاده از toFixed گفته ایم قیمت فقط تا 2 رقم اعشار اجازه ی نمایش دارد. در واقع می خواهیم با استفاده از props.price قیمت همبرگر را داشته باشیم اما مشکل اینجاست که هنوز این props را به این کامپوننت پاس نداده ایم. بنابراین به فایل BurgerBuilder.js رفته و در قسمت JSX آن، price را پاس می دهیم:

<OrderSummary
    ingredients={this.state.ingredients}
    price={this.state.totalPrice}
    purchaseCancelled={this.purchaseCancelHandler}
    purchaseContinued={this.purchaseContinueHandler}
/>

اگر الان به مرورگر بروید نتیجه را به صورت صحیح و کامل مشاهده خواهید کرد.

اضافه کردن Toolbar

همانطور که قبلا گفتم قصد داریم در فصل های بعد این پروژه را پیشرفته تر کنیم و روی سرور قرار دهیم تا صفحات مختلفی داشته باشیم. در چنین حالتی اگر بدون Toolbar یا نوار ابزار باشیم، پیدا کردن و باز کردن صفحات مختلف سایت کار آزار دهنده ای می شود. برای ایجاد Toolbar درون پوشه ی components یک پوشه به نام Navigation ایجاد کنید تا مواردی مانند Toolbar یا منوی کشویی (برای موبایل ها) را در آن قرار دهیم. حالا درون پوشه ی Navigation یک پوشه ی دیگر به نام Toolbar ساخته و درون آن فایلی به نام Toolbar.js بسازید. محتویات این فایل بدین شکل است:

import React from 'react';

const toolbar = (props) => (
    <header>
        <div>MENU</div>
        <div>LOGO</div>
        <nav>
            ...
        </nav>
    </header>
);

export default toolbar;

div های بالا به صورت placeholder هستند یعنی بعدا کد آن ها را می نویسیم و فعلا div قرار داده ایم تا بدانیم کلیت کار به چه شکل خواهد بود. در واقع برای هر کدام از موارد بالا یک کامپوننت خواهیم ساخت ( کامپوننت لوگو و کامپوننت منو و...). و برای nav ها نیز یک کامپوننت خواهیم ساخت که برای گوشی های موبایل تبدیل به منوی کشویی شود. قبل از ساخت این موارد بهتر است خود Toolbar را بسازیم بنابراین یک فایل به نام Toolbar.module.css ایجاد کنید و استایل زیر را در آن قرار دهید:

.Toolbar {
    height: 56px;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #703b09;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    box-sizing: border-box;
    z-index: 90;
}

.Toolbar nav {
    height: 100%;
}

هدف ما این است که این برنامه mobile-first طراحی شود، یعنی ابتدا برای گوشی های هوشمند طراحی شده و سپس کاری کنیم که روی دسکتاپ نیز به خوبی نمایش داده شود اما toolbar معمولا برای هر دو دستگاه یکسان است برای همین با toolbar شروع کرده ایم. مقدار position را ثابت گذاشته ایم تا حتی با اسکرول نیز ثابت بماند. از مقادیر top و left استفاده کرده ایم تا مکان toolbar را مشخص کرده باشیم و به طور مثال نصفه دیده نشود. مقدار display را flex گذاشته ایم تا بتوانیم از قابلیت های justify-content و align-items استفاده کنیم. اگر با flex آشنا نیستید حتما به مقالات ما در این مورد سر بزنید:

flexbox از قابلیت های بسیار عالی CSS برای طراحی است که کار ما را راحت تر کرده است. دیگر نیازی نیست ما به روش های عجیب و غریب قدیمی مانند float ها عمل کنیم. همچنین توجه داشته باشید که z-index ما در این قسمت باید کمتر از مقدار تعیین شده در backdrop باشد تا زیر آن قرار بگیرد. در آخر گفته ایم nav های درون کلاس Toolbar باید 100 درصد عرض را بگیرند تا ممطئن شویم بین nav و کلاس toolbar فضای خالی و بیهوده نباشد.

حالا به فایل Toolbar.js برمیگردیم و کلاس هایمان را import می کنیم:

import React from 'react';
import classes from './Toolbar.module.css';

const toolbar = (props) => (
    <header className={classes.Toolbar}>
        <div>MENU</div>
        <div>LOGO</div>
        <nav>
            ...
        </nav>
    </header>
);

حالا به مسئله ی دیگری می رسیم: این Toolbar را کجا قرار دهیم؟ از آنجایی که این Toolbar باید بالای تمام صفحات ما باشد من پیشنهاد می کنم که آن را در Layout.js قرار دهیم (البته میتوانید از App.js نیز استفاده کنید) و اگر یادتان باشد در این فایل یک placeholder برای toolbar ایجاد کرده بودیم. بنابراین به Layout.js بروید و به جای div حاوی متن toolbar خود کامپوننت را اضافه کنید:

import Toolbar from '../Navigation/Toolbar/Toolbar';

const layout = (props) => (
    <Aux>
        <Toolbar />
        <main className={classes.Content}>
            {props.children}
        </main>
    </Aux>
);

اگر فایل ها را ذخیره کرده و به مرورگر بروید، می بینید که Toolbar ما در بالای صفحه است:

اما دو مشکل وجود دارد: مشکل اول این است متن Toolbar (گزینه های Menu و ...) باید سفید باشند. این مشکل را نادیده می گیریم چرا که بعدا قرار است کامپوننت های منو و... را جداگانه بنویسیم و آنجا آن ها را سفید می کنیم. مشکل دوم این است که Toolbar روی همبرگر آمده است و ما نمی توانیم همبرگر را به طور کامل ببینیم. برای حل این مشکل مقدار Margin تگ <Main> را از فایل Layout.css افزایش می دهیم تا تمام محتوای ما کمی پایین تر برود: