Add responsive in tables and navbar

adropla · Feb 23, 2022 · 6a53094 · 6a53094
1 parent eb64514
commit 6a53094
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 32 deletions.
diff --git a/src/components/Cryptocurrencies/Cryptocurrencies.tsx b/src/components/Cryptocurrencies/Cryptocurrencies.tsx
@@ -132,6 +132,7 @@ const Cryptocurrencies: FC<ICoinsData> = ({ dataCoins }) => {
                 position: ['bottomCenter'],
                 hideOnSinglePage: true,
             }}
+            scroll={{ x: 1000 }}
         />
     );
 };

diff --git a/src/components/Exchanges/Exchanges.tsx b/src/components/Exchanges/Exchanges.tsx
@@ -74,6 +74,7 @@ const Exchanges: FC<IExchangesProps> = ({ data }) => {
                 rowKey='id'
                 onChange={onChangeTable}
                 pagination={{ pageSize, position: ['bottomCenter'] }}
+                scroll={{ x: 600 }}
             />
         </div>
     );

diff --git a/src/components/Navbar/NavBar.module.scss b/src/components/Navbar/NavBar.module.scss
@@ -1,4 +1,16 @@
 .wrapper {
   display: flex;
   align-items: center;
+  @media screen and (max-width: 600px) {
+    flex-direction: column;
+
+  }
+}
+
+.wrapperLogoAndMenu {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  margin-bottom: 10px;
 }
diff --git a/src/components/Navbar/Navbar.tsx b/src/components/Navbar/Navbar.tsx
@@ -21,39 +21,42 @@ const Navbar: FC = () => {
     return (
         <Margin vertical={MARGIN.xl}>
             <div className={styles.wrapper}>
-                <img src={logo} alt="logo" height="30px" />
-                <Menu
-                    mode="horizontal"
-                    style={{ width: '100%', borderBottomStyle: 'none' }}
-                >
-                    <Menu.Item
-                        key="cryptocurrencies"
-                        icon={<MoneyCollectOutlined />}
-                        onClick={() => history.push(ROUTES.main)}
+                <div className={styles.wrapperLogoAndMenu}>
+                    <img src={logo} alt="logo" height="30px" />
+                    <Menu
+                        mode="horizontal"
+                        className={styles.menu}
+                        style={{ width: '100%', borderBottomStyle: 'none' }}
                     >
-                        Cryptocurrencies
-                    </Menu.Item>
-                    <Menu.Item
-                        key='exchanges'
-                        icon={<GlobalOutlined />}
-                        onClick={() => history.push(ROUTES.exchanges)}>
-                        Exchanges
-                    </Menu.Item>
-                    <Menu.Item
-                        key='portfolio'
-                        icon={<PieChartOutlined />}
-                        onClick={() => history.push(ROUTES.portfolio)}
-                    >
-                        Portfolio
-                    </Menu.Item>
-                    <Menu.Item
-                        key="watchlist"
-                        icon={<UnorderedListOutlined />}
-                        onClick={() => history.push(ROUTES.watchlist)}
-                    >
-                        Watchlist
-                    </Menu.Item>
-                </Menu>
+                        <Menu.Item
+                            key="cryptocurrencies"
+                            icon={<MoneyCollectOutlined />}
+                            onClick={() => history.push(ROUTES.main)}
+                        >
+                            Cryptocurrencies
+                        </Menu.Item>
+                        <Menu.Item
+                            key="exchanges"
+                            icon={<GlobalOutlined />}
+                            onClick={() => history.push(ROUTES.exchanges)}>
+                            Exchanges
+                        </Menu.Item>
+                        <Menu.Item
+                            key="portfolio"
+                            icon={<PieChartOutlined />}
+                            onClick={() => history.push(ROUTES.portfolio)}
+                        >
+                            Portfolio
+                        </Menu.Item>
+                        <Menu.Item
+                            key="watchlist"
+                            icon={<UnorderedListOutlined />}
+                            onClick={() => history.push(ROUTES.watchlist)}
+                        >
+                            Watchlist
+                        </Menu.Item>
+                    </Menu>
+                </div>
                 <SearchEngine />
             </div>
         </Margin>
-Original file line number
+Diff line change
@@ Expand Up @@
                     position: ['bottomCenter'],
                     hideOnSinglePage: true,
                 }}
+                scroll={{ x: 1000 }}
             />
         );
     };
@@ Expand Down @@