have friends and public buttons be fixed

394-w25 · Jan 21, 2025 · b9de66b · b9de66b
1 parent 7f1121d
commit b9de66b
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 4 deletions.
diff --git a/src/components/Feed/Feed.css b/src/components/Feed/Feed.css
@@ -1,4 +1,13 @@
 .feed-content {
-    margin-top: 4rem;
-    margin-bottom: 4rem;
+    height: calc(100vh - 56px - 64px - 72px); /* This is the height of the viewport minus the height of the app bar, the bottom navigation bar, and the friends public switch */
+    margin-top: 150px;
+}
+
+.friends-public-switch {
+    left: 0;
+    right: 0;
+    top: 64px;
+    position: fixed;
+    z-index: 1000;
+    background-color: white;
 }
diff --git a/src/components/Feed/Feed.jsx b/src/components/Feed/Feed.jsx
@@ -79,11 +79,11 @@ function Feed() {
   return (
     <div>
       <AppBar />
-      <Container className="feed-content" maxWidth="sm">
-        <Tabs value={value} onChange={handleChange} centered>
+        <Tabs className="friends-public-switch" value={value} onChange={handleChange} centered>
           <Tab label="Friends" icon={<PeopleIcon />} component={Link} to="/feed" />
           <Tab label="Public" icon={<PublicIcon />} component={Link} to="/public" />
         </Tabs>
+        <Container className="feed-content" maxWidth="sm">
         <CourseSelect searchFunc={setSearch} />
           <Box paddingBottom="30px">
             <Stack spacing={3}>