Upload app.py

app.py

@@ -3,6 +3,7 @@ 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;
@@ -17,16 +18,15 @@ st.markdown("""
         padding: 20px;
         margin: 10px;
     }
-    .button-custom {
-        background-color: #FF5F00;
-        color: white;
-        border-radius: 5px;
-        border: none;
-    }
     .top-bar {
         background-color: #000000;
         color: white;
-        padding: 10px 20px;
+        padding: 10px 0px;
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        z-index: 999;
         display: flex;
         align-items: center;
         justify-content: start;
@@ -37,10 +37,19 @@ st.markdown("""
     }
     .brand-bot-title {
         font-size: 24px;
-        margin-left: 10px;
         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)
 
@@ -52,23 +61,24 @@ st.markdown("""
 </div>
 """, unsafe_allow_html=True)
 
-# Sidebar design
-st.sidebar.text("= Brandbot")
-st.sidebar.button("+ New Chat", key="new_chat", on_click=None, args=None, kwargs=None, disabled=False)
+# Mimic a sidebar with a custom layout inside the main body
+st.markdown('<div class="main-body">', unsafe_allow_html=True)
 
-# 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)
+# 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
 
-# Example requests
-st.markdown("""
-- Where can I download the Mastercard logo?
-- Where does our logo go on websites?
-- What is the right trademark attribution line for marketing collateral?
-""")
+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)
 
-# User input
-user_input = st.text_input('', '')
+    # Example requests and the rest of your main content
+    # ...
 
-# Bottom note
-st.markdown('<p class="brand-color">Brand Bot is in beta release. Review our guidelines before proceeding.</p>', unsafe_allow_html=True)
+st.markdown('</div>', unsafe_allow_html=True)  # End of main-body div