app.py

import streamlit as st

# Custom CSS to mimic the design in the image
st.markdown("""
<style>
    /* CSS styles */
    .big-font {
        font-size:50px !important;
        font-weight: bold;
    }
    .brand-color {
        color: #EB001B;
        font-weight: bold;
    }
    .bot-container {
        background-color: #F0F0F0;
        border-radius: 10px;
        padding: 20px;
        margin: 10px;
    }
    .top-bar {
        background-color: #000000;
        color: white;
        padding: 10px 0px;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 999;
        display: flex;
        align-items: center;
        justify-content: start;
    }
    .brand-logo {
        height: 40px;
        margin-right: 10px;
    }
    .brand-bot-title {
        font-size: 24px;
        font-weight: bold;
        color: white;
    }
    .stSidebar {
        display: none;
    }
    .main-body {
        margin-top: 70px;
    }
    /* Adjust padding for main content to give space for fixed header */
    .css-18e3th9 {
        padding-top: 70px;
    }
</style>
""", unsafe_allow_html=True)

# Top bar layout
st.markdown("""
<div class="top-bar">
    <img src="mastercard_logo.png" alt="Mastercard Logo" class="brand-logo">
    <span class="brand-bot-title">Brand Bot</span>
</div>
""", unsafe_allow_html=True)

# Mimic a sidebar with a custom layout inside the main body
st.markdown('<div class="main-body">', unsafe_allow_html=True)

# Creating a custom sidebar
sidebar_col, main_col = st.columns([1, 5], gap="small")
with sidebar_col:
    st.markdown("## Sidebar")
    st.text("This is some text before the New Chat button.")
    if st.button("New Chat", key="new_chat"):
        # Your button click handling here
        pass

with main_col:
    # Main page layout
    st.markdown('<p class="big-font">Hello!</p>', unsafe_allow_html=True)
    st.markdown('<p>I\'m Brand Bot, an internal chatbot that provides you with fast, reliable information about the Mastercard brand. How can I help you today?</p>', unsafe_allow_html=True)

    # Example requests and the rest of your main content
    # ...

st.markdown('</div>', unsafe_allow_html=True)  # End of main-body div