From 3aa6eee0f54dec3e4f92be2ad335a04145ac4db8 Mon Sep 17 00:00:00 2001 From: Ariel Costas Guerrero <94913521+arielcostas@users.noreply.github.com> Date: Mon, 3 Mar 2025 18:54:35 +0100 Subject: Improve the UI --- src/Layout.css | 44 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 44 insertions(+) create mode 100644 src/Layout.css (limited to 'src/Layout.css') diff --git a/src/Layout.css b/src/Layout.css new file mode 100644 index 0000000..52b0262 --- /dev/null +++ b/src/Layout.css @@ -0,0 +1,44 @@ +.app-container { + display: flex; + flex-direction: column; + height: 100vh; + width: 100%; + overflow: hidden; +} + +.main-content { + flex: 1; + overflow: auto; + padding: 16px; + padding-bottom: 70px; /* Extra padding to ensure content isn't hidden behind navbar */ +} + +.nav-bar { + position: fixed; + bottom: 0; + left: 0; + right: 0; + background-color: #ffffff; + display: flex; + justify-content: space-around; + align-items: center; + height: 60px; + border-top: 1px solid #e0e0e0; + box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); +} + +.nav-item { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 8px; + color: #616161; + text-decoration: none; + width: 33.3%; + font-size: 12px; +} + +.nav-item.active { + color: #007bff; +} \ No newline at end of file -- cgit v1.3