Update app.py

app.py

@@ -42,84 +42,84 @@ def load_note(subject, unit, note):
 st.set_page_config(
     page_title="Beautiful Notes App",
     page_icon="📝",
-    layout="wide",
+    layout="wide",  # Keep wide for potential wider content, adjust with CSS
     initial_sidebar_state="expanded",
 )
 
 st.title("📝 Beautiful Notes App")
 
+# --- State Management ---
+if 'selected_subject' not in st.session_state:
+    st.session_state['selected_subject'] = None
+if 'selected_unit' not in st.session_state:
+    st.session_state['selected_unit'] = None
+if 'selected_note' not in st.session_state:
+    st.session_state['selected_note'] = None
+
 # Sidebar for navigation
 with st.sidebar:
     st.header("Navigation")
     subjects = get_subjects()
-    selected_subject = st.selectbox("Select Subject", subjects)
+    selected_subject = st.selectbox("Select Subject", subjects, key="subject_selectbox")
+    st.session_state['selected_subject'] = selected_subject
 
-    if selected_subject:
-        units = get_units(selected_subject)
+    if st.session_state['selected_subject']:
+        units = get_units(st.session_state['selected_subject'])
         if units:
-            selected_unit = st.selectbox("Select Unit", units)
-            if selected_unit:
-                notes = get_notes(selected_subject, selected_unit)
+            selected_unit = st.selectbox("Select Unit", units, key="unit_selectbox")
+            st.session_state['selected_unit'] = selected_unit
+            if st.session_state['selected_unit']:
+                notes = get_notes(st.session_state['selected_subject'], st.session_state['selected_unit'])
                 if notes:
-                    selected_note = st.selectbox("Select Note", notes)
+                    selected_note = st.selectbox("Select Note", notes, key="note_selectbox")
+                    st.session_state['selected_note'] = selected_note
                 else:
                     st.info("No notes found in this unit.")
-                    selected_note = None
+                    st.session_state['selected_note'] = None
             else:
                 st.info("No units found in this subject.")
-                selected_note = None
+                st.session_state['selected_note'] = None
         else:
             st.info("No units found in this subject.")
-            selected_note = None
+            st.session_state['selected_note'] = None
     else:
         st.info("No subjects found in the data directory.")
-        selected_note = None
+        st.session_state['selected_note'] = None
 
 # Main area to display notes
-if selected_subject and selected_unit and selected_note:
-    st.header(f"{selected_subject} / {selected_unit} / {selected_note[:-3]}")  # Remove .md extension
-    note_content = load_note(selected_subject, selected_unit, selected_note)
-    if note_content:
-        st.markdown(note_content, unsafe_allow_html=True)
-elif selected_subject and selected_unit:
-    st.info("Select a note from the sidebar to view it.")
-elif selected_subject:
-    st.info("Select a unit from the sidebar to view notes.")
-else:
-    st.info("Select a subject from the sidebar to start exploring your notes.")
-
-# --- Styling ---
+col1, col2 = st.columns([1, 3])  # Adjust column widths as needed for mobile
+
+with col2:
+    if st.session_state['selected_subject'] and st.session_state['selected_unit'] and st.session_state['selected_note']:
+        st.header(f"{st.session_state['selected_subject']} / {st.session_state['selected_unit']} / {st.session_state['selected_note'][:-3]}")  # Remove .md extension
+        note_content = load_note(st.session_state['selected_subject'], st.session_state['selected_unit'], st.session_state['selected_note'])
+        if note_content:
+            st.markdown(note_content, unsafe_allow_html=True)
+    elif st.session_state['selected_subject'] and st.session_state['selected_unit']:
+        st.info("Select a note from the sidebar to view it.")
+    elif st.session_state['selected_subject']:
+        st.info("Select a unit from the sidebar to view notes.")
+    else:
+        st.info("Select a subject from the sidebar to start exploring your notes.")
+
+# --- Styling for Mobile ---
 st.markdown(
     """
     <style>
-    /* Add custom styling here */
-    .streamlit-expander {
-        border: 1px solid #ccc;
-        border-radius: 5px;
-        margin-bottom: 10px;
-    }
-    .streamlit-expander-header {
-        font-weight: bold;
-        padding: 10px;
-    }
-    .streamlit-expander-content {
-        padding: 10px;
-    }
+    /* General Styles */
     body {
         font-family: sans-serif;
         color: #333;
         background-color: #f4f4f4;
+        margin: 0; /* Remove default body margin */
     }
     .stApp {
-        max-width: 900px;
-        margin: 0 auto;
-        padding: 20px;
-        background-color: white;
-        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-        border-radius: 10px;
+        max-width: 100%; /* Occupy full width */
+        padding: 10px; /* Reduced padding for smaller screens */
     }
     h1 {
         color: #007bff;
+        text-align: center; /* Center the title on mobile */
     }
     h2, h3, h4, h5, h6 {
         color: #0056b3;
@@ -127,6 +127,57 @@ st.markdown(
     .st-bf { /* Styling for selectbox labels */
         font-weight: bold;
     }
+    .streamlit-expander {
+        border: 1px solid #ccc;
+        border-radius: 5px;
+        margin-bottom: 10px;
+    }
+    .streamlit-expander-header {
+        font-weight: bold;
+        padding: 8px;
+    }
+    .streamlit-expander-content {
+        padding: 8px;
+    }
+
+    /* Sidebar Styles */
+    .stSidebar {
+        padding-top: 1rem;
+    }
+    .stSidebar > div[data-testid="stVerticalBlock"] {
+        padding: 20px; /* Add padding to sidebar content */
+        overflow: auto; /* Enable scrolling if content overflows */
+        max-height: calc(100vh - 50px); /* Limit height and enable scrolling */
+    }
+
+    /* Main Content Styles */
+    .block-container {
+        padding-top: 1rem !important;
+        padding-bottom: 1rem !important;
+        padding-left: 1rem !important;
+        padding-right: 1rem !important;
+    }
+
+    /* Mobile Specific Styles */
+    @media (max-width: 768px) {
+        .stApp {
+            padding: 5px; /* Further reduce padding on very small screens */
+        }
+        h1 {
+            font-size: 24px; /* Smaller title on mobile */
+        }
+        .st-bf {
+            font-size: 14px; /* Smaller label font */
+        }
+        /* Adjust selectbox size and padding */
+        div[data-baseweb="select"] > div {
+            padding-top: 6px;
+            padding-bottom: 6px;
+        }
+        .stMarkdown {
+            font-size: 16px; /* More readable font size for content */
+        }
+    }
     </style>
     """,
     unsafe_allow_html=True,