UI: Minimize sidebar/toggle
williamla opened this issue · comments
Requesting a sidebar toggle or toggle for fullscreen. Love the app, but the sidebar makes navigation on mobile a bit tricky. Thanks!
I was able to edit the App.tsx to implement this change -
(the code is probably garbage so don't judge 😂)
Add the toggle constant / function
function App() {
const [isCollapsed, setIsCollapsed] = useState(false);
......
function toggleCollapse() {
setIsCollapsed(!isCollapsed);
}
Now edit your return to add in the buttons - this part was fun lol
<Flex
direction="column"
h="100vh"
overflow="hidden"
bgColor={darkMode ? "#1e1e1e" : "white"}
color={darkMode ? "#cbcaca" : "inherit"}
>
<Box
flexShrink={0}
bgColor={darkMode ? "#333333" : "#e8e8e8"}
color={darkMode ? "#cccccc" : "#383838"}
textAlign="center"
fontSize="sm"
py={0.5}
>
WoahAI - CoCode
</Box>
<Flex flex="1 0" minH={0}>
{!isCollapsed && (
<Container
w="xs"
bgColor={darkMode ? "#252526" : "#f3f3f3"}
overflowY="auto"
maxW="full"
lineHeight={1.4}
py={4}
>
<ConnectionStatus
darkMode={darkMode}
connection={connection}
/>
<Flex justifyContent="space-between" mt={4} mb={1.5} w="full">
<Heading size="sm">Dark Mode</Heading>
<Switch
isChecked={darkMode}
onChange={handleDarkMode}
/>
</Flex>
<Heading mt={4} mb={1.5} size="sm">
Language
</Heading>
<Select
size="sm"
bgColor={darkMode ? "#3c3c3c" : "white"}
borderColor={darkMode ? "#3c3c3c" : "white"}
value={language}
onChange={(event) =>
handleChangeLanguage(event.target.value)
}
>
{languages.map((lang) => (
<option
key={lang}
value={lang}
style={{ color: "black" }}
>
{lang}
</option>
))}
</Select>
<Heading mt={4} mb={1.5} size="sm">
Share Link
</Heading>
<InputGroup size="sm">
<Input
readOnly
pr="3.5rem"
variant="outline"
bgColor={darkMode ? "#3c3c3c" : "white"}
borderColor={darkMode ? "#3c3c3c" : "white"}
value={`${window.location.origin}/#${id}`}
/>
<InputRightElement width="3.5rem">
<Button
h="1.4rem"
size="xs"
onClick={handleCopy}
_hover={{
bg: darkMode ? "#575759" : "gray.200",
}}
bgColor={darkMode ? "#575759" : "gray.200"}
>
Copy
</Button>
</InputRightElement>
</InputGroup>
<Heading mt={4} mb={1.5} size="sm">
Active Users
</Heading>
<Stack spacing={0} mb={1.5} fontSize="sm">
<User
info={{ name, hue }}
isMe
onChangeName={(name) =>
name.length > 0 && setName(name)
}
onChangeColor={() => setHue(generateHue())}
darkMode={darkMode}
/>
{Object.entries(users).map(([id, info]) => (
<User
key={id}
info={info}
darkMode={darkMode}
/>
))}
</Stack>
<Heading mt={4} mb={1.5} size="sm">
About
</Heading>
<Text fontSize="sm" mb={1.5}>
<strong>CoCode</strong> is a collaborative text editor.
</Text>
<Text fontSize="sm" mb={1.5}>
Edit code and other text with others at the same time.
</Text>
<Text fontSize="sm" mb={1.5}>
Configured by WoahAI. See our{" "}
<Link
color="purple.600"
fontWeight="semibold"
href="https://github.com/woahai321"
isExternal
>
GitHub
</Link>{" "}
for more.
</Text>
<Button
size="sm"
colorScheme={
darkMode ? "whiteAlpha" : "blackAlpha"
}
borderColor={
darkMode ? "purple.400" : "purple.600"
}
color={darkMode ? "purple.400" : "purple.600"}
variant="outline"
leftIcon={<VscRepoPull />}
mt={1}
onClick={handleLoadSample}
>
Read the code
</Button>
</Container>
)}
<Flex
flex={1}
minW={0}
h="100%"
direction="column"
overflow="hidden"
>
<HStack
h={6}
spacing={1}
color="#888888"
fontWeight="medium"
fontSize="13px"
px={3.5}
flexShrink={0}
>
<Icon
as={VscFolderOpened}
fontSize="md"
color="blue.500"
/>
<Text>documents</Text>
<Icon as={VscChevronRight} fontSize="md" />
<Icon
as={VscGist}
fontSize="md"
color="purple.500"
/>
<Text>{id}</Text>
</HStack>
<Box flex={1} minH={0}>
<Editor
theme={darkMode ? "vs-dark" : "vs"}
language={language}
options={{
automaticLayout: true,
fontSize: 13,
}}
onMount={(editor) => setEditor(editor)}
/>
</Box>
{isCollapsed && (
<Button
onClick={() => setIsCollapsed(false)}
mt={2}
colorScheme="purple"
variant="outline"
bgColor="transparent"
_hover={{
bgColor: darkMode ? "rgba(87, 87, 89, 0.2)" : "rgba(128, 128, 128, 0.2)",
}}
_active={{
bgColor: darkMode ? "rgba(87, 87, 89, 0.4)" : "rgba(128, 128, 128, 0.4)",
}}
size="sm"
>
Expand menu
</Button>
)}
{!isCollapsed && (
<Button
position="absolute"
bottom=".25%"
left="xs"
transform="translate(-100%, -50%)"
onClick={toggleCollapse}
bgColor="transparent"
_hover={{
bgColor: darkMode ? "rgba(87, 87, 89, 0.2)" : "rgba(128, 128, 128, 0.2)",
}}
_active={{
bgColor: darkMode ? "rgba(87, 87, 89, 0.4)" : "rgba(128, 128, 128, 0.4)",
}}
>
{"<"}
</Button>
)}
</Flex>
</Flex>
<Footer />
</Flex>
);
}
export default App;
Are you able to open up a branch with these changes? if not, I will try doing so with these changes this weekend to test. Thanks!
I can confirm that these instructions worked for me as well.
@ekzhang : Would you be willing to merge this, if someone made this into a PR?