@@ -58,8 +58,9 @@ def home_layout() -> dbc.Container:
5858 ),
5959 html .P (
6060 "Welcome to the ML Service Frontend Dashboard. "
61- "Use the sidebar to navigate through different pages." ,
62- style = {"fontSize" : "1.5rem" , "marginTop" : "4rem" }
61+ "Use the sidebar to navigate through different pages. "
62+ "Read the docs to understand what each element of each config does." ,
63+ style = {"fontSize" : "1.5rem" , "marginTop" : "4rem" , "maxWidth" : "50%" , "marginLeft" : "auto" , "marginRight" : "auto" }
6364 ),
6465 html .Ul (
6566 [
@@ -111,11 +112,21 @@ def home_layout() -> dbc.Container:
111112 ])
112113 ]),
113114 ],
114- style = {"fontSize" : "1.2rem" , "marginTop" : "5rem" , "textAlign" : "left" , "marginLeft" : "10%" }
115+ style = {
116+ "fontSize" : "1.2rem" ,
117+ "paddingTop" : "5rem" ,
118+ "textAlign" : "left" ,
119+ "marginLeft" : "10%"
120+ }
115121 )
116122 ],
117123 fluid = True ,
118- style = {"minHeight" : "100vh" , "paddingTop" : "50px" , "backgroundColor" : "#8fa0d8" , "textAlign" : "center" }
124+ style = {
125+ "minHeight" : "100%" ,
126+ "paddingTop" : "50px" ,
127+ "backgroundColor" : "#8fa0d8" ,
128+ "textAlign" : "center"
129+ }
119130 )
120131
121132# Sidebar links (excluding Home)
@@ -146,7 +157,14 @@ def generate_page_links():
146157 dbc .Col (
147158 [
148159 # Separate Home button
149- dbc .Button ("Home" , href = "/" , color = "secondary" , className = "mb-3" , style = {"width" : "100%" }),
160+ dbc .Button (
161+ "Home" ,
162+ id = "home-button" ,
163+ href = "/" ,
164+ color = "secondary" ,
165+ className = "mb-3" ,
166+ style = {"width" : "100%" }
167+ ),
150168
151169 # Sidebar toggle button (hamburger icon)
152170 dbc .Button ("☰" , id = "sidebar-toggle" , color = "primary" , className = "mb-3" , n_clicks = 0 , style = {"width" : "100%" }),
@@ -163,24 +181,36 @@ def generate_page_links():
163181 ),
164182 ],
165183 width = 2 ,
166- style = {"position" : "sticky" , "marginTop" : "5rem" , "padding" : "10px" }
184+ style = {"position" : "sticky" , "marginTop" : "5rem" }
167185 ),
168186 dbc .Col (
169- html .Div (id = "page-content-container" , style = {"padding" : "20px" }),
187+ html .Div (id = "page-content-container" , style = {
188+ "padding" : "20px" ,
189+ "height" : "98vh" ,
190+ "overflowY" : "auto" ,
191+ }),
170192 width = 10 ,
171193 )
172194 ],
173- style = {"minHeight" : "100vh" , "backgroundColor" : "#c1cbda" }
174- )
195+ style = {
196+ "minHeight" : "100vh" ,
197+ "backgroundColor" : "#c1cbda" ,
198+ "overflow" : "hidden"
199+ }
200+ ),
175201 ],
176- fluid = True
202+ fluid = True ,
203+ style = {
204+ "overflow" : "hidden" ,
205+ }
177206)
178207
179208# Callback to toggle sidebar collapse
180209@app .callback (
181- Output ("sidebar-collapse" , "is_open" ),
210+ Output ("sidebar-collapse" , "is_open" , allow_duplicate = True ),
182211 Input ("sidebar-toggle" , "n_clicks" ),
183- State ("sidebar-collapse" , "is_open" )
212+ State ("sidebar-collapse" , "is_open" ),
213+ prevent_initial_call = True
184214)
185215def toggle_sidebar (n , is_open ):
186216 if n :
@@ -212,5 +242,17 @@ def update_active_links(pathname):
212242 current_page = pathname .lstrip ("/" ).replace ("_" , " " )
213243 return [name == current_page for name in PAGES ]
214244
245+ # Callback to close sidebar when Home is clicked
246+ @app .callback (
247+ Output ("sidebar-collapse" , "is_open" , allow_duplicate = True ),
248+ Input ("home-button" , "n_clicks" ),
249+ State ("sidebar-collapse" , "is_open" ),
250+ prevent_initial_call = True
251+ )
252+ def close_sidebar_on_home (n_clicks , is_open ):
253+ if n_clicks :
254+ return False
255+ return is_open
256+
215257if __name__ == "__main__" :
216258 app .run (debug = True , host = "0.0.0.0" , port = 8050 )
0 commit comments