Placing components on the right and around other items in React problem-CodePudding

Sorry for my atrociously bad title on this post.

I would like to achieve something like this as my end goal (my figma mockup):

But I don't know how to achieve this as when I call a component on a "page", it just places the items underneath the navbar like this:

(the text like iPad momentos was just for me testing if the components worked and were called correctly)

I haven't developed all of the components you can see in the mockup (figma), but that shouldn't matter. All I would like to know is with (S)CSS, how you can place different flexboxes or items around each other like in the image below.

Thanks a lot.

My code:

// This file is SRDash (you could call it a page if you want)

// Normal Imports
import React from 'react';
import CardLink from '../components/CardLink';

// Component Imports
import SNavbar from '../components/SNavbar'
import Text from '../components/Text'

// Styling Imports (Global Styles for this Dash)
import './sradmin.scss'

const SrDash = () => {
    return ( 
        <div className="mainContent">
            <SNavbar />
            <Text />
            <CardLink text="text here" link="asdfsd" svg="asdfsdf"/>
        </div>
    );
}

export default SrDash;

It's styling:

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');

* {
    margin: 0;
}

body {
    color: blue;
}

Navbar SCSS:

body {
    margin: 0
}

.snavbarcontainer {
    background-color: black;
    min-width: 3.5em;
    max-width: 3.5em;
    height: 100vh;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.icons_ul {
    text-decoration: none;
    list-style-type: none;
    padding: 0;
}

.icons_ul li {
    margin: 0.5em 0;
}

.icons_ul {
    justify-content: center;
}

.toplefticon {
    position: absolute;
    top: 0;
    transform: translateY(50%);
}

Navbar JSX:

import React from 'react';

import './navbar.scss';

// SVG Imports
import topleft from '../assets/toplefticon.svg'
import IDash from '../assets/dashboard.svg'
import IDB from '../assets/database.svg'
import IHand from '../assets/hand.svg'
import ILookupPupils from '../assets/lookup-pupils.svg'
import IMAdmins from '../assets/manage-admins.svg'
import IMUsers from '../assets/manage-users.svg'

const SNavbar = () => {
    {/* <img className="testimage" src={topleft} alt="Testing Logo" /> */}
    return (
        <div className="snavbarcontainer">
            
            <div className="toplefticon">
                <a className="test" href="#"><img src={topleft} alt="Testing Logo" /></a>
            </div>

            <div className="mainIcons">
                <ul className="icons_ul">
                    <li><a href="#"><img src={ILookupPupils} alt="Pupil Lookup" /></a></li>
                    <li><a href="#"><img src={IMUsers} alt="Manage Users" /></a></li>
                    <li><a href="#"><img src={IHand} alt="Coming Soon" /></a></li>
                    <li><a href="#"><img src={IMAdmins} alt="Manage Admins" /></a></li>
                    <li><a href="#"><img src={IDash} alt="Dashboard" /></a></li>
                    <li><a href="#"><img src={IDB} alt="Dashboard" /></a></li>
                </ul>
            </div>
            
        </div>
    );
}

export default SNavbar;

Thanks again.

CodePudding user response：

Give mainContent css with property

display:flex;

CodePudding user response：

Hey so after hours of trying to figure it out, the solution was to seperate the navbar and the actual content into seperate divs, like below:

<div className="mainContent">
            <SNavbar />

            <div className="content">
                <Text />
                <CardLink text="text here" link="asdfsd" svg="asdfsdf"/>
            </div>
        </div>

This worked perfectly and after which I had no issues with, and look at the outcome now!