CODEWITHSUNDEEP
javascripthtmlcssreactjs
Alvin Quezon
Alvin Quezon

Reputation: 1201

ReactJs Side bar right side content

I have used library react-pro-sidebar to create my collapsible sidebar with Icons, My problem is how can I make my main content on the right side (beside the collapsible sidebar) and also make it responsive at the same time.

import React, { useState } from 'react';
import './styles/dashboard.css';
import 'react-pro-sidebar/dist/css/styles.css';
import { BuildHeaderDashboard, BuildTopNavigationBar, BuildSideBar } from './Dashboard';

export const CompanyPortal = () =>  {
    const [toggleCollapse, setToggleCollapse] = useState(false);

    const handleToggleCollapse = (event) => {
        setToggleCollapse(!toggleCollapse);

    }


    return (
        <div>
            <BuildSideBar isToggleCollapse={toggleCollapse} />
            <main style={toggleCollapse ? { left: '3.25%' } : { left: '16%' } }>testfdsafdasfd afd asfd asfd haskf hdashf kjdsahfk jdsahkf hdashf dsahf dshaf hdask fhjdasj</main>
        </div>
    );
}

export default CompanyPortal;
main {
    position: relative;
    padding: 24px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.pro-sidebar {
    position: absolute !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Quick GIF sample: https://gyazo.com/0c042d72dda56defadb5192c10df73af

As you can see in the GIF I uploaded the text doesn't seem to be responsive and it tends to overflow on the left side while dragging the browser screen to lower. Does anyone know how to achieve this?

Upvotes: 0

Views: 2260

Answers (1)

Shubham
Shubham

Reputation: 210

Hi Please try the below solution

<!DOCTYPE html>
<html>
    <style>
    main {
        position: relative;
        padding: 24px;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        overflow-y: auto;
    }
        
    </style>
    <body>
        <div style="display:flex">
            <div style="width: 150px;height: 100vh; background-color: grey;">Left Side</div>
            <main>estfdsafdasfd afd asfd asfd haskf hdashf kjdsahfk jdsahkf hdashf dsahf dshaf hdask fhjdas</main>
        </div>

    </body>
</html>

Upvotes: 1

Related Questions